Aprende en este tutorial cómo crear patrones de bloques (block patterns) con el editor de WordPress y añadirlos a un plugin o tema.
WordPress 5.9 introdujo bastantes funcionalidades nuevas, entre ellas, la opción de mostrar los patrones de bloques en el editor de forma contextual. Es decir, que el usuario se encuentre con el patrón de bloques solo cuando está usando un bloque.
En un tutorial anterior te expliqué como puedes crear tus propios patrones de forma sencilla.
En el mismo te explico como toda la parte de diseño la puedes hacer en el editor de bloques, luego copiar ese HTML y registrarlo como patrón usando la función register_block_pattern.
En este tutorial vas a ver cómo una vez creado ese patrón de bloques puedes controlar dónde aparece sugerido en el editor de bloques.
Es decir, el patrón de bloques además de mostrarse en la sección de patrones de bloques se mostrará cuando el usuario inspeccione las opciones de transformación del bloque.
Vamos a ver cómo puedes conseguir esto.
Pasos para mostrar patrones de bloques de forma contextual en WordPress
1. Crea el patrón de bloques
Sigue las instrucciones del tutorial sobre cómo crear un patrón de bloques para obtener el patrón que quieras.
2. Añade una nueva propiedad al registro del patrón de bloques
En el tutorial sobre la creación de patrones de bloques se usa la función register_block_pattern y defines cuatro parámetros en su array:
title: el título que mostrará en la sección de «Patrones».description: una descripción lo más específica posible sobre los elementos que forman el patrón.categories: la categoría en la que se mostrará el patrón.content: donde se añadirá el HTML del patrón.
Para añadir la opción de que se muestre de forma contextual solo tienes que añadir una nueva propiedad:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
Así quedaría el ejemplo del tutorial anterior añadiendo la propiedad:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, le estás indicando que el patrón se muestre cuando el usuario revise las opciones de transformación del bloque de encabezado (core/heading).
Puedes añadir otros bloques donde quieras que se muestre, por ejemplo, para mostrarlo en el bloque de imagen tendrías que añadir core/image.
Nota: Los bloques que contienen bloques internos (inner blocks) por ahora no soportan los patrones contextuales. Por lo tanto, por lo que aunque en este ejemplo iría bien poder añadir también este patrón contextual al bloque de «fondo», por el momento no se puede hacer. En cuanto esta limitación se solucione actualizaré el tutorial para reflejarlo.
Conclusiones
Los patrones de bloques son un herramienta fantástica para facilitarle el diseño al usuario final y ahora ya sabes, no solo cómo crear uno, sino también mostrarlo donde sea más relevante para el usuario.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
