{"id":78763,"date":"2025-04-03T13:46:05","date_gmt":"2025-04-03T11:46:05","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=78763&#038;preview=true&#038;preview_id=78763"},"modified":"2025-04-16T10:48:57","modified_gmt":"2025-04-16T08:48:57","slug":"extender-bloques-del-core-de-wp","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/","title":{"rendered":"C\u00f3mo extender los bloques del core de WordPress con Blocks API"},"content":{"rendered":"<p>En 2018, WordPress introdujo el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor Gutenberg<\/a> con la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-0\/\">versi\u00f3n 5.0<\/a>, aportando una nueva forma de construir p\u00e1ginas y entradas mediante \u00abbloques\u00bb. Al principio, estos bloques eran bastante b\u00e1sicos, pero con los a\u00f1os <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">han evolucionado<\/a> para ofrecer m\u00e1s flexibilidad y una mejor experiencia de edici\u00f3n.<\/p>\n<p>Aun as\u00ed, hay ocasiones en las que un bloque no hace exactamente lo que necesitas. Tal vez quieras eliminar ciertas funcionalidades, a\u00f1adir otras nuevas, aplicar un estilo espec\u00edfico por defecto o hacer que algunos ajustes sean m\u00e1s f\u00e1ciles de acceder. En casos como este, <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">crear un bloque personalizado<\/a> desde cero puede parecer una opci\u00f3n, pero \u2014 seamos sinceros \u2014 es excesivo para realizar peque\u00f1os ajustes. \u00bfNo ser\u00eda m\u00e1s f\u00e1cil si pudieras modificar los bloques que ya existen?<\/p>\n<p>Ah\u00ed es donde entra en juego la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\">API de Bloques (Blocks API)<\/a>. Este art\u00edculo explica c\u00f3mo ampliar los bloques principales de WordPress utilizando Blocks API, y proporciona ejemplos pr\u00e1cticos que pueden utilizarse en proyectos reales.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprender Blocks API de WordPress<\/h2>\n<p>Blocks API de WordPress constituye la base del editor de bloques, permitiendo a los <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-desarrolladores\/\">desarrolladores<\/a> crear, modificar y ampliar bloques. La API proporciona varias formas de interactuar con los bloques. Puedes:<\/p>\n<ul>\n<li><strong>Modificar la configuraci\u00f3n de los bloques<\/strong> \u2014 Cambiar los atributos, valores por defecto y comportamientos de los bloques.<\/li>\n<li><strong>A\u00f1adir o eliminar soportes de bloque<\/strong> \u2014 Activar o desactivar caracter\u00edsticas como la tipograf\u00eda, los colores y el espaciado.<\/li>\n<li><strong>Inyectar controles personalizados<\/strong> \u2014 A\u00f1adir nuevas opciones dentro del panel de configuraci\u00f3n de bloques.<\/li>\n<li><strong>Crear variaciones de bloques<\/strong> \u2014 Crea versiones preconfiguradas de bloques existentes para acelerar la creaci\u00f3n de contenidos.<\/li>\n<\/ul>\n<p>Cada bloque en WordPress, ya sea un bloque <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">P\u00e1rrafo<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagen<\/a> o <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bot\u00f3n<\/a>, se define mediante un conjunto de atributos y ajustes almacenados en un archivo <code>block.json<\/code>. Este archivo contiene <a href=\"https:\/\/kinsta.com\/es\/blog\/anadir-meta-box-a-entradas-de-wordpress\/\">metadatos<\/a> sobre el bloque, incluyendo su nombre, categor\u00eda, atributos predeterminados y las funcionalidades que admite.<\/p>\n<p>WordPress te permite modificar estos valores utilizando <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a>, pero este art\u00edculo explica c\u00f3mo utilizar los <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">hooks de filtro<\/a> en la Blocks API. Esto garantiza que tus modificaciones se registren en el servidor sin necesidad de <a href=\"https:\/\/kinsta.com\/es\/blog\/wp-enqueue-scripts\/\">poner en cola<\/a> archivos JavaScript adicionales.<\/p>\n<p>Por ejemplo, si quieres activar o desactivar determinadas caracter\u00edsticas de un bloque, la mejor forma de hacerlo es utilizando el <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-hooks\/#hooks-vs-actions-vs-filters\">filtro<\/a> <code>register_block_type_args<\/code> en PHP. Este m\u00e9todo te permite ajustar din\u00e1micamente la configuraci\u00f3n del bloque sin modificar directamente el archivo <code>block.json<\/code>.<\/p>\n<h2>Modificar los soportes de los bloques<\/h2>\n<p>Los bloques de WordPress vienen con soportes predefinidos, que controlan las opciones del editor. Algunos bloques, como <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">el bloque Imagen<\/a> (<code>core\/image<\/code>), tienen <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">filtros duotono<\/a> activados por defecto, lo que permite a los usuarios aplicar superposiciones de color.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"Bloque de imagen de WordPress con el filtro Duotone aplicado.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloque Imagen de WordPress con filtro Duotono.<\/figcaption><\/figure>\n<p>Sin embargo, el <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\">bloque de Medios y Texto<\/a> (<code>core\/media-text<\/code>) no admite el duotono de forma predeterminada, aunque permite a los usuarios insertar una imagen. Esto significa que, aunque puedes aplicar un filtro duotono a un bloque Imagen independiente, no puedes hacer lo mismo cuando una imagen se coloca dentro de un bloque Medios y Texto.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"Bloque de Medios y Texto sin soporte Duotono.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloque de Medios y Texto sin soporte Duotono.<\/figcaption><\/figure>\n<p>Dado que el bloque de Medios y texto puede contener una imagen, tiene sentido habilitar los filtros duotono. Podemos hacerlo modificando su array <code>supports<\/code>\u00a0y especificando el selector CSS adecuado para que el filtro se aplique correctamente. Esto se habilita mediante el filtro <code>register_block_type_args<\/code> en PHP.<\/p>\n<p>A\u00f1ade el siguiente c\u00f3digo al archivo <code>functions.php<\/code> de tu tema:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Si a\u00f1ades esto al archivo <code>functions.php<\/code> de tu tema, es mejor que lo hagas en un <strong>tema hijo<\/strong> para evitar perder los cambios cuando se actualice el tema.<\/p>\n<p>Alternativamente, si eres <strong>usuario de Kinsta<\/strong>, te recomendamos probar esto en un <strong>entorno staging<\/strong> antes de aplicarlo a tu sitio en producci\u00f3n. As\u00ed te aseguras de que todo funciona correctamente sin afectar a la producci\u00f3n.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>El c\u00f3digo anterior activa el filtro duotono dentro del array <code>supports<\/code> y define el selector CSS correcto para aplicar el efecto duotono a las im\u00e1genes dentro del bloque Medios y Texto. La funci\u00f3n <code>add_filter()<\/code> utiliza <code>10<\/code> como prioridad (cuando se ejecuta el filtro) y <code>2<\/code> para especificar el n\u00famero de argumentos pasados (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Cuando guardes el archivo y vuelvas a cargarlo, deber\u00edas ver los controles <strong>Duotono<\/strong> disponibles en la secci\u00f3n <strong>Filtros<\/strong>.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Filtro de dos tonos habilitado para el bloque de Medios y Texto.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Filtro Duotono activado.<\/figcaption><\/figure>\n<p>Activar el duotono para el bloque Medios y Texto mediante <code>register_block_type_args<\/code> es una forma eficaz de modificar el comportamiento del bloque din\u00e1micamente. Sin embargo, WordPress proporciona otro m\u00e9todo para modificar la configuraci\u00f3n del bloque: <strong>anular los metadatos del bloque<\/strong> utilizando <code>block_type_metadata<\/code>.<\/p>\n<p>Ambos m\u00e9todos te permiten personalizar los bloques, pero funcionan en distintas fases del proceso de registro de bloques.<\/p>\n<p>Por ejemplo, supongamos que queremos ajustar el <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque P\u00e1rrafo<\/a> (<code>core\/paragraph<\/code>) para que s\u00f3lo admita ajustes de margen y deshabilite el relleno. Una forma de hacerlo es utilizando <code>register_block_type_args<\/code>:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Este m\u00e9todo funciona bien en la mayor\u00eda de los casos, pero como modifica el bloque despu\u00e9s de que ya se haya registrado, a veces puede ser anulado por otros <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-plugin\/\">plugins<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/\">temas<\/a> que modifiquen el mismo bloque m\u00e1s adelante en el proceso.<\/p>\n<p>Un enfoque m\u00e1s estructurado en este caso podr\u00eda ser anular los metadatos del bloque directamente utilizando <code>block_type_metadata<\/code>:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Ninguno de los dos enfoques es intr\u00ednsecamente mejor que el otro \u2014 s\u00f3lo depende de cu\u00e1ndo quieras modificar el bloque y de lo persistente que quieras que sea el cambio.<\/p>\n<h2>Registrar estilos de bloque<\/h2>\n<p>Muchos bloques de WordPress vienen con estilos predefinidos que los usuarios pueden seleccionar en el editor. Un buen ejemplo es el <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Imagen<\/a> (<code>core\/image<\/code>), que incluye un estilo <strong>Redondeado<\/strong> por defecto. Sin embargo, las esquinas redondeadas por defecto suelen ser demasiado extremas, haciendo que la imagen parezca m\u00e1s un \u00f3valo que un elemento con un estilo limpio.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Estilo redondeado predeterminado para el bloque de imagen.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilo Redondeado por defecto.<\/figcaption><\/figure>\n<p>En lugar de ajustar manualmente el radio del borde de cada imagen, un mejor enfoque es personalizar el estilo redondeado para que aplique un radio de esquina m\u00e1s refinado \u2014 quiz\u00e1s a\u00f1adiendo una sutil <a href=\"https:\/\/kinsta.com\/es\/blog\/contorno-texto-css\/\">sombra<\/a> para un aspecto moderno. De esta manera, los usuarios pueden simplemente hacer clic en un bot\u00f3n para aplicar un estilo bien dise\u00f1ado sin necesidad de ajustar manualmente la configuraci\u00f3n cada vez.<\/p>\n<p>Tomemos el estilo <strong>Redondeado<\/strong> del bloque Imagen y personalic\u00e9moslo para que las esquinas queden ligeramente redondeadas en lugar de excesivamente curvadas, y se a\u00f1ada una sutil sombra de caja para darle un aspecto m\u00e1s pulido.<\/p>\n<p>Como el editor de bloques permite registrar y anular el registro de estilos de bloque, podemos eliminar el estilo <strong>Redondeado<\/strong> por defecto y sustituirlo por una versi\u00f3n personalizada.<\/p>\n<p>As\u00ed es como se hace:<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>El c\u00f3digo sustituye el estilo predeterminado, demasiado redondeado, por una versi\u00f3n refinada que aplica <code>border-radius: 20px;<\/code> para esquinas m\u00e1s suaves y <code>box-shadow<\/code> para un realce sutil.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Estilo redondeado refinado con una sutil sombra.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilo redondeado refinado.<\/figcaption><\/figure>\n<h3>Utilizar un archivo CSS externo en lugar de estilos inline<\/h3>\n<p>Aunque el <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/#2-inline-css-vs-external-css-vs-internal-css\">estilo inline<\/a> funciona bien para estilos sencillos, no es ideal para su mantenimiento. Un enfoque mejor es definir los estilos en un archivo CSS externo y ponerlo en cola en su lugar.<\/p>\n<p>Para ello, crea un nuevo archivo CSS, por ejemplo, <code>custom-block-styles.css<\/code>, y a\u00f1\u00e1dele esto:<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, pon en cola el archivo CSS en <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>Ahora, en lugar de utilizar el estilo inline, puedes registrar el estilo sin incrustar el <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> directamente en PHP:<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>De esta forma, puedes modificar los estilos sin tocar PHP.<\/p>\n<h2>Registrar variaciones de bloque<\/h2>\n<p>Las <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\">variaciones de bloque<\/a> te permiten crear versiones predefinidas de un bloque con ajustes personalizados, facilitando a los usuarios la aplicaci\u00f3n de dise\u00f1os coherentes con un solo clic. En lugar de modificar manualmente la configuraci\u00f3n de un bloque cada vez, una variaci\u00f3n te permite insertar un bloque que ya tiene aplicados los atributos, estilos o configuraciones adecuados.<\/p>\n<p>De hecho, algunos bloques del core de WordPress funcionan de este modo. El <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Incrustar<\/a> no es un bloque \u00fanico, sino un conjunto de variaciones para diferentes plataformas como <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> y <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. El <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Fila<\/a> y el <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Pila<\/a> tambi\u00e9n son s\u00f3lo variaciones del <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Grupo<\/a>, cada uno con diferentes configuraciones de dise\u00f1o.<\/p>\n<p>Este enfoque mantiene las cosas modulares, permitiendo a WordPress proporcionar experiencias a medida mientras utiliza una estructura subyacente compartida.<\/p>\n<h3>Crear una variaci\u00f3n del bloque Cita para Testimonios<\/h3>\n<p>Aunque WordPress no tiene un bloque dedicado a los Testimonios, el <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloque Cita<\/a> (<code>core\/quote<\/code>) puede adaptarse para servir a ese prop\u00f3sito. En lugar de hacer que los usuarios a\u00f1adan manualmente una imagen, alineen el texto y le den formato a todo, podemos definir una variaci\u00f3n del bloque de Cita para Testimonios.<\/p>\n<p>Esta variaci\u00f3n incluye autom\u00e1ticamente un bloque Imagen, un bloque Cita y dos bloques P\u00e1rrafo para el nombre de la persona y la empresa. Esto garantiza que todos los testimonios sigan el mismo formato estructurado sin necesidad de ajustes adicionales.<\/p>\n<p>Para registrar una variaci\u00f3n de bloque en WordPress, utilizamos <code>registerBlockVariation()<\/code> en JavaScript. Dado que las variaciones de bloque se gestionan en el lado del cliente, necesitamos poner en cola un archivo JavaScript que registre nuestra variaci\u00f3n personalizada para Testimonios.<\/p>\n<p>Para ello, crea un archivo JavaScript (como <code>custom-block-variations.js<\/code>) que defina la variaci\u00f3n Testimonio (Testimonial) del bloque Cita. Puedes crear este archivo en el directorio <code>assets\/js\/<\/code> de tu tema y a\u00f1adir el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, <code>registerBlockVariation()<\/code> define la variaci\u00f3n Testimonio del bloque Cita, precargando un bloque Imagen, un bloque Cita y dos bloques P\u00e1rrafo para el nombre de la persona y la empresa. El bloque Imagen se centra a 100&#215;100 p\u00edxeles para uniformar las fotos de perfil, mientras que el bloque Cita permanece inalterado como texto del testimonio.<\/p>\n<p>Se aplica una clase personalizada (<code>is-style-testimonial<\/code>) para el estilo, que da al bloque un fondo claro, una sombra sutil y el texto centrado. Se elimina el borde izquierdo por defecto, y la imagen mantiene su relaci\u00f3n de aspecto con esquinas ligeramente redondeadas para un aspecto pulido.<\/p>\n<p>A continuaci\u00f3n, como el archivo JavaScript debe cargarse dentro del editor de bloques, debemos ponerlo en cola en <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p>Esto garantiza que la variaci\u00f3n del bloque Testimonio aparezca dentro del editor de bloques.<\/p>\n<p>Mientras el c\u00f3digo JavaScript garantiza que el bloque tenga un aspecto correcto en el editor, tambi\u00e9n tenemos que aplicar los estilos en el frontend para que los testimonios se muestren correctamente cuando se publiquen. A\u00f1ade el siguiente c\u00f3digo a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>Ahora, cada vez que un usuario inserte un bloque Testimonio, ya incluir\u00e1 los campos de <strong>imagen<\/strong>, <strong>cita<\/strong>, <strong>nombre<\/strong> y <strong>empresa<\/strong>, todos ellos preformateados y con el estilo correcto. Esto elimina la necesidad de realizar ajustes manuales, garantizando que todos los testimonios sigan la misma estructura limpia y profesional.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Variaci\u00f3n del bloque de Testimonio en WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Variaci\u00f3n del bloque Testimonio.<\/figcaption><\/figure>\n<p>En lugar de obligar a los usuarios a crear testimonios desde cero, esta variaci\u00f3n de bloque proporciona un flujo de trabajo optimizado que mejora la creaci\u00f3n de contenidos, al tiempo que mantiene la coherencia del dise\u00f1o del sitio.<\/p>\n<h2>Caso de uso avanzado: Combinar las APIs de Soportes y Estilos para crear botones de marca<\/h2>\n<p>Ahora que sabes lo que puede hacer cada API y c\u00f3mo funciona, \u00bfpor qu\u00e9 no vamos un poco m\u00e1s all\u00e1? En lugar de utilizar la API de Soportes o la API de Estilos por separado, podemos utilizarlas juntas para resolver un \u00fanico problema: mantener la coherencia del dise\u00f1o y ofrecer a los usuarios una forma estructurada de aplicar los estilos adecuados.<\/p>\n<p>Consideremos un escenario del mundo real. Una empresa quiere que todos los botones de su sitio sigan unas estrictas directrices de marca. No quieren que los usuarios elijan colores al azar, cambien el relleno o apliquen tipograf\u00edas extravagantes. Sin embargo, quieren flexibilidad, por lo que los usuarios deben poder elegir entre dos estilos de bot\u00f3n preaprobados:<\/p>\n<ol start=\"1\">\n<li><strong>Bot\u00f3n<\/strong> <strong>principal<\/strong> \u2014 El bot\u00f3n principal de llamada a la acci\u00f3n, con un fondo s\u00f3lido y un estilo llamativo.<\/li>\n<li><strong>Bot\u00f3n<\/strong> <strong>secundario<\/strong> \u2014 Un bot\u00f3n m\u00e1s sutil y perfilado que suele utilizarse para acciones secundarias.<\/li>\n<\/ol>\n<p>Para conseguirlo, necesitamos<\/p>\n<ul>\n<li>Utilizar la API de Estilos para definir los dos estilos de bot\u00f3n.<\/li>\n<li>Utilizar la API de Soportes para eliminar los ajustes innecesarios, asegur\u00e1ndonos de que los usuarios no anulan manualmente la marca cambiando los colores, el espaciado o la tipograf\u00eda.<\/li>\n<\/ul>\n<p>Combinando ambas APIs, permitimos opciones estructuradas a la vez que evitamos que los usuarios rompan el sistema de dise\u00f1o.<\/p>\n<h3>Paso 1: Definir estilos de botones personalizados<\/h3>\n<p>Empieza a\u00f1adiendo el siguiente c\u00f3digo al archivo <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>Ahora, cuando los usuarios inserten un bloque Bot\u00f3n, ver\u00e1n <strong>Bot\u00f3n principal<\/strong> y <strong>Bot\u00f3n secundario<\/strong> como opciones de estilo.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Estilos de botones personalizados: Principal y Secundario.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilos de bot\u00f3n personalizados.<\/figcaption><\/figure>\n<p>El bot\u00f3n primario tiene un fondo gris oscuro s\u00f3lido, mientras que el bot\u00f3n secundario tiene un fondo transparente con un borde. Ambos botones tienen un relleno, un radio de borde y un estilo de fuente coherentes, lo que garantiza un aspecto profesional en todo el sitio.<\/p>\n<h3>Paso 2: Restringir la personalizaci\u00f3n de los botones<\/h3>\n<p>Aunque ahora los estilos de los botones est\u00e1n predefinidos, los usuarios a\u00fan pueden anularlos manualmente mediante la configuraci\u00f3n del editor de bloques de WordPress. Si cambian los colores, el relleno o la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipografia-theme-json\/\">tipograf\u00eda<\/a>, es posible que los botones ya no se ajusten a las directrices de la marca.<\/p>\n<p>Podemos utilizar la API de Soportes para desactivar estas opciones de personalizaci\u00f3n, evitando que los usuarios realicen cambios involuntarios. A\u00f1ade esto a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Con esto establecido:<\/p>\n<ul>\n<li>Los usuarios no pueden cambiar los colores de los botones, por lo que todos ellos deben adherirse al esquema de colores de la marca.<\/li>\n<li>Se eliminan los controles de tipograf\u00eda, manteniendo la coherencia del formato del texto.<\/li>\n<li>Se desactivan los ajustes de espaciado, impidiendo que los usuarios modifiquen el relleno y los m\u00e1rgenes.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Bot\u00f3n principal con estilo en WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bot\u00f3n principal con estilo.<\/figcaption><\/figure>\n<p>Ahora, en lugar de dejar que los usuarios creen una mezcla aleatoria de estilos de bot\u00f3n, simplemente elegir\u00e1n entre los estilos primario y secundario, manteniendo el dise\u00f1o profesional y estructurado.<\/p>\n<h2>Resumen<\/h2>\n<p>Solo hemos ara\u00f1ado la superficie de lo que es posible con la personalizaci\u00f3n de bloques de WordPress. WordPress proporciona una amplia colecci\u00f3n de APIs que facilitan la ampliaci\u00f3n y personalizaci\u00f3n de bloques, lo que permite a los desarrolladores adaptar la experiencia del editor a la vez que mantienen las cosas estructuradas y f\u00e1ciles de usar.<\/p>\n<p>Si te tomas en serio dominar la personalizaci\u00f3n de bloques, hay mucho m\u00e1s que explorar. Consulta la <a href=\"https:\/\/developer.wordpress.org\/\">documentaci\u00f3n oficial para desarrolladores de WordPress<\/a>, asiste a <a href=\"https:\/\/kinsta.com\/es\/blog\/guia-wordcamp\/\">WordCamps y meetups<\/a>, y sigue aprendiendo de grandes recursos como el <a href=\"https:\/\/kinsta.com\/es\/blog\/\">blog de Kinsta<\/a>, donde analizamos regularmente conceptos avanzados de WordPress.<\/p>\n<p>Por supuesto, contar con un proveedor de alojamiento s\u00f3lido hace que experimentar con estos cambios sea f\u00e1cil. Tanto si est\u00e1s probando nuevas modificaciones de bloques como si gestionas un sitio de mucho tr\u00e1fico, un alojamiento fiable garantiza un rendimiento fluido y una f\u00e1cil escalabilidad. En Kinsta, hemos construido nuestra plataforma para manejar exactamente eso. De hecho, recientemente <a href=\"https:\/\/kinsta.com\/es\/blog\/premios-g2\/\">G2 nos ha otorgado el primer puesto en Alojamiento para WordPress<\/a>, gracias a las <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">m\u00e1s de 930 reviews de nuestros clientes<\/a>.<\/p>\n<p>Esto habla por s\u00ed solo: Puedes <a href=\"https:\/\/kinsta.com\/es\/precios\/\">confiar en nosotros para potenciar tu experiencia WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En 2018, WordPress introdujo el editor Gutenberg con la versi\u00f3n 5.0, aportando una nueva forma de construir p\u00e1ginas y entradas mediante \u00abbloques\u00bb. Al principio, estos bloques &#8230;<\/p>\n","protected":false},"author":287,"featured_media":78764,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345],"class_list":["post-78763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo extender los bloques del core de WordPress con Blocks API<\/title>\n<meta name=\"description\" content=\"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo extender los bloques del core de WordPress con Blocks API\" \/>\n<meta property=\"og:description\" content=\"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-03T11:46:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T08:48:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo extender los bloques del core de WordPress con Blocks API\",\"datePublished\":\"2025-04-03T11:46:05+00:00\",\"dateModified\":\"2025-04-16T08:48:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\"},\"wordCount\":2620,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\",\"name\":\"C\u00f3mo extender los bloques del core de WordPress con Blocks API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-03T11:46:05+00:00\",\"dateModified\":\"2025-04-16T08:48:57+00:00\",\"description\":\"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo extender los bloques del core de WordPress con Blocks API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo extender los bloques del core de WordPress con Blocks API","description":"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo extender los bloques del core de WordPress con Blocks API","og_description":"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.","og_url":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2025-04-03T11:46:05+00:00","article_modified_time":"2025-04-16T08:48:57+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo extender los bloques del core de WordPress con Blocks API","datePublished":"2025-04-03T11:46:05+00:00","dateModified":"2025-04-16T08:48:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/"},"wordCount":2620,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/","url":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/","name":"C\u00f3mo extender los bloques del core de WordPress con Blocks API","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-03T11:46:05+00:00","dateModified":"2025-04-16T08:48:57+00:00","description":"Aprende a extender los bloques del core de WordPress con facilidad utilizando Blocks API para personalizar la configuraci\u00f3n, los estilos y la funcionalidad.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/extender-bloques-del-core-de-wp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo extender los bloques del core de WordPress con Blocks API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/78763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=78763"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/78763\/revisions"}],"predecessor-version":[{"id":78898,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/78763\/revisions\/78898"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/78763\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/78764"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=78763"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=78763"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=78763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}