Crear un plugin de patrones para Gutenberg

Gutenberg está evolucionando mucho y muy rápido. En cada versión añaden opciones nuevas, nuevos parámetros e incluso bloques. Aún echamos de menos algunos bloques que vendrán con el tiempo y que están en desarrollo o incluso en testing, como un bloque para mostrar cualquier tipo de contenido (custom post types).

Algo que si significó una pequeña revolución fueron los patrones. Desde la versión 7.8 de Gutenberg podemos crear nuestros propios patrones con la función register_pattern.

¿Porqué son los patrones algo casi esencial?

Una de las cosas que a mi parecer más han cambiado la manera de pensar y planificar proyectos de diseño y desarrollo han sido los patrones o patterns.

Gutenberg tiene limitaciones. Me refiero a que los bloques que añadimos se ven de acorde al theme que tengamos instalado. El ejemplo más sencillo es el párrafo. Un bloque de párrafo se verá distinto según el theme que tengamos activo.

Tipografía, tamaño de dicha tipografía, espaciado de línea, son cosas que «dictamina» el CSS del theme. Alguna las podemos variar desde Gutenberg pero otras no.

¿Qué diferencia hay entre un patrón y un bloque reutilizable?

Pues son bastante diferentes. Basicamente los dos son «piezas» ( o fragmentos) de contenido que podemos reutilizar en la web.

Hay dos diferencias, que marcan para que sirve cada cosa. La primera es que el patrón es un grupo o composición de bloques mientras que el bloque reutilizable es un sólo bloque. Esto es un poco ambiguo, porque en el caso de el bloque Media and Text, podemos crear uno reutilizable con varios bloques dentro de este.

La segunda y principal es que el patrón es editable mientras que el reutilizable se mantendrá igual (contenido incluido) como el bloque fuente.

Pasemos a diseñar y/oplanificar nuestro patrón.

Diseñando el patrón

Aquí entra en juego el CSS del theme y como preparemos ese CSS para adaptar un diseño. Bordes, esquinas redondeadas, columnas con cajas decoradas. Todo ello se puede crear añadiendo algunas clases y jugando con los bloques.

La parte negativa es que normalmente no podemos dejar en manos de un cliente el que añada aquí o allá las clases necesarias para que los bloques adopten esos estilos.

Por ejemplo, veamos la captura.

Estos bloques forman parte de un proyecto para una clienta. Son cajas informativas acerca de los servicios de la empresa.

Es complicado dado que cada borde inferior verde es de un tono. Yo lo he solucionado con un bloque de columnas, y en cada columna un bloque de grupo con título y párrafo en su interior.

Cada bloque de grupo, además de color de fondo, tiene una clase distinta para aportar ese borde inferior verde. Complicado para dejarlo de mano de casi cualquier cliente.

Aquí es donde el uso de un patrón es perfecto por que podremos usar ese conjunto de bloques en más páginas o posts de la web y no implica que nadie lo tenga que maquetar.

Creando el patrón

Para crear el patrón lo primero será crear la composición en el editor de bloques. Para este artículo, voy a crear una composición sencilla que podremos usar en cualquier web.

Primero añadiré un bloque de columnas con una sóla columna al 70%.

Lo siguiente para reforzar el mensaje, una imagen dentro de un bloque Cover.

Justo debajo de ese he añadido un bloque de dos columnas con un parrado en cada una de ellas para el contenido.

Añadidos los bloques y creada la composición deseada, sólo nos queda pasar a modo Editor de Código para copiar todo el HTML crudo. Que es con lo que vamos a crear nuestro patrón de Gutenberg.

Este código HTML lo tenemos que convertir en texto legible. Para ello yo he usado la herramienta OnlineStringTools. Simplemente añadimos el código HTML en la primera caja, hacemos clic en Escape y copiamos en resultado de la segunda caja, el cual usaremos para crear nuestro patrón.

register_block_pattern(
            'lcm-patterns/intro-image-two-columns',
            array(
                'title' => __('Intro paragraph with cover image and paragraphs', 'lcm_block_patterns'),
                'description' => _x( 'A two columns block with paragraphs lead with an intro and a cover image.', 'Block pattern description', 'lcm_block_patterns' ),
                'categories' => array( 'text' ),
                'keywords' => array( 'text', 'column', 'columns', 'cover', 'image'),
                'content' => "<!-- wp:spacer -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"70%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:70%\"><!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-large-font-size\">Sin duda alguna, la mejor hamburguesa vegana de Vienna. Hecha con ingredientes locales y alternativas según la temporada.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:cover {\"url\":\"https://luiscolome.com/wp-content/uploads/vegan-burger.jpg\",\"id\":4733,\"dimRatio\":40,\"overlayColor\":\"medium-gray\",\"minHeight\":200,\"minHeightUnit\":\"px\"} -->\n<div class=\"wp-block-cover has-background-dim-40 has-medium-gray-background-color has-background-dim\" style=\"background-image:url(https://luiscolome.com/wp-content/uploads/vegan-burger.jpg);min-height:200px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel fermentum ex. Fusce in leo sit amet est elementum sollicitudin quis quis dui. Aliquam suscipit sollicitudin nibh vitae molestie. </p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Nulla sem metus, mollis viverra nulla sit amet, accumsan tempor nibh. Mauris pretium mauris sollicitudin tincidunt consequat. Nunc molestie convallis diam, porta posuere lacus ullamcorper vitae.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
            )
        );

Una pequeña explicación de a que corresponde cada argumento de ese array:

• Title: El título que aparecerá al buscar en la lista de patrones en Gutenberg.
• Description: Una descripción del mismo.
• Categories: La categoría donde se mostrará nuestro patrón.
• Keywords: Las palabras clave para las que se mostrará el pastrón cuando alguien haga una búsqueda.
• Content: Es la clave. El código HTML que hemos transformado anteriormente y que es el contenido que da forma al patrón de bloques.

Registrando una categoría de patrones adicional

Vamos a ir un paso más allá y suponer que en este plugin tendremos varios patrones, con lo que crearemos nuestra propia categoría para agruparlos todos.

Para ello tenemos una sencilla función:

/**
 * Register a pattern category
 * 
 */
function lcm_register_block_categories() {
    if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
        register_block_pattern_category(
            'custom-category',
            array( 'label' => _x( 'Custom Category', 'Block pattern category', 'lcm_block_patterns' ) )
        );
    }
}
add_action( 'init', 'lcm_register_block_categories' );

Creando un sencillo plugin con los patrones para Gutenberg

Empaquetemos todo esto en un plugin.

Conclusiones

Hemos creado de manera sencilla un plugin que podemos reutilizar las veces que creamos necesarias para nuestros clientes.

Por favor, descarga el plugin, cambia los nombres, edítalo y úsalo en tus proyectos.

Para cualquier duda, déjame un comentario abajo.

Feliz día!