Cómo crear y administrar patrones de bloques en WordPress

Los patrones de bloques de WordPress se encuentran entre sus características de diseño más versátiles. Proporcionan diseños listos para usar para todo tipo de usos. Y parece que sus posibilidades no tienen fin.

¿Quieres agregar una tabla de precios? Controlar. ¿Qué tal una galería de fotos personalizada? Controlar. ¿Qué pasa si desea una página completa Acerca de nosotros? Controlar. Aquí sólo estamos arañando la superficie.

Los patrones de bloques también están experimentando mejoras constantes. Por ejemplo, alguna vez se incluyeron solo en temas y complementos. Luego vino el Directorio de patrones de bloques, que publica patrones para uso de cualquiera.

Bueno, agárrense del sombrero. Las cosas han mejorado aún más. WordPress ahora tiene una forma de crear, administrar y compartir patrones de bloques, todo desde el Editor de bloques.

¿Quieres ver cómo funciona? Consulte nuestra guía rápida para crear y administrar patrones de bloques en WordPress.

¿Por qué crear un patrón de bloques?

Antes de profundizar en el tutorial, definamos para quién es esta función. Crear patrones de bloques tiene sentido para quienes desean utilizar el mismo grupo de bloques varias veces.

Una interfaz de llamado a la acción (CTA) es un ejemplo. Supongamos que desea colocarlo en varias áreas de su sitio web. Un patrón de bloques le ayudará a mantener una apariencia coherente en todo su sitio. Así, no es necesario reinventar la rueda para cada uso.

• También puede elegir si desea «sincronizar» un patrón de bloque. Editarás un patrón sincronizado desde una ubicación singular. Esos cambios entrarán en vigor en todos los lugares donde se utilice el patrón. Entonces, cambia el color de fondo de la CTA una vez y verlo reflejado por todas partes.
• Un patrón no sincronizado proporciona un marco de diseño básico. Editarás cada instancia del patrón, dándole contenido único. En este caso, nuestra CTA podría tener el mismo diseño, pero con texto, colores e imágenes diferentes. El patrón no sincronizado sirve como punto de partida.

Es posible que también desees crear un patrón de bloques de un diseño de página completa. Úselo como base para páginas futuras. O úselo como respaldo. Ya sabes, en caso de que alguien rompa tu página cuidadosamente elaborada.

¿La línea de fondo? Crea un patrón de bloques para cualquier cosa que quieras usar nuevamente.

Ejemplo: un patrón de bloque de perfil de producto

Pasemos a un ejemplo básico. Nuestro sitio web ficticio tendrá una página de “Productos”. Lo usaremos para mostrar cada producto que vende nuestro cliente.

Cada producto de la lista utilizará el mismo diseño. Entonces, ¿por qué no crear un patrón de bloques no sincronizado? Proporcionará una forma más eficiente de construir nuestra página.

Además, agregar productos en el futuro será más fácil, incluso si decidimos darle a cada producto una página separada en el futuro.

Paso 1: crear un diseño

El primer paso es crear un diseño en el Editor de bloques de WordPress. Aquí, hemos creado un ejemplo de cómo debería verse cada producto. Y lo hemos hecho directamente en la página de Productos.

Cada producto contará con un título, descripción e imagen. A partir de ahí, agregaremos botones que apunten a recursos relacionados.

Nota: Usamos la versión gratuita de GenerateBlocks para crear algunos elementos de diseño. Sin embargo, puedes crear patrones usando los bloques que quieras.

Paso 2: seleccione los bloques que queremos en nuestro patrón

A continuación, necesitaremos seleccionar bloques para incluirlos en nuestro patrón. Usaremos la función Vista de lista para hacer nuestras selecciones.

Paso 3: crea un patrón

Ahora es el momento de crear nuestro patrón de bloques. Haremos clic en el block options botón para abrir un menú. Luego, haremos clic en el Create pattern entrada.

El cuadro de diálogo nos pide que le demos un nombre a nuestro patrón. Además, tenga en cuenta la palanca para sincronizar el patrón. También es posible asignar su patrón de bloque a una categoría.

Llamaremos a nuestro patrón «Perfil de producto» y elegiremos no para sincronizarlo.

¡Eso es todo al respecto! Ahora tenemos un patrón de bloqueo no sincronizado para agregar productos a nuestra página.

Paso 4: Véalo en acción

Tenemos nuestro primer producto configurado. Ahora, usemos nuestro nuevo patrón de bloques para agregar otro.

Colocaremos nuestro cursor debajo del primer producto. Luego, agregaremos nuestro patrón. Podemos buscarlo por nombre o seleccionarlo desde el My patterns categoría.

¡Eso fue rápido! Ahora, haremos las ediciones necesarias. Cambiamos el título, la descripción y la imagen para que coincidan con nuestro nuevo producto. También cambiamos los colores de los botones.

Cómo editar su patrón de bloques

Entonces, ¿qué pasa si deseas realizar cambios en tu patrón de bloques? WordPress proporciona un área para hacerlo, pero está algo oculta.

He aquí cómo encontrarlo:

• A través del editor de bloques de WordPress: Haga clic en el Options menú en la parte superior derecha de la pantalla. Luego, seleccione Manage patterns.
• A través del editor del sitio de WordPress: Tenga en cuenta que esto se aplicará a aquellos que utilicen un tema de bloque. Acceda al Editor del sitio yendo a Appearance > Editor en el panel de WordPress.
• Haga clic en Manage all of my patterns en la parte inferior de la barra lateral del menú.

La pantalla de patrones

La pantalla Patrones alberga sus patrones de bloques personalizados. Se parece a otras páginas y listados de publicaciones. Sin embargo, hay algunos elementos que queríamos señalar.

• Primero, es posible exportar sus patrones de bloques. Pase el cursor sobre su patrón y haga clic en Export as JSON enlace.
• Como era de esperar, también puedes importar estos patrones. Utilizar el Import from JSON botón en la parte superior de la pantalla. Podrás cargar el archivo JSON que contiene tu patrón.

Esta función proporciona una ruta para compartir sus patrones en varios sitios web.

Haciendo cambios

Digamos que queremos editar nuestro patrón de bloque Perfil de producto. Podemos hacerlo dentro de la misma interfaz del Editor de bloques.

Aquí, cambiamos los títulos de texto y reducimos la imagen.

Como recordatorio, este es un patrón no sincronizado. Por lo tanto, nuestros cambios sólo serán visibles al agregar una nueva instancia.

Un patrón sincronizado mostraría inmediatamente los cambios en todo el sitio web.. Sin embargo, no podremos editar el contenido individualmente. El contenido sería el mismo en todos los lugares donde se utilice el patrón.

A pesar de este hecho, no estamos estancados. Podemos crear un nuevo patrón de bloques si superamos el actual. Aún así, es bueno saber la diferencia entre patrones sincronizados y no sincronizados.

Nota: Una nueva característica en WordPress 6.5, anulaciones de patrones sincronizados, permitirá cambios para cada instancia. Consulte este tutorial para obtener más detalles.

Utilice patrones de bloques personalizados para aumentar la coherencia y la eficiencia

Los patrones de bloques siguen mejorando. Y crearlos y administrarlos dentro de WordPress agrega otra capa de conveniencia.

Tener un archivo de patrones por sitio resulta útil. Puede suponer un gran ahorro de tiempo. Pueden acelerar el proceso de construcción. Además, facilitarán las actualizaciones de contenido.

Si desea compartir su trabajo, es fácil hacerlo a través de las funciones de exportación e importación. Puede instalar patrones en sitios adicionales o enviarlos al Directorio de patrones.

Tómate un tiempo para experimentar con la creación de patrones de bloques personalizados. ¡Te sorprenderá lo que puedes lograr!