Esta es la tercera y última parte de la guía completa sobre los patrones de bloques que incluye los siguientes temas:
- Introducción a los patrones de bloques
- Insertar un patrón en una página
- Patrones pre-definidos y otros disponibles en directorios
- Añadir patrones disponibles en directorios a tu sitio
- Cómo crear un patrón desde cero
- Cómo crear un patrón si no eres desarrollador
- Cómo convertir bloques reutilizables en patrones de bloques
- Temas que usan patrones de bloques
- Documentación oficial.
En la primera parte vimos los 4 primeros puntos de todos los temas tratados en la guía: qué es un patrón de bloques, cómo insertar patrones pre-definidos 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 con detalle el punto 5: cómo podemos crear un patrón desde cero mediante código. Y en esta última entrada, veremos los 4 últimos puntos: cómo podemos crear un patrón sin no somos desarrolladores, cómo podemos convertir bloques reutilizables en patrones de bloques, qué temas usan patrones de bloques y, para acabar, dónde puedes encontrar documentación oficial sobre los patrones.
6. Cómo crear un patrón si no eres desarrollador
Aunque ya vimos en la entrada anterior los pasos que debías seguir para crear un patrón con código, en este punto veremos que también puedes crear patrones sin ser desarrollador. Y sí, lo haremos con un plugin. De hecho, hay más de un plugin para crear patrones:
- Block Patter Builder creado por Justin Tadlock,
- BlockMeister – Block Patter Builder de BlockMeister,
- Page Builder Gutenberg Blocks – CoBlocks de GoDaddy
Los tres funcionan de forma parecida pero con alguna diferencia. Tras instalar cualquiera de ellos, te aparecen nuevas opciones en el menú de administración de WordPress para que puedas crear un nuevo patrón y administres la lista de patrones creados.
En el caso del plugin Block Patterns Builder, imagen de la izquierda, nos aparece el menú Block Patterns con dos opciones, la de crear un nuevo patrón y la de listar y editar los patrones existentes. En el caso del plugin de BlockMeister además añade una opción para administrar las categorías de los patrones. Y en el caso de CoBlock, imagen de la derecha, la opción de crear patrones es una opción dentro de Apariencia.
En los tres plugins, para crear un nuevo patrón se te abre el mismo editor que usas para editar cualquier página o entrada. Sólo tienes que darle un nombre al patrón y definir los bloques que quieras que lo conformen. Cuando lo tengas listo, lo guardas y ya.
En el caso del plugin BlockMeister, tal y como puedes ver en la imagen anterior, tienes en la barra lateral derecha, la opción de añadir las propiedades adicionales de los patrones de bloques que vimos en la entrada anterior: nombre, slug, descripción, ancho del patrón y categorías. El plugin de Justin Tadlock, en cambio, no te permite añadir la categoría. Y CoBlocks también te permite añadir las propiedades adicionales de patrones.
Con cualquiera de los tres plugins, tras guardar tu patrón, éste pasará a estar disponible haciendo clic en el botón + del editor de entradas y páginas para que lo puedas insertar cuando lo necesites.
Como ves, con un plugin es bien fácil crear los patrones que quieras para tenerlos disponibles en los diseños de tus páginas.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
7. Cómo convertir bloques reutilizables en patrones de bloques
Si ya llevas cierto tiempo con Gutenberg y diseñando páginas, posiblemente habrás creado algún bloque reutilizable para utilizarlo en el diseño de más de una página. De hecho, recuerdo que la primera vez que oí hablar sobre patrones, pensé que eran casi lo mismo que los bloques reutilizables… pero no, ya que hay algunas diferencias relevantes entre los dos conceptos.
Un bloque reutilizable sirve para que puedas guardar un bloque o grupo de bloques para que lo puedas insertar en diferentes páginas con el objetivo de que se vea igual en todas ellas y que, si lo modificas a posteriori, se actualicen todas sus instancias. Si quieres que un bloque reutilizable sea distinto al resto, debes convertirlo a bloque normal primero.
Un patrón de bloques está diseñado para ser personalizado. Las opciones son ilimitadas. La idea del patrón es proporcionar un punto de partida sobre cómo puedes combinar bloques para que resulten atractivos.
Si habías creado bloques reutilizables con la idea de convertirlos a bloques normales para luego personalizarlos cómodamente, tiene más sentido que conviertas estos bloques a patrones de bloques. ¿Cómo podemos hacerlo?
El plugin Reusable Block Extended de JB Audras nos proporciona esta funcionalidad. Veamos cómo lo hacemos.
Tras instalar el plugin, nos aparecerá una opción de menú para la gestión de los bloques reutilizables. Si haces clic en All Reusable Blocks verás la lista de los bloques que tengas definidos.
Como puedes ver en la imagen anterior, la lista de bloques reutilizables muestra dos bloques y para cada uno de ellos te indica donde se están utilizando, el shortcode y la función PHP para que puedas usarlos y un botón para que puedas convertirlo a un patrón de bloques.
Tras hacer clic en el botón de convertir a patrón de bloques, se te habrá creado el patrón y ya lo tendrás disponible en tu editor en la categoría Converted from reusable blocks.
8. Temas que usan patrones de bloques
Poco a poco van apareciendo más temas que incorporan sus propios patrones de bloques pre-definidos. En el momento de escribir esta entrada, en el directorio de temas de WordPress.org hay ya 14 de estos.
- Twenty Twenty-One Version 1.0 de WordPress.org
- C9 Starter Version 2.4.4 de covertnine
- C9 Work Version 2.3.1 de covertnine
- Seedlet Version 1.1.2 de Automattic
- ExS Version 0.9.0 de exstheme
- Cordero Version 1.2.2 de uxl
- Bigwigs Version 0.7.1 de Dinev Dmitry
- emulsion Version 1.6.9 de nobita
- Twenty Twenty Version 1.6 de WordPress.org
- VW Health Coaching Version 0.6.5 de VW THEMES
- Twenty Nineteen Version 4.9.6 de WordPress.org
- Writings Version 1.3.0 de Dinev Dmitry
- Twenty Seventeen Version 2.5 de WordPress.org
- Twenty Sixteen Version 2.3 de WordPress.org
Aprovecho para mencionar que si eres un desarrollador de temas y quieres eliminar los bloques pre-definidos (core-block patterns) que vienen en WordPress 5.5, lo puedes hacer con el siguiente código:
remove_theme_support( 'core-block-patterns' );9. Documentación oficial
Para completar esta guía te añado los enlaces de la documentación oficial de WordPress sobre los patrones de bloques.
- Para el usuario final – Vídeo de introducción a los patrones de bloques (en inglés) para entender qué son los patrones, cómo acceder a ellos, cómo añadirlos en entradas y páginas y entender cómo personalizarlos para tu contenido. Este vídeo es un workshop publicado por el Training Team de WordPress.
- Para el usuario final – Documentación sobre patrones de bloques (en inglés) creada por el Documentation Team.
- Para desarrolladores – Página de Block Patterns en la documentación para la API Block, publicada por el Gutenberg Team y que ya te comenté en la entrada anterior.
Y hasta aquí la guía completa sobre patrones de bloques que espero que te haya sido útil. Si crees que falta cualquier tipo de información, no dudes en decírmelo en la sección de comentarios para añadirlo a la guía.
Imagen destacada de Patrick Hendry en Unsplash.
Deja una respuesta