La guía completa de patrones de bloques de Gutenberg (III)

Esta es la tercera y última parte de la guía completa sobre patrones de bloques que incluye los siguientes temas:

1. Introducción a los patrones de bloques
2. Insertar un patrón en una página
3. Patrones predefinidos y otros disponibles en directorios
4. Agregue patrones disponibles en directorios a su sitio
5. Cómo crear un patrón desde cero
6. Cómo crear un patrón si no eres desarrollador
7. Cómo convertir bloques reutilizables en patrones de bloques
8. Temas que usan patrones de bloques
9. Documentación oficial.

En la primera parte vimos los primeros 4 puntos de todos los temas tratados en la guía: qué es un patrón de bloque, cómo insertar patrones predefinidos en tus páginas y dónde encontrar y cómo copiar patrones que están disponibles en algunos directorios . En la segunda parte vimos en detalle el punto 5: cómo podemos crear un patrón desde cero usando código. Y en este último post, veremos los últimos 4 puntos: cómo podemos crear un patrón sin ser un desarrollador, cómo podemos convertir bloques reutilizables en patrones de bloques, qué temas usan patrones de bloques y, por último, dónde puedes encontrar Documentación oficial sobre patrones.

6. Cómo crear un patrón si no eres desarrollador

Aunque ya vimos en el post anterior los pasos que tenías que seguir para crear un patrón con código, en este punto veremos que puedes crear patrones sin ser desarrollador. Y sí, lo haremos con un plugin. De hecho, hay más de un complemento para crear patrones:

• Generador de patrones de bloques por Justin Tadlock,
• BlockMeister - Generador de patrones de bloques por BlockMeister,
• Page Builder Gutenberg Blocks - CoBlocks de GoDaddy

Los tres funcionan de manera similar, con algunas diferencias menores. Tras instalar cualquiera de ellos aparecen nuevas opciones en el menú de administración de WordPress para que puedas crear un nuevo patrón y gestionar la lista de patrones creados.

En el caso del complemento Block Patterns Builder (es decir, la imagen de la izquierda), el menú Block Patterns aparece con dos opciones: una para crear un nuevo patrón y otra para listar y editar patrones existentes. En el caso del complemento BlockMeister (representado en la imagen central), también agrega una tercera opción para administrar las categorías de los patrones. Y en el caso de CoBlock (mostrado en la última imagen), su menú aparece debajo de Apariencia .

En los tres complementos, la creación de un nuevo patrón abre el mismo editor que usa para editar cualquier página o publicación. Simplemente asigne un nombre al patrón y defina los bloques que desea que tenga. Cuando su patrón esté listo, simplemente guárdelo.

La captura de pantalla anterior muestra el editor de patrones de bloques proporcionado por el complemento BlockMeister. Como puede ver, ofrece un montón de propiedades adicionales en la barra lateral derecha: nombre, slug, descripción, ancho del patrón y categorías. El complemento Justin Tadlock, por otro lado, no le permite agregar la categoría. Y CoBlocks también le permite agregar las propiedades adicionales de los patrones.

Con cualquiera de los tres complementos, después de guardar su patrón, estará disponible haciendo clic en el botón + en el editor de publicaciones y páginas para que pueda insertarlo cuando lo necesite.

Como puede ver, es muy fácil crear los patrones que desea tener disponibles en los diseños de su página, siempre que esté utilizando el complemento adecuado para ello.

7. Cómo convertir bloques reutilizables en patrones de bloques

Si ha estado usando Gutenberg durante algún tiempo y ha estado diseñando páginas con él, apuesto a que también ha creado algunos bloques reutilizables para replicar un determinado diseño en varias páginas. ¡Al menos lo hice! Recuerdo que la primera vez que escuché sobre los patrones, pensé que eran más o menos lo mismo que los bloques reutilizables… pero no lo son: hay algunas diferencias importantes entre los dos conceptos.

Un bloque reutilizable es un bloque (o grupo de bloques) que se puede insertar en diferentes páginas, siendo su contenido el mismo en todas ellas. Es decir, si lo modificas más tarde, todas sus instancias deberían estar actualizadas. Por lo tanto, si desea que un bloque reutilizable sea diferente del resto, primero debe convertirlo en un bloque normal.

Un patrón de bloque, por otro lado, está diseñado para personalizarse: sirve como un diseño básico que se supone que debes modificar después de insertarlo. Las opciones son ilimitadas, por supuesto. La idea del patrón es proporcionar un punto de partida sobre cómo puede combinar bloques para que se vean atractivos.

Si había creado bloques reutilizables con la idea de convertirlos en bloques normales y luego personalizarlos convenientemente, tiene más sentido convertir estos bloques en patrones de bloques. ¿Cómo podemos hacer esto?

El plugin Reusable Block Extended de JB Audras nos proporciona esta funcionalidad. Veamos cómo lo hacemos.

Después de instalar el complemento, aparecerá una opción de menú para administrar los bloques reutilizables. Si hace clic en Todos los bloques reutilizables , verá la lista de los bloques que ha definido.

Como puedes ver en la imagen de arriba, la lista de bloques reutilizables muestra dos bloques y, para cada uno de ellos, te dice dónde se están usando, el shortcode y la función de PHP para que puedas usarlos, y un botón para puede convertirlo en un patrón de bloque.

Después de hacer clic en el botón Convertir en patrón de bloque , el patrón se habrá creado para usted y estará disponible en su editor en la categoría Convertido de bloques reutilizables .

8. Temas usando patrones de bloques

En el momento de escribir este artículo, ya hay 14 temas con patrones de bloques personalizados en el directorio de temas de WordPress.org, y la lista crece rápidamente.

• Veinte Veintiuno Versión 1.0 de WordPress.org
• C9 Starter Versión 2.4.4 por covertnine
• C9 Work Versión 2.3.1 por covertnine
• Seedlet Versión 1.1.2 por Automattic
• ExS Versión 0.9.0 por exstheme
• Cordero Versión 1.2.2 por uxl
• Bigwigs Versión 0.7.1 por Dinev Dmitry
• emulsión Versión 1.6.9 por nobita
• Veinte Veinte Versión 1.6 de WordPress.org
• VW Health Coaching Versión 0.6.5 por VW THEMES
• Veinte diecinueve Versión 4.9.6 de WordPress.org
• Escritos Versión 1.3.0 por Dinev Dmitry
• Veinte diecisiete Versión 2.5 de WordPress.org
• Veinte dieciséis Versión 2.3 de WordPress.org

Aprovecho para mencionar que si eres desarrollador de temas y deseas eliminar los bloques predefinidos (core-block patterns) que vienen en WordPress 5.5, puedes hacerlo con el siguiente código:

 remove_theme_support( 'core-block-patterns' );

9. Documentación Oficial

Finalmente, aquí tienes algunos enlaces útiles sobre patrones de bloques:

• Para el usuario final: video introductorio para bloquear patrones para comprender qué son, cómo acceder a ellos, cómo agregarlos en publicaciones y páginas y comprender cómo personalizarlos para su contenido. Este video es un taller publicado por el equipo de capacitación de WordPress.
• Para el usuario final: documentación de patrones de bloques creada por el equipo de documentación.
• Para Desarrolladores – Página de Patrones de Bloques en la documentación para la API de Bloques, publicada por el Equipo de Gutenberg y que ya les comenté en el post anterior.

¡Y eso es! Espero que hayas encontrado útil esta guía. Si cree que falta información, no dude en decírmelo en la sección de comentarios a continuación.

Imagen destacada de Patrick Hendry en Unsplash .