Si eres desarrollador de WordPress desde hace tiempo, es probable que te haya pasado esto más de una vez: tienes una idea clara para tu sitio o proyecto, pruebas a implementar una funcionalidad desde el editor de bloques, necesitas un bloque con una funcionalidad determinada… y nada de lo que hay te sirve. “Esto no existe”, piensas. Ni bloques core, ni bloques disponibles a través de plugins existentes Y acto seguido, decides crear un nuevo bloque desde cero.

Es una reacción natural. En un entorno tan flexible como WordPress, el instinto suele ser: si no está hecho, lo hago yo. Pero ¿hay una manera más efectiva de gestionar las funcionalidades que necesitamos? ¿podemos aprovechar los bloques existentes y extenderlos para adaptarlos a nuestras necesidades?

Este artículo es una guía práctica de cómo puedes aprovechas las APIs disponibles en WordPress para transformar completamente la experiencia de edición, ampliando la funcionalidad y apariencia de los bloques registrados en tu instalación WordPress.

Tabla de Contenidos

  1. Tabla de Contenidos
  2. Variaciones de Estilos de Bloque
  3. Variaciones de Bloque
  4. Filtros en PHP
  5. Filtros en JS
  6. Block Bindings
  7. Block Patterns
  8. Conclusión

Variaciones de Estilos de Bloque

Una apariencia distinta para el mismo bloque

A veces, lo único que necesitamos es cambiar cómo luce un bloque. El clásico ejemplo: el bloque de cita. ¿Y si en lugar del estilo por defecto, queremos que se vea con un borde dibujado a mano?

Ahí es donde entran los Variaciones de Estilo de Bloque (aka Block Styles), pequeñas variaciones visuales que pueden registrarse tanto en PHP como en JavaScript. No alteran el contenido ni la estructura, pero ofrecen una experiencia visual alternativa directamente desde el editor.

Ejemplo en PHP:

register_block_style(
    'core/quote',
    array(
        'name'         => 'hand-drawn',
        'label'        => __( 'Hand Drawn', 'mytheme' ),
        'inline_style' => '.is-style-hand-drawn { border: 3px dashed #ccc; padding: 1em; }',
    )
);

Esta pequeña función añade un botón nuevo en la barra de estilos del bloque, que aplica una clase CSS específica. Fácil, visual, mantenible.

Variaciones de Bloque

Diferentes sabores para un mismo bloque

Si los Estilos de bloque cambian cómo se ve un bloque, las Variaciones de bloque cambian cómo se comporta desde el principio. Permiten predefinir atributos, contenido inicial o estructura interna de un bloque, y presentarlo como si fuera un bloque nuevo en el inserter.

Piensa en el bloque de “Espaciador”. Puedes tener una variación que siempre sea “extra grande”.

Ejemplo en JS:

wp.blocks.registerBlockVariation( 'core/spacer', {
    name: 'spacer-xl',
    title: 'Espaciador XL',
    attributes: {
        height: 180,
    },
    isActive: ( attributes ) => attributes.height === 180,
} );

Es ideal para sistemas de diseño, donde necesitas ofrecer componentes preconfigurados sin duplicar bloques.

Además las variaciones de bloques nos permiten crear bloques nuevos a partir de otros ya existentes sobre los que personalizar su comportamiento según nuestras necesidades.

Filtros en PHP

Personalizando el renderizado sin duplicar lógica

Hay veces en que necesitamos que un bloque funcione distinto según un contexto determinado. Por ejemplo, mostrar contenido adicional solo a usuarios conectados, o alterar el HTML de salida en función de un custom field.

Aquí es donde los filtros PHP como render_block y register_block_type_args destacan. Son herramientas poderosas que permiten modificar la lógica del servidor sin reescribir todo un bloque.

Ejemplo usando render_block_core/quote:

add_filter( 'render_block_core/quote', function( $content ) {
    if ( is_user_logged_in() ) {
        return '<div class="admin-only">' . $content . '</div>';
    }
    return $content;
} );

Ejemplo usando register_block_type_args:

add_filter( 'register_block_type_args', function( $args, $name ) {
    if ( $name === 'core/image' ) {
        $args['supports']['duotone'] = true;
    }
    return $args;
}, 10, 2 );

Estos filtros nos permiten cosas como modificar el renderizado dinamico de un bloque antes de que sea enviado al navegador o modificar los metadatos de un bloque antes de su registro en el servidor.

Filtros en JS

Modificar la experiencia del editor de forma precisa

Por cada proceso que ocurre en el servidor, hay uno similar en el editor. Los filtros JavaScript permiten interceptar y modificar lo que ocurre en el cliente: desde el registro del bloque (blocks.registerBlockType) hasta la edición (editor.BlockEdit) o el guardado (blocks.getSaveElement).

Esto permite, por ejemplo, añadir un panel personalizado al sidebar de edición, o incluir atributos extra que el usuario puede controlar desde la interfaz.

Ejemplo con editor.BlockEdit:

addFilter(
    'editor.BlockEdit',
    'myplugin/quote-controls',
    ( BlockEdit ) => ( props ) => {
        if ( props.name !== 'core/quote' ) return <BlockEdit { ...props } />;
        return (
            <>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody title="Configuración adicional">
                        <p>Aquí puedes integrar una API externa o mostrar opciones.</p>
                    </PanelBody>
                </InspectorControls>
            </>
        );
    }
);

Estos filtros son esenciales cuando quieres mantener la lógica del bloque original, pero mejorar su comportamiento en el editor.

Block Bindings

Conectar los bloques a datos dinámicos… sin código personalizado

¿Y si pudieras mostrar el contenido de un campo personalizado directamente en un bloque de párrafo, sin usar código PHP, ni shortcodes, ni bloques dinámicos personalizados?

Eso es exactamente lo que permiten los Block Bindings.

Si registramos un custom field como este:

function register_custom_meta() {
    register_post_meta('post', '_custom_subtitle', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        },
    ]);
}
add_action('init', 'register_custom_meta');

Podemos conectarlo directarlo con el contenido de un bloque de esta manera:

<!-- wp:paragraph {
    "metadata": {
        "bindings": {
            "content": {
                "source": "post-meta",
                "key": "_custom_subtitle"
            }
        }
    }
} -->
<p><em>Este contenido será reemplazado por el valor del post meta.</em></p>
<!-- /wp:paragraph -->

Y lo mejor: ya puedes preparar tu bloque para que se pueda editar el contenido (custom field u otra fuente) desde el propio bloque si el binding lo permite.

Block Patterns

Plantillas reutilizables, sincronizadas y controladas

Los patrones de bloques no son nuevos, pero han madurado. Mucho.

Hoy puedes registrar block patterns que agrupan múltiples bloques con estilos, estructura y contenido prediseñado. Y aún más: puedes sincronizarlos (lo que antes llamábamos “bloques reutilizables”) y permitir overrides, es decir, partes que pueden editarse sin romper la sincronización.

Los synced patterns y pattern overrides están disponibles desde la UI del editor de sitio, y permiten que lo mejor del diseño global y la personalización individual convivan sin conflictos.

Conclusión

Antes de crear un nuevo bloque… pregúntate:

  • ¿Puedo resolver esto con un estilo adicional?
  • ¿Una variación preconfigurada sería suficiente?
  • ¿Podría interceptar el renderizado o la edición?
  • ¿Sería mejor conectar el bloque a datos dinámicos con un block binding?
  • ¿Un patrón sincronizado cubriría el caso?
  • ¿Puedo combinar alguna de las casuísticas anteriores para cubrir mi necesidad?

Si la respuesta es “sí” a cualquiera de esas preguntas, probablemente no necesitas desarrollar un nuevo bloque desde cero. Solo necesitas construir sobre lo que WordPress ya te ofrece.

Hace unas semanas di una charla sobre este tema en la WordCamp Logroño 2025 que te puede servir para ampliar información sobre este tema. Aquí tienes los slides de la charla y el repositorio con ejemplos mencionados en la charla.

Recursos recomendados