¿Realmente necesitas desarrollar �un bloque nuevo?

JuanMa Garrido

Veamos algunas alternativas

JuanMa Garrido

WordPress & Javascript Developer

​

Developer Relations en

En WordPress 2025... TODO son bloques

• El editor de bloques es el núcleo de la experiencia.
• No solo contenido: diseño, plantillas, patrones... todo.

​

Intro

Intro

Muchos bloques listos para usar

Intro

…pero también puedo crear

mis propios bloques

https://developer.wordpress.org/block-editor/getting-started/tutorial/

Intro

¿Necesito entonces desarrollar un bloque nuevo desde cero…

​

​

A veces sí, pero muchas veces

💡 hay alternativas más rápidas y sostenibles

…si el bloque que necesito no existe?

Intro

Desarrollo de bloques

Intro

APIs de desarrollo sobre bloques registrados

• Block Styles
• Block Variations
• Filters and Hooks (Server)
• Hooks (Block Editor)
• Block Bindings
• Block Patterns

​

Block Styles

Los Block Styles permiten crear estilos alternativos para bloques individuales.

​

​

​

https://developer.wordpress.org/themes/features/block-style-variations/

Block Styles

Se registran con register_block_style (PHP) o wp.blocks.registerBlockStyle (JS)

Pueden ser customizados via theme.json

​

​

Block Styles

Block Styles

Block Variations

La “Block Variations API” nos permite definir multiples versiones (variations) de un bloque. Cuando insertamos una “block variation”, aplicamos de golpe una serie de atributos y/o inner blocks definidos para esa variación

​

​

​

https://developer.wordpress.org/themes/features/block-style-variations/

Block Variations

Se añaden a la metadata de un block (propiedad variations de block.json)

​

Se registran con wp.blocks.registerBlockVariation (JS)

​

Se pueden registrar via PHP con el filtro get_block_type_variations

Block Variations

Block Variations

Block Variations

Filtros PHP

​

A través de filtros PHP (addFilter) podemos interceptar procesos del servidor relacionados con los bloques, como su registro o su salida renderizada, para customizar bloques existentes.

​

​

​

https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/

Filtra el contenido de TODOS los bloques registrados.

Es posible que necesitemos agregar condiciones internas para aplicar nuestra lógica sólo a algunos bloques.

Se puede usar para:

• Filtrar la salida renderizada de varios bloques
• Cargar archivos JS o estilos adicionales para bloques específicos

​

​

​

render_block

https://developer.wordpress.org/reference/functions/render_block/

Filtros PHP

render_block_{$this->name}

Filtra el contenido de un bloque específico.

Es posible que necesitemos agregar condiciones internas para aplicar nuestra lógica sólo a algunos bloques de ese tipo.

Se puede usar para:

• Filtrar la salida renderizada de un bloque específico
• Cargar archivos JS o estilos adicionales para un bloque específico

https://developer.wordpress.org/reference/hooks/render_block_this-name/

Filtros PHP

Filtros PHP

Filtra los argumentos proporcionados (metadatos y otros) para registrar un tipo de bloque.

Se puede usar para:

• Modificar o agregar cualquier metadata del block.json (variaciones, atributos, supports…) o cualquier otro argumento (como render_callback) antes del registro (con register_block_type)

Otros filtros para filtrar (sólo) metadatos antes del registro son: block_type_metadata y block_type_metadata_settings

register_block_type_args

https://developer.wordpress.org/reference/hooks/register_block_type_args/

Filtros PHP

Filtros PHP

Filtros JS

​

A través de filtros JS (wp.hooks.addFilter) podemos customizar el comportamiento de bloques existentes en el Editor de Bloques.

​

​

​

​

​

​

​

​

​

​

https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/

Filtra la configuración del bloque al registrarlo en el cliente con JavaScript.

Es posible que necesitemos agregar condiciones internas para aplicar nuestra lógica sólo a algunos bloques.

Se puede usar para:

• Añadir atributos (o cualquier otro metadato) al bloque antes de ser registrado en el Editor de Bloques

​

​

​

blocks.registerBlockType

Filtros JS

Filtros JS

Modifica el componente de edición del bloque. Recibe el componente original BlockEdit del bloque y devuelve un nuevo componente envuelto (Higher order component).

Es posible que necesitemos agregar condiciones internas para aplicar nuestra lógica sólo a algunos bloques.

Se puede usar para:

• Añadir controles de bloque (BlockControls o InspectorControls)
• Pasar props especificas al componente BlockEdit

​

​

​

editor.BlockEdit

Filtros JS

Filtros JS

Modifica el resultado de la función save de un bloque

Se puede usar para reemplazar o extender el marcado del bloque antes de ser guardado en la BD.

​

​

​

blocks.getSaveElement

Filtros JS

Filtros JS

A través de los Block Bindings podemos “vincular” datos dinámicos a los atributos del bloque, que quedan reflejados en el marcado HTML final que se genera para el front-end.

Block Bindings

​

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-bindings/

Block Bindings

Block Bindings

Podemos utilizar fuentes de datos como “custom fields” u otras que definamos a medida

​

Podemos registrar fuentes de datos en el servidor con register_block_bindings_source

�Podemos registrar fuentes de datos en el cliente (Editor de Bloques) con registerBlockBindingsSource y hacer los valores editables

​

​

Los Block Bindings nos permiten proporcionar una o varias fuentes dinámicas para el valor de un atributo de un bloque.

Block Bindings

Un patrón de bloques (Block Pattern) es un grupo de bloques, preconfigurados y presentados al usuario para ser reutilizados.

Block Patterns

​

https://developer.wordpress.org/themes/patterns/introduction-to-patterns/

Podemos registrar patrones desde themes (patterns folder) o desde plugins (register_block_pattern)

​

Podemos insertar patrones en templates (Site Editor) o en nuestro contenido (Post Editor)

​

​

​

Block Patterns

Los componentes de un patrón se pueden bloquear (Block Locking API) para que no puedan ser movidos o borrados.

Block Patterns

Podemos controlar qué bloques se pueden insertar en el patrón (allowedBlocks attribute - no UI)

​

Block Patterns

Podemos limitar que sólo se puedan hacer cambios al contenido (templateLock: content attribute - no UI)

​

Block Patterns

Block Patterns

Podemos crear patrones sincronizados (antes “bloques reutilizables”) donde los cambios en el patrón original son aplicados a todas las instancias del patrón

​

En estos patrones sincronizados también podemos definir sobreescrituras (overrides) para poder customizar valores en la instancia sin afectar al patrón original

​

Block Patterns

Block Patterns

Block Patterns

https://github.com/juanma-wp/wc-logrono-2025-talk

Ejemplos

Hand Drawn: versión de estilo de core/quote que aplica un borde como escrito a a mano

Ejemplos: Hand Drawn

👉 register_block_style("core/quote", array(...) ); → Creamos una variación de estilo del bloque "core/quote" llamada “Hand Drawn”

👉 Le pasamos los estilos inline

👉 Al registrarlo en el servidor se podría tunear desde el theme via theme.json

Ejemplos: Hand Drawn

​

Ejemplos: Hand Drawn

​

Quote API Editor: versión ampliada de core/quote que permite cargar citas de autores (de una API externa) desde el Editor de Bloques

Ejemplos: Quote API Editor

Ejemplos: Quote API Editor

👉 enqueue_block_editor_assets → Cargamos el JS en el editor (wp_enqueue_script) con este filtro

👉 addFilter(blocks.registerBlockType,...) → Ampliamos los atributos de "core/quote" para incluir un atributo namespace (que utilizaremos para distinguir variaciones)

👉 registerBlockVariation("core/quote", {...}); → Creamos una variación del bloque "core/quote" llamada “Quote API Editor” con el atributo namespace = "quote-api-editor"

​

Ejemplos: Quote API Editor

Ejemplos: Quote API Editor

Ejemplos: Quote API Editor

👉 addFilter(editor.BlockEdit,...) → Ampliamos el Edit component de nuestra variación para:�- incluir paneles de control exclusivos�- añadir la lógica de obtener datos de la API �- insertar la cita obtenida en nuestra variación del bloque

👉 Utilizamos nuestro atributo namespace para filtrar nuestra variación

Ejemplos: Quote API Editor

Ejemplos: Quote API Editor

Ejemplos: Quote API Editor

Quote API Frontend: versión ampliada de core/quote que permite cargar citas random en el Frontend (de una API externa) en base a unos tags

Ejemplos: Quote API Frontend

👉 enqueue_block_editor_assets → Cargamos el JS en el editor (wp_enqueue_script) con este filtro

👉 addFilter(blocks.registerBlockType,...) → Ampliamos los atributos de "core/quote" para incluir un atributo namespace (que utilizaremos para distinguir variaciones) y otro atributo tags

👉 registerBlockVariation("core/quote", {...}); → Creamos una variación del bloque "core/quote" llamada “Quote API Frontend” con el atributo namespace = "quote-api-frontend"

​

Ejemplos: Quote API Frontend

Ejemplos: Quote API Frontend

Ejemplos: Quote API Frontend

👉 addFilter(editor.BlockEdit,...) → Ampliamos el Edit component de nuestra variación para:�- incluir paneles de control exclusivos�- añadir los tags como atributos del bloque

👉 render_block_core/quote → Filtramos el renderizado para el frontend para que incluya nuestra lógica de obtener las quotes desde la API y devolver el marcado correcto

​

Ejemplos: Quote API Frontend

Ejemplos: Quote API Frontend

Interactive Video Player: versión ampliada de un patrón que permite reproducir un video al pulsar un botón

👉 register_block_pattern → Registramos nuestro patrón al que le añadimos la clase interactive-video al bloque container

👉 render_block_core/group → Filtramos el renderizado para el frontend de nuestro patrón

• WP_HTML_Tag_Processor → añadimos las directivas de la Interactivity API�
• wp_enqueue_script_module → Cargamos el JS (como módulo) en el frontend con la lógica de la Interactivity API

​

��

​

Ejemplos: Interactive Video Player

¡Gracias!

Hago streams sobre desarrollo WordPress (sobre todo de bloques) los viernes a las 17:00 (hora española)