¿Cómo personalizar bloques de Gutenberg desde PHP?
Personalizar bloques de Gutenberg para trabajar con objetos, componentes, bloques o cualquier otro concepto similar que haga referencia a la encapsulación y reutilización es algo algo básico en programación y desarrollo web.
WordPress dió un gran paso en este sentido al introducir los bloques de Gutenberg y pasarse a JavaScript como lenguaje base, pero una cosa que tienen los bloques de Gutenberg, para mí con más puntos negativos que positivos, es que el HTML de cada bloque queda almacenado en la base de datos.
¿Y por qué es un problema?
Pongamos como ejemplo una galería de imágenes. ¿Cuántas veces ha cambiado el marcado recomendado para galerías a lo largo de los años? Muchas, ¿verdad? Si almacenamos el HTML en la base de datos y luego cambian las recomendaciones …… ¿qué hacemos con todas las galerías ya creadas y almacenadas?
Encontrarás cientos de tutoriales para personalizar los bloques de Gutenberg con JavaScript, pero esto personaliza los bloques que vayas creando nuevos. Los antiguos se quedarán como están.
La solución es, además de personalizar el template en JavaScript (si quieres), hacerlo también desde PHP utilizando el filtro render_block.
El filtro render_block para personalizar bloques de Gutenberg
El filtro render_block se utiliza, como su nombre indica, para filtrar el renderizado de un bloque de Gutenberg.
La función callback del filtro recibe dos parámetros. El primero, $block_content, es un string con el contenido actual del bloque. el segundo, $block, es un array con la información completa del bloque, incluyendo el nombre y atributos.
Por ejemplo, el nombre del bloque correspondiente a las galerías de imágenes es core/gallery, de modo que $block['blockName'] es igual core/gallery y $block['attrs']['ids'] contiene los IDs de las imágenes:
add_filter( 'render_block', 'psal_photoswipe_block', 10, 2 );
function psal_photoswipe_block( $block_content, $block ) {
if( $block['blockName'] == 'core/gallery' ) {
if ( ! empty( $block['attrs']['ids'] ) ) {
// Personalizar aquí
}
return $block_content;
}
hay mas tutos de más cosas en la sección de tutoriales
Acerca del Autor
