Patrones de bloques de WordPress 101: ¿Qué son? Y cómo usarlos

¿Quiere ahorrar tiempo y crear diseños más profesionales en el editor de bloques de WordPress? Si es así, aprender sobre los patrones de bloqueo de WordPress podría ser justo lo que necesita.

Con los patrones de bloques, puede insertar un diseño prefabricado, modificarlo para satisfacer sus necesidades y estar listo para comenzar. Este es un gran ahorro de tiempo. Y, si no es diseñador, los patrones de bloques también son útiles porque le permiten utilizar diseños más exclusivos incluso si no tiene los conocimientos necesarios para crear esos diseños desde cero.

En esta publicación, cubriremos todo lo que necesita saber sobre los patrones de bloqueo de WordPress:

• Qué son los patrones de bloques de WordPress y en qué se diferencian de los bloques reutilizables.
• Cómo usar patrones de bloques en el editor.
• Dónde encontrar nuevos patrones de bloques y cómo usarlos.
• Cómo crear tus propios patrones de bloques sin código.

¿Qué son los patrones de bloqueo de WordPress?

Los patrones de bloques de WordPress son esencialmente solo plantillas hechas de bloques.

Pueden contener un solo bloque o varios bloques dispuestos en ciertos diseños. Además de los bloques en sí, los patrones de bloques también incluirán la configuración de esos bloques ( como configurar un botón para que tenga un color determinado ).

Puede encontrar patrones de bloque para plantillas de página completa. O, más comúnmente, encontrará patrones de bloque para ciertas secciones que quizás quiera usar en una página. Luego puede armar múltiples patrones de bloques como Legos para construir su diseño.

Por ejemplo, supongamos que desea crear una sección que tenga una imagen de fondo, texto de encabezado y un botón. Puede configurar esto manualmente usando el editor de bloques. Pero con un patrón de bloque, puede insertar un diseño prefabricado con ese diseño y luego personalizarlo para que coincida con su contenido.

Como mencioné anteriormente, los principales beneficios de usar patrones de bloques de WordPress son los siguientes:

1. Te ahorran tiempo.
2. Facilitan la creación de diseños más complicados, porque es posible que no tenga los conocimientos para crear ciertos tipos de diseños usted mismo.

Patrones de bloques vs bloques reutilizables

Ahora que sabe qué son los patrones de bloques de WordPress, podría estar pensando que se parecen mucho a los bloques reutilizables de WordPress, que son una característica central que se introdujo antes de los patrones de bloques.

Un bloque reutilizable también es una colección de uno o más bloques que puede insertar fácilmente en su contenido.

Son similares en que ambos le permiten insertar rápidamente un diseño prefabricado, pero tienen una gran diferencia:

• Los patrones de bloques son un punto de partida para su diseño . Puede usarlos para importar el diseño básico que desea usar, pero los personalizará cada vez y cada instancia de un patrón de bloque será diferente.
• Los bloques reutilizables van a ser los mismos en todos los casos . Cada instancia de un bloque reutilizable siempre será la misma y si actualiza el diseño del bloque reutilizable en un lugar, esos cambios se aplicarán automáticamente a cada instancia del bloque reutilizable.

Aquí hay un ejemplo de cuándo podría usar cada uno:

Primero, supongamos que tiene un formato especial para insertar citas en su contenido. Entonces, cada vez que inserta una cita, desea usar exactamente la misma disposición de bloques para mantener la coherencia.

Si cada cotización va a ser diferente, querrá usar un patrón de bloque para esto. Puede insertar el patrón de bloque para configurar el formato básico y luego agregar el texto de cita único.

Ahora, supongamos que tiene un llamado a la acción (CTA) para que las personas se unan a su lista de correo electrónico que desea incluir al final de cada publicación de blog. Desea que este CTA sea exactamente el mismo en todos los casos y también desea poder actualizarlo en el futuro.

Para este caso de uso, querrá usar un bloque reutilizable. El bloque reutilizable se asegurará de que todas las instancias de tu CTA sean iguales. Y si alguna vez desea cambiar el CTA, solo necesita actualizar el bloque reutilizable una vez y esos cambios se aplicarán a cada instancia.

Cómo usar los patrones de bloques de WordPress

Puede insertar patrones de bloques a través de la misma interfaz que utiliza para insertar bloques.

Para comenzar, abra el editor de la pieza de contenido donde desea insertar un patrón de bloque. Luego, haga clic en el ícono más en la esquina superior izquierda para abrir la interfaz del insertador de contenido.

En la barra lateral que aparece, haga clic en la pestaña Patrones . Luego puede usar el menú desplegable para filtrar diferentes tipos de patrones.

Cuando encuentre un patrón que le guste, todo lo que necesita hacer es hacer clic en él para insertarlo en su contenido:

Una vez que inserte el patrón de bloques, puede editar todos los bloques individuales tal como lo haría si hubiera creado el diseño manualmente:

¡Y eso es! Si desea insertar otro patrón de bloques, puede repetir el mismo proceso. El patrón de bloque se insertará donde haya colocado el cursor en el editor.

Cómo encontrar y usar nuevos patrones de bloques de WordPress

Para ayudarlo a encontrar nuevos patrones de bloques, el equipo de WordPress creó una biblioteca oficial de patrones de bloques en WordPress. Puedes acceder a él haciendo clic aquí.

Puede usar los filtros para explorar todos los patrones de bloques y hacer clic en un resultado para obtener una vista previa. Si encuentra un patrón de bloques que le gusta, simplemente haga clic en el botón Copiar patrón para copiar el patrón en su portapapeles:

Ahora, abra el editor de la pieza de contenido en la que desea agregar el patrón de bloque y péguelo, como si pegara texto normal, ya sea haciendo clic con el botón derecho y eligiendo pegar o usando un atajo de teclado como Ctrl + V (o Cmd + V en Mac).

Y eso es todo: debería ver aparecer el patrón de bloque completo donde lo haya pegado:

Además de la biblioteca oficial de patrones de bloques en WordPress.org, también puede encontrar directorios de terceros como ShareABlock y la biblioteca de plantillas de Gutenberg Hub (que utiliza el mismo enfoque de copiar y pegar que la biblioteca oficial).

También puede encontrar una serie de complementos que le permiten insertar patrones y plantillas de bloques, aunque pueden usar su propia solución personalizada en lugar de usar la función de patrón de bloques nativo. De cualquier manera, el resultado final es el mismo. Puede encontrar algunas de las mejores opciones en nuestra publicación sobre complementos de plantilla de Gutenberg.

Cómo crear tus propios patrones de bloques de WordPress sin código

A partir de ahora, el editor de bloques principal de WordPress no le permite crear sus propios patrones de bloques a menos que sepa codificar, lo cual es un poco fastidioso.

Afortunadamente, como era de esperar de WordPress, existen complementos que solucionan esto.

Mi favorito personal es el complemento gratuito Block Pattern Builder de Justin Tadlock. Esencialmente, este complemento le permite crear su propio diseño usando el editor de bloques y luego guardarlo como un patrón de bloques. De modo que puede diseñar su patrón utilizando el editor, guardarlo como un patrón y luego insertarlo fácilmente como cualquier otro patrón.

Honestamente, es un poco extraño que esta característica no esté en el software principal de WordPress, pero no es un gran problema porque puede resolverlo simplemente instalando un complemento gratuito.

Para comenzar, instale y active el complemento gratuito Block Pattern Builder de WordPress.org. Estoy usando el complemento antes mencionado de Justin Tadlock, pero hay un complemento con el mismo nombre de BlockMeister que parece ofrecer la misma funcionalidad con un poco más de funciones.

Luego, abra el editor normal y cree el diseño que desea guardar. Una vez que haya hecho eso, seleccione todos los bloques que desea incluir en su patrón de bloques y haga clic en el ícono de tres puntos . Luego, seleccione la opción Agregar a patrones de bloques :

A continuación, puede darle un nombre:

Y eso es todo: ahora puede insertarlo como cualquier otro patrón de bloque. Por defecto, estará en la sección “Sin categorizar”:

Además de trabajar desde el editor, también obtendrá una pestaña dedicada a Patrones de bloques en su panel de WordPress para administrar y crear patrones de bloques.

Comience hoy mismo con los patrones de bloques

Usar patrones de bloques es bastante fácil: puede insertarlos como un bloque. Y una vez que los inserta, puede editar los bloques en el patrón como si hubiera creado el diseño usted mismo.

Para tener más flexibilidad, hay algunas formas de acceder a nuevos patrones de bloques:

1. Puede usar la Biblioteca de patrones de bloques oficial en WordPress.org o uno de los sitios web de bibliotecas de terceros. Todo lo que necesita hacer es copiar y pegar entre las bibliotecas y el editor de WordPress.
2. Puede usar uno de los complementos de plantilla de Gutenberg que recopilamos. No todos estos complementos utilizan la función de patrones de bloques nativos, pero cumplen exactamente el mismo propósito y función.
3. Puede diseñar sus propios patrones de bloques usando el editor y un complemento como Block Pattern Builder. Una vez que guarde sus diseños, puede reutilizarlos fácilmente en el futuro.

Para conocer otras formas de mejorar su forma de trabajar en el editor de bloques, consulte nuestra guía sobre cómo aprovechar al máximo el editor de bloques y nuestra colección de los mejores complementos de bloques.

¿Todavía tienes alguna pregunta sobre los patrones de bloqueo de WordPress? Háznoslo saber en los comentarios e intentaremos ayudarte.