La guía completa sobre los patrones de Gutenberg (III)

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparación de dos variantes de la misma página mediante test A/B

Comparte este artículo

Esta es la tercera y última parte de la guía completa sobre los 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 pre-definidos y otros disponibles en directorios
  4. Añadir patrones disponibles en directorios a tu 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 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:

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.

Patrón creado con el plugin BlockMeister Block Pattern Builder
Patrón creado con el plugin BlockMeister – Block Pattern Builder.

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.

Captura de pantalla de un patrón creado con Gutenberg y disponible en el editor de páginas
Patrón creado y disponible en el editor de páginas.

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.

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.

Captura de pantalla del plugin Reusable blocks mostrando la lista de los bloques reusables
Lista de bloques reutilizables.

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.

Captura de pantalla de la creación de un patrón de bloques a partir de un bloque reutilizable con Gutenberg
Patrón de bloques creado a partir de un bloque reutilizable.

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.

Temas del directorio de WordPress.org que incluyen patrones de bloques.
Temas del directorio de WordPress.org que incluyen patrones de bloques.

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

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.