Patrones de bloques de Gutenberg: la mirada de un desarrollador
Una mirada a los nuevos patrones de bloques de WordPress Gutenberg, a los ojos de un desarrollador. Veremos qué son, para qué se pueden usar y profundizaremos en cómo escribir código para ellos.
Patrones de bloques y su uso.
Los patrones de bloque se introdujeron en WordPress 5.5 (11 de agosto de 2020). Son una nueva característica en el insertador de bloques para insertar más fácilmente una configuración predefinida de múltiples bloques. Los desarrolladores de temas o complementos pueden definir un grupo de bloques, cómo se anidan, su contenido y sus atributos, y los usuarios finales pueden insertarlos con una simple operación de un solo clic. La idea es que los usuarios finales ya no necesiten crear manualmente diseños complejos y todas sus configuraciones personalizadas, y anidarlos en contenedores adecuados para los bloques que usan con frecuencia.
Una vez que se agrega un patrón de bloque al editor, los bloques no saben que se agregaron a través de un patrón de bloque. Se agregan como bloques normales que permiten a los usuarios modificar su contenido y configuración. Es básicamente un atajo para agregar una configuración de múltiples bloques.
¡La idea es buena! No todos los usuarios finales se sienten cómodos creando una gran estructura de bloques anidados en el editor para que se vea perfecto. Sin embargo, hasta ahora, esta característica es principalmente un beneficio para los desarrolladores, ya que los usuarios finales no pueden crear sus propios patrones. Para los propios bloques personalizados de los usuarios, deben seguir usando bloques reutilizables. Pero especialmente para los desarrolladores de temas, los patrones de bloques les permiten realmente mostrar a los usuarios finales la mejor configuración de bloques que funciona bien en el tema.
WordPress ha agregado un nuevo soporte de tema para patrones de bloque: 'core-block-patterns'. Core, desde 5.5.0, ejecutará automáticamente una función add_theme_support('core-block-patterns'), por lo que no es necesario que haga esto en su tema.
Dado que todas las funciones de patrón de bloque solo existen en una versión muy nueva de WordPress, es una buena idea verificar su existencia primero, para no interrumpir los sitios con versiones anteriores de WordPress. En todos los ejemplos de código a continuación, he hecho exactamente eso.
WordPress 5.5 viene con 9 patrones de bloques predefinidos (ver la lista a continuación). Los patrones de bloques se muestran en categorías de patrones (el núcleo agrega 5 categorías). Las categorías de patrones de bloques funcionan como categorías de publicaciones; puede poner un patrón de bloque en varias categorías. Los desarrolladores de temas y complementos pueden registrar sus propios patrones de bloques y categorías de patrones de bloques, así como anular el registro de los que están en el núcleo. ¡Así que echemos un vistazo más de cerca a cómo!
Patrones de bloques y categorías de patrones de bloques incluidos en WordPress 5.5
Los patrones de bloques incluidos en WordPress 5.5 son los siguientes (el espacio de nombres y el ID de slug de cada patrón se muestran entre paréntesis):
- Dos botones (‘
core/two-buttons‘) - Tres botones (‘
core/three-buttons‘) - Dos columnas de texto (‘
core/text-two-columns‘) - Dos columnas de texto con imágenes (‘
core/text-two-columns-with-images‘) - Tres columnas de texto con botones (‘
core/text-three-columns-buttons‘) - Dos imágenes una al lado de la otra (‘
core/two-images‘) - Encabezado grande con un encabezado (‘
core/large-header‘) - Encabezado grande con un encabezado y un botón (‘
core/large-header-button‘) - Citar (‘
core/quote‘)
Las categorías agregadas en WordPress 5.5 son (sus ID de slug se muestran entre paréntesis):
- Botones (‘
buttons‘) - Columnas (‘
columns‘) - Galería (‘
gallery‘) - Encabezados (‘
header‘ – nota no ‘s’ al final) - Texto (‘
text‘)
Anular el registro de patrones de bloques
Puede anular el registro de patrones de bloques utilizando la función [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Simplemente proporcione una cadena con el patrón de bloque para eliminar como parámetro. Consulte la descripción general anterior para conocer los patrones de bloques básicos. Ejecute esta función dentro de una función vinculada a la initacción.
Un ejemplo de anulación del registro de los patrones de bloques principales "Dos botones" y "Tres botones":
add_action('init', function() {
if (!function_exists('unregister_block_pattern')) {
return;
}
unregister_block_pattern('core/two-buttons');
unregister_block_pattern('core/three-buttons');
});Registro de patrones de bloques
El registro de un nuevo patrón de bloques se realiza mediante la función [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Acepta dos parámetros; el primero es una cadena de un nombre único para su patrón, incluido el espacio de nombres. El segundo es una serie de configuraciones para su patrón de bloques.
Sugerencia: la definición de un patrón de bloque requiere que proporcione contenido HTML sin procesar para la configuración de su bloque. No recomiendo escribir esto manualmente, ya que esto fácilmente causará conflictos de bloques no válidos. En su lugar, vaya al editor y configure los bloques como desee tenerlos en su patrón. Luego haga clic en el "menú de puntos" en la barra de herramientas del bloque de crianza y haga clic en "Copiar". Después de esto, puede volver a su editor de código y pegar (Ctrl+V). Esto le da el código HTML sin procesar de la configuración que copió. Use la funcionalidad del editor de código para reemplazar todas las líneas nuevas ny asegúrese de escapar las comillas correctamente.
Las propiedades para su patrón de bloque son las siguientes (segunda matriz de argumentos):
title(requerido): el nombre visible de su patrón de bloque**content**(requerido): HTML RAW de la configuración del bloquedescription: Descripción de su patrón de bloque. Está oculto visualmentecategories: una matriz de categorías para agregar este patrón de bloque. Si no proporciona esta propiedad, el bloque se colocará en una categoría de patrón de bloque "Sin categorizar".keywords: una variedad de palabras clave que pueden ayudar a los usuarios a encontrar su patrón mientras buscanviewportWidth: Proporcione un número entero del ancho del patrón de bloque en el insertador. Afecta solo a la vista previa en el insertador.
Este es un ejemplo de registro de un patrón de bloque que consta de un bloque de portada de ancho completo que tiene un color de fondo, que contiene un bloque de encabezado alineado al centro con un color de texto específico y un párrafo alineado al centro de un color de texto específico:
Registro de categorías de patrones de bloques
Los desarrolladores también pueden registrar categorías de patrones de bloques personalizados. Esto se hace con la función [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Acepta dos parámetros; primero una cadena de la categoría slug y segundo una matriz de propiedades. A partir de ahora, solo se admite una propiedad en el segundo argumento; labelpara el nombre legible de la categoría.
A continuación se muestra un ejemplo de registro de una categoría de patrón de bloque personalizado:
Con esto, puede agregar ‘awp-patterns’ al categoriesargumento ‘ ‘ de register_block_pattern(). Tenga en cuenta que si una categoría no tiene patrones de bloques registrados, la categoría no se mostrará en el insertador de bloques. Deberá agregar al menos un patrón de bloque en esta categoría para que aparezca.
Anular el registro de categorías de patrones de bloque
Finalmente, hay una función [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()para cancelar el registro de una categoría de patrón de bloque. Proporcione la categoría slug como parámetro. Consulte la descripción general de las categorías de patrones de bloque anterior para conocer las categorías principales y sus slugs.
No olvide que las categorías de patrones de bloques sin patrones de bloques asignados no serán visibles en el insertador de bloques. Por lo tanto, si anula el registro de todos los patrones de bloques asignados a una categoría, la categoría en sí ya no estará visible y no es necesario que anule el registro de la categoría. Cualquier patrón de bloque que solo esté asignado a la categoría que está eliminando, se moverá a una categoría "Sin categorizar".
Aquí hay un ejemplo de cómo cancelar el registro de la categoría de patrón de bloque central ‘botones’:
add_action('init', function() {
if (!function_exists('unregister_block_pattern_category')) {
return;
}
unregister_block_pattern_category('buttons');
});Conclusión
La nueva función de patrón de bloques en WordPress Gutenberg definitivamente está un paso más cerca de hacer que el editor de bloques funcione más como un creador de páginas. En mi opinión, la desventaja es que los usuarios finales no pueden crear sus propios patrones. Pero es una buena función para los desarrolladores de temas ya que permite a los usuarios finales establecer fácilmente configuraciones y diseños de bloques que funcionen bien en el tema. ¡Esta es una característica completamente nueva y probablemente evolucionará y mejorará en un futuro cercano! Yo por mi parte, no puedo esperar!