Conceptos básicos del constructor: cómo crear patrones de bloques

En el artículo Conceptos básicos del constructor del mes pasado, exploramos los patrones de bloques: qué son y cómo puede usarlos. Aprendimos que un patrón de bloque es simplemente una colección predefinida de bloques que forma un diseño específico. Mostramos el poder de los patrones y discutimos cómo son la piedra angular del desarrollo moderno de temas de WordPress. ¡Hoy aprenderemos a diseñar, compartir y registrar nuestros propios patrones!

Tenga en cuenta que este artículo utiliza el tema Twenty Twenty-Two en todos sus ejemplos. Este tema basado en bloques se lanzó junto con WordPress 5.9 y es un recurso fantástico que presenta más de 60 patrones de bloques.

Patrón de diseño

La parte más difícil de crear un patrón de bloques es decidir cómo debe verse. Comencemos con algo relativamente simple: una cuadrícula de elementos, dos filas de tres. Podríamos usar este diseño para mostrar diferentes servicios comerciales o características del producto.

Sugerencia rápida: los patrones se pueden crear a partir de cualquier bloque, incluidos los bloques de terceros. Sin embargo, si tiene la intención de distribuir sus patrones a una audiencia amplia, intente usar solo los bloques básicos de WordPress; de esa manera, el usuario no tiene que instalar complementos adicionales para usar sus diseños.

Para mí, el diseño de patrones comienza en el Editor. Si bien los patrones se pueden codificar manualmente, es mucho más fácil hacer las cosas visualmente. Comenzaré agregando un bloque Columnas con tres columnas para la primera fila de la cuadrícula. A continuación, agregue bloques de encabezado, párrafo y botones a cada columna. Duplique el bloque Columnas para crear la segunda fila de la cuadrícula. Finalmente, aplicaré algunas configuraciones de estilo y envolveré ambos bloques de Columnas en un bloque de Grupo con un color de fondo. El resultado se ve así:

¡Puedes ver los 33 bloques que componen este diseño en la captura de pantalla de arriba!

Si quiero crear una versión "oscura" alternativa de la cuadrícula, solo necesito duplicar el diseño original y modificar el estilo.

Si bien ambos diseños son relativamente simples, crearlos desde cero puede ser tedioso. Poder compartir y/o guardar estos patrones de bloques ahorraría mucho tiempo.

Compartir un diseño

¡Compartir un diseño de patrón es fácil! Digamos que desea mover el diseño a otra página de su sitio web, o tal vez a otro sitio web por completo. Es tan simple como copiar y pegar el marcado del bloque. Hay múltiples maneras de lograr esto.

Si el diseño del patrón está contenido en un bloque de "contenedor", como un bloque de Grupo, Portada o Columnas, seleccione el contenedor más externo y use el menú de herramientas para seleccionar "Copiar". El marcado del bloque se copia en el portapapeles y puedes pegarlo donde quieras.

Una segunda opción es utilizar el Editor de código, al que puede acceder desde el panel Opciones.

El Editor de código proporciona una representación visual de todas las marcas de bloque en la página o publicación actual. Prefiero este método porque es fácil ver exactamente qué código se está copiando.

Registro de un patrón

Copiar y pegar el marcado de bloques puede ser fácil, pero a menudo queremos una versión más permanente de nuestros diseños de patrones. Para hacerlo, usaremos la API de patrones para "registrar" un patrón de bloque personalizado. Esto hace que nuestro diseño esté disponible tanto en el Insertador como en el Explorador de patrones dentro de WordPress.

Para registrar un patrón, usamos la función de PHP register_block_pattern(). Esta función acepta dos parámetros, un título y una matriz de propiedades. Antes de pasar por cada uno, veamos un ejemplo.

registro_bloque_patrón(

'ejemplo/característica-cuadrícula-luz',

formación(

'título' => __( 'Cuadrícula de funciones: ligera', 'dominio de texto'),

'descripción' => __( 'Exhibe seis elementos destacados en una cuadrícula sobre un fondo claro', 'dominio de texto' ),

'categorías' => array( 'destacados', 'columnas' ),

'palabras clave' => array( 'característica', 'cuadrícula' ),

'viewportWidth' => 1400,

'tipos de bloque' => matriz ('núcleo/columnas'),

'contenido' => 'CONTENIDO DEL PATRÓN'

)

);

Aquí estamos registrando el patrón Feature Grid que diseñamos anteriormente. El título sigue una convención de nomenclatura de espacio de nombres/título. Al registrar varios patrones en el mismo proyecto, se recomienda mantener la coherencia del espacio de nombres.

Técnicamente, solo se requieren los parámetros de título y contenido en la matriz de propiedades. Por brevedad, el contenido del patrón se excluye en el ejemplo anterior. Sin embargo, este es el mismo código que copiamos y pegamos en la sección anterior. Las categorías se establecen mediante el campo de categorías y un patrón puede tener varios. En el Editor, los patrones están organizados por categoría. Para las propiedades restantes, se proporciona un desglose fantástico en el Manual del editor de bloques.

Para registrar el patrón de cuadrícula de funciones con el fondo oscuro, simplemente duplique el código de registro y actualícelo según corresponda. Finalmente, envolvemos ambas funciones así y colocamos todo en el archivo functions.php de nuestro tema.

función my_pattern_library_register_block_patterns() {

registro_bloque_patrón(

'ejemplo/característica-cuadrícula-luz',

matriz (...)

);

registro_bloque_patrón(

'ejemplo/característica-cuadrícula-oscura,

matriz (...)

);

}

add_action('init', 'example_register_block_patterns');

El código completo está disponible en Gist en GitHub.

Una vez que se agrega el código, nuestros patrones recién registrados ahora se mostrarán en el Insertador y el Explorador de patrones.

Registro de una categoría de patrón

Cuando se trabaja con patrones personalizados, suele ser útil colocarlos en categorías personalizadas. WordPress lo simplifica con register_block_pattern_category(). Esta función es similar a la que usamos para registrar patrones. Todo lo que necesita hacer es proporcionar un título de categoría y una serie de propiedades. A partir de WordPress 5.9, la etiqueta es la única propiedad admitida, pero esperamos más en el futuro.

El siguiente ejemplo registra la categoría “Personalizado” con el título personalizado. Coloque este código en el archivo functions.php de su tema junto con los ejemplos de registro de patrones.

función ejemplo_registrar_bloque_patrón_categorías() {

register_block_pattern_category(

'costumbre',

array( 'etiqueta' => __( 'Personalizado', 'dominio de texto' ) )

);

}

add_action('init', 'example_register_block_pattern_categories');

Las categorías de patrones solo se mostrarán en el Editor si tienen patrones asociados. Por lo tanto, si agregamos personalizado a los dos patrones de cuadrícula de características que registramos anteriormente, la categoría "Personalizado" aparecerá así:

Crear un complemento de biblioteca de patrones

En las secciones anteriores, registramos patrones y una categoría de patrones colocando el código en el archivo functions.php de nuestro tema. Si bien esto funciona, no es ideal para el largo plazo. ¿Supongamos que necesitamos actualizar nuestro tema? ¿Quizás queremos usar los patrones en otro sitio web?

WordPress aún tiene que proporcionar una solución nativa para la gestión de patrones personalizados, por lo que debemos buscar soluciones alternativas. Además, suele ser preferible tener patrones en un formato más portátil.

El mejor enfoque que he encontrado es crear un complemento simple de WordPress para almacenar mi colección de patrones personalizados. Los complementos brindan la máxima versatilidad y son independientes del tema. Le mostraré cómo crear su propio complemento de biblioteca de patrones en los siguientes pasos.

Sugerencia rápida: si desea omitir los siguientes pasos, he preparado un complemento completo de "Mi biblioteca de patrones" que debería proporcionar un excelente punto de partida para su propia biblioteca. El código está disponible como Gist en GitHub.

Paso 1: Obtener la configuración

Antes de comenzar a crear el complemento, necesitará una versión funcional de WordPress y un editor de texto de alguna variedad. Recomiendo encarecidamente Local para crear instalaciones locales de WordPress y lo he estado usando exclusivamente durante muchos años. Uso Atom para la edición de texto, pero hay muchas opciones excelentes. Incluso el editor de texto básico que viene con su sistema operativo servirá.

Configure un sitio local de WordPress usando Local o una aplicación similar. Asegúrese de que WordPress esté actualizado a la versión 5.9 o superior. Los patrones funcionarán en 5.5+, pero siempre es mejor usar la última versión de WordPress siempre que sea posible.

Paso 2: crea el complemento

Lo siguiente que debe hacer es crear la "base" del complemento. Si es nuevo en el desarrollo de complementos, no tenga miedo. Suena más desalentador de lo que es.

Navegue al directorio wp-content → plugins en su instalación local de WordPress y cree un nuevo directorio titulado my-pattern-library. Puede nombrar el directorio como desee. Simplemente reemplace "mi biblioteca de patrones" con su nombre personalizado en todos los pasos posteriores.

Dentro del nuevo directorio wp-content → plugins → my-pattern-library , cree un archivo PHP titulado my-pattern-library.php. Abra el archivo en su editor de texto y agregue el siguiente comentario de encabezado del complemento en la parte superior del archivo. No olvides el <?php inicial. Tenga en cuenta que simplifiqué el encabezado de este tutorial.

<?php

/**

* Nombre del complemento: Mi biblioteca de patrones

* Descripción: Una biblioteca simple de patrones de bloques.

* Versión: 0.1.0

* Requiere al menos: 5.8

* Requiere PHP: 7.0

* Autor: Tu Nombre

* Licencia: GPL v2 o posterior

* Dominio de texto: my-pattern-library

*/

Siéntase libre de cambiar la información del encabezado como mejor le parezca. Luego guarde el archivo. Ahora tiene un complemento de WordPress completamente funcional. Confirme que esté visible en la página de complementos de administración y haga clic en "Activar". Debe tener un aspecto como este.

Si bien ahora tiene un complemento que funciona, en realidad no hace nada. Cambiemos eso.

Paso 3: Registre patrones y categorías

En este paso final, todo lo que necesita hacer es copiar el patrón y el código de registro de la categoría de patrones que se incluyeron anteriormente en este artículo en el nuevo complemento. Anteriormente colocamos este código en el archivo functions.php del tema. Ahora, simplemente péguelo debajo del comentario del encabezado en su archivo my-pattern-library.php.

Guarde el archivo y luego navegue hasta el Editor en WordPress. Abra el Insertador, haga clic en la pestaña Patrones y elija la categoría Personalizado. Debería ver los dos patrones registrados por el complemento.

¡Su biblioteca de patrones ya está operativa! Cuando necesite nuevos patrones o categorías personalizados, simplemente agréguelos al complemento. Un ejemplo de código completo está disponible como Gist en GitHub.

Antes de terminar, es importante mencionar que este ejemplo está diseñado para uso personal. Es probable que desee incluir más funciones si el complemento se distribuyera públicamente. La localización viene a la mente. Dicho esto, este tutorial demuestra lo fácil que es crear un complemento simple que almacene patrones de bloques personalizados.

Terminando

En este artículo, aprendió a diseñar, compartir y registrar patrones de bloques. Incluso ha aprendido a crear un complemento simple de WordPress para albergar su propia biblioteca de patrones. Creo firmemente que los patrones de bloques son parte integral del desarrollo de temas modernos, y estoy emocionado de ver lo que depara el futuro. Si no has comenzado a explorar patrones, espero que este artículo te anime a hacerlo. Learn WordPress es un recurso fantástico para el aprendizaje adicional y si tiene alguna pregunta, hágamelo saber en los comentarios.