Cómo crear patrones de bloques para Gutenberg

Por , actualizado en

Con la liberación de WordPress 5.5 al fin llegó una de las característica que yo y muchos más – casi todos ellos con opiniones de peso – hemos puesto como lo mejor que ha llegado a WordPress en años recientes; así es, hablo de los patrones de bloques, los cuales no dudes pronto inundarán tu instalación, porque seguramente saldrán decenas de colecciones por todos lados, de todos colores y sabores. Y la razón de esto es muy sencilla: es fácil hacerlos. ¿Qué tan fácil? bueno, lo verás en este artículo, donde te muestro como hacer tu primer patrón de bloques. Verás que tienes todo lo necesario a la mano, y no necesitas de conocimiento de algún lenguaje o herramienta que nunca has usado.

Pues bien, para hacer lo que aquí te muestro necesitas WordPress 5.5 que está recien salido del horno, y una forma de añadir código personalizado a tu WordPress. Para este artículo usaré Code Snippets, un plugin conocido ampliamente, aunque es trivial implementarlo en otras maneras como un plugin o bien en el functions.php de tu instalación. Vamos a empezar.

Paso #1: crea tus bloques

El primer paso es simple: ve al editor y usa los bloques para crear algo; para estar en la misma sintonía, vamos a crear una sección que esté compuesta de un encabezado nivel 2, otro debajo nivel 3, y dos columnas; la columna de la izquierda contiene una imagen y la de la derecha contiene un párrafo; agrupa todos los bloques y aplica un degradado. En conjunto debe tener algo como esto:

Muestra un grupo de bloques diseñado en el editor

Recuerda que no tiene que ser lo mismo, sólo lo pongo por referencia, pero tu puedes hacer lo que quieras con los bloques que tengas. Cuando hayas terminado, presiona el botón que tiene tres puntos ubicado en la parte superior derecha del editor (el botón Más herramientas y opciones) y haz clic en Editor de código o bien presiona Ctrl + Shift + Alt + M para pasarte a vista de código; cuando lo hagas verás un bloque de texto con símbolos y demás que quizás te parezcan extraños; eso que ves es tu publicación en el “dialecto” de Gutenberg, una mezcla de HTML con comentarios con formato especial. Ahora mismo no importa que es o cuales son sus propiedades, lo que necesitamos es copiarlo porque nos hará falta luego:

Muestra la vista de código del editor Gutenberg

Para copiar todo el código, en el mismo menú de Más herramientas y opciones haz clic en la opción Copiar todo el contenido, lo cual hará que se copie el código de tu publicación en el portapapeles; aprovecha para pegarla en un bloc de notas o algo similar para tenerla a la mano.

Paso #2: registra tu patrón de bloques en Gutenberg

register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( '<Título de mi patrón>', 'my-plugin' ),
        'description' => _x( '<Descripción de mi patrón>.', 'Descripción de patrón de bloques', 'my-plugin' ),
        'content'     => '<contenido>',
    )
);

Ahora necesitamos ensuciarnos un poquitín las manos; revisando la documentación del editor de bloques, nos encontramos que para registrar un nuevo patrón de bloques en el editor es necesario usar la función register_block_pattern(), la cual tiene varios parámetros pero no nos meteremos a fondo en todos ellos, pues la finalidad es hacer de esto un proceso sencillo y quizás hasta mecánico. La forma en que usaremos para register_block_pattern() será como sigue: las propiedades title y content son obligatorias, pero la documentación aconseja que igual se llene una propiedad description. Content es el código HTML del patrón de bloques, es decir, el código que copiamos hace un momento desde el editor. Ahora necesitamos un lugar donde poner nuestro código para registrar el patrón de bloques que diseñamos antes. Para ello echaremos guante de Code Snippets, el cual ya deberías tener instalado a estas alturas.

Registrando el patrón de bloque con Code Snippets

En el menú de tu escritorio ve a Fragmentos de código > Añadir nuevo, lo que nos mostrará el editor para añadir un fragmento de código, y haremos lo siguiente:

  1. Debajo de donde dice “Añadir un nuevo fragmento de código” llena el campo con un nombre significativo para tu fragmento de código, y digo significativo porque es común tener varios o muchos y hace falta indentificarlos visualmente, así que invierte en poner un buen nombre.
  1. Copia el código de register_block_pattern() y pega dentro del editor que está debajo de la etiqueta “Código“; llena los campos que están entre < y > (inclusive). Deberá quedar algo como esto:
register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Biografía', 'my-plugin' ),
        'description' => _x( 'Patrón de bloques de biografía.', 'Descripción de patrón de bloques', 'my-plugin' ),
        'content'     => '<contenido>',
    )
);
  1. Ahora necesitamos llenar el valor de '<contenido>', para ello necesitaremos el código HTML de los bloques que diseñaste hace un momento. Deberás copiarlo entre los apóstrofes y reemplazando completamente la cadena <contenido>. Deberás terminar con algo como esto:
register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Biografía', 'my-plugin' ),
        'description' => _x( 'Patrón de bloques de biografía.', 'Descripción de patrón de bloques', 'my-plugin' ),
        'content'     => '<! – wp:group {"align":"wide","gradient":"very-light-gray-to-cyan-bluish-gray"} -->
<div class="wp-block-group alignwide has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background"><div class="wp-block-group__inner-container"><! – wp:heading -->
<h2>Encabezado nivel 2</h2>
<! – /wp:heading -->

<! – wp:heading {"level":3} -->
<h3>Encabezado nivel 3</h3>
<! – /wp:heading -->

<! – wp:columns -->
<div class="wp-block-columns"><! – wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><! – wp:image {"className":"is-style-rounded"} -->
<figure class="wp-block-image is-style-rounded"><img alt=""/></figure>
<! – /wp:image --></div>
<! – /wp:column -->

<! – wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><! – wp:paragraph -->
<p></p>
<! – /wp:paragraph --></div>
<! – /wp:column --></div>
<! – /wp:columns --></div></div>
<! – /wp:group -->',
    )
);
  1. Verifica que esté seleccionada la opción “Ejecutar el fragmento de código en todas partes“, está justo debajo del editor del fragmento (en la imagen es el #3).
Muestra las partes del editor de Fragmento de código del plugin Code Snippets
  1. Por último, presiona el botón Guardar los cambios y activar que está al final, hasta abajo.

¡Vamos a probar si todo está bien!

Paso 3: prueba tu patrón de bloques

Vamos de regreso al editor de bloques; inicia una publicación en blanco (o donde quieras al caso). Presiona el botón de Insertar bloque y cambia a la pestaña Patrones, y hasta abajo encontrarás tu patrón nuevo:

Muestra el patrón de bloques ya registrado en Gutenberg

¿Qué esperas? ¡haz clic sobre tu flamante patrón de bloques! cuando lo hagas lo verás materializarse en tu edición:

Muestra el patrón de bloques insertado en un documento

Estoy seguro de que si antes no veías el potencial de esta nueva característica, ahora estás salivando pensando en que tantos patrones puedes crear para agilizar tu trabajo.

Si tienes problemas…

Si por alguna razón el código no funcionó, intenta “escapando” el código que copiaste de los bloques; el “escapado” es un proceso donde se reemplazan o añaden algunos caracteres terminales como apóstrofe o dobles comillas, de modo que se consideren parte de una cadena y no un terminador de la misma. Puedes intentar con los que hay en https://onlinetexttools.com/escape-text o https://codebeautify.org/javascript-escape-unescape, básicamente es poner el código que copiaste en un bloque, convertirlo y copiar el bloque “escapado” y será el que usarás en lugar del copiado.

Bonus: añadir categorías a tus patrones de bloques

Bien, todo quedó a pedir de boca, ¿no? si somos muy quisquillosos podríamos decir que estaría mejor que nuestro patrón de bloques (o nuestros) aparecieran en una categoría concisa, ¿que tal una nueva para ese fin? vamos a hacerlo, es muy sencillo de implementar. Para añadir una categoría a tu nuevo patrón de bloques, usaremos una función llamada register_block_pattern_category(). Básicamente, es un mecanismo para registrar una nueva categoría de patrones, y luego poder usar esa categoría en tu definición de patrón. Para poder añadir una categoría, haremos lo siguiente:

register_block_pattern_category(
	'patrones-personalizados',
	array( 'label' => _x( 'Patrones personalizados', 'Categoría de patrones de bloques', 'my-plugin' ) )
);

Y con eso registramos una nueva categoría patrones-personalizados en el editor de bloques. Ahora sólo nos falta decir que nuestro nuevo patrón recién definido pertenece a esa categoría, por lo cual hacemos un pequeño cambio en el registro de bloque:

register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Biografía', 'my-plugin' ),
        'categories'  => array( 'patrones-personalizados' ),
        'description' => _x( 'Patrón de bloques de biografía.', 'Descripción de patrón de bloques', 'my-plugin' ),
        'content'     => '<! – wp:group {"align":"wide","gradient":"very-light-gray-to-cyan-bluish-gray"} -->
<div class="wp-block-group alignwide has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background"><div class="wp-block-group__inner-container"><! – wp:heading -->
<h2>Encabezado nivel 2</h2>
<! – /wp:heading -->

<! – wp:heading {"level":3} -->
<h3>Encabezado nivel 3</h3>
<! – /wp:heading -->

<! – wp:columns -->
<div class="wp-block-columns"><! – wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><! – wp:image {"className":"is-style-rounded"} -->
<figure class="wp-block-image is-style-rounded"><img alt=""/></figure>
<! – /wp:image --></div>
<! – /wp:column -->

<! – wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><! – wp:paragraph -->
<p></p>
<! – /wp:paragraph --></div>
<! – /wp:column --></div>
<! – /wp:columns --></div></div>
<! – /wp:group -->',
    )
);

Como puedes ver, añadimos una propiedad categories que es la que indica a que categorías puede pertenecer el patrón de bloques que estás registrando, y si, puede estar en más de una categoría. Ten cuidado con esa cadena patrones-personalizados; si la quieres cambiar, que sea en minúsculas y con guiones en vez de espacios, sin caracteres raros. El fragmento final queda como sigue:

register_block_pattern_category(
	'patrones-personalizados',
	array( 'label' => _x( 'Patrones personalizados', 'Categoría de patrones de bloques', 'my-plugin' ) )
);

register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Biografía', 'my-plugin' ),
        'categories'  => array( 'patrones-personalizados' ),
        'description' => _x( 'Patrón de bloques de biografía.', 'Descripción de patrón de bloques', 'my-plugin' ),
        'content'     => '<! – wp:group {"align":"wide","gradient":"very-light-gray-to-cyan-bluish-gray"} -->
<div class="wp-block-group alignwide has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background"><div class="wp-block-group__inner-container"><! – wp:heading -->
<h2>Encabezado nivel 2</h2>
<! – /wp:heading -->

<! – wp:heading {"level":3} -->
<h3>Encabezado nivel 3</h3>
<! – /wp:heading -->

<! – wp:columns -->
<div class="wp-block-columns"><! – wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><! – wp:image {"className":"is-style-rounded"} -->
<figure class="wp-block-image is-style-rounded"><img alt=""/></figure>
<! – /wp:image --></div>
<! – /wp:column -->

<! – wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><! – wp:paragraph -->
<p></p>
<! – /wp:paragraph --></div>
<! – /wp:column --></div>
<! – /wp:columns --></div></div>
<! – /wp:group -->',
    )
);

De vuelta en el editor, verás que tu nuevo patrón ahora aparece en una categoría concreta:

Muestra el patrón de bloques con categoría en el editor

Discusión sobre los patrones de bloques

¿Hay otras maneras de añadir mis patrones de bloques?

Si, claro; esta vez usamos Code Snippets, pero igual se puede hacer con el módulo Elements de Generate Press Premium, el tema que recomiendo y uso en este sitio, o bien en cualquiera de los métodos que hablé en el artículo sobre como añadir personalizaciones de código o estilo a WordPress.

¿En que se diferencían Patrones de bloques y Bloques reutilizables?

Los patrones de bloques son técnicamente una distribución visual de bloques, incompletos en contenido. Sirven de cimiento para que hagas la misma estructura una y otra vez, con contenido distinto. Los bloques reutilizables son la misma distribución de bloques y contenido, donde sea que se usen.

¿Cuándo usar Patrones de bloques y cuándo Bloques reutilizables?

La diferencia está en la persistencia del contenido que almacenen; cuando el contenido cambia siempre, lo mejor es un patrón de bloques; si el contenido necesita quedarse por mucho tiempo sin mutar, entonces el Bloque reutilizable es lo que buscas. Y recuerda que los bloques reutilizables son el mismo donde quiera que lo edites: si cambias una instancia, cambian todos.

¿Qué bloques puedo usar en mis Patrones de bloques?

Cualquier bloque registrado en Gutenberg es válido para usarse en patrones de bloques.

¿Hay plugins que ayuden con los Patrones de bloques?

Si que los hay; recomiendo el plugin Reusable Blocks Extended, que aparte de todo lo que hace tiene una característica que permite cambiar un bloque reutilizable en un patrón de bloques, lo cual me parece verdaderamente útil; uno que no he usado pero que tiene buenas críticas es el plugin Block Pattern Builder de Justin Tadlock, un conocido en la escena; este plugin permite crear tus patrones sin tener que dejar el admin.

Palabras finales

¿Qué piensas ahora de los patrones de bloques? no quisiera que percibas lo visto en esta pequeña guía como una montaña impasable, claro que no, al contrario, velo como una fruta que está al alcance de la mano, con un mínimo de esfuerzo…y las ganancias son muchas. Espero que este breve artículo ayude a expandir la mente de muchos que quizás no percibían bien de que iba esto de los patrones de bloques. Como puedes ver, es un tema grande dentro de WordPress, y creo que va a ser vital para mejorar la experiencia de Gutenberg. Como te habrás dado cuenta, las posibilidades son virtualmente infinitas.

Créditos

Imagen de portada por Susan Holt Simpson on Unsplash

Deja un comentario

¡NO sigas este enlace o serás bloqueado en este sitio!