Curso de patrones de bloques (I): ¿Qué es un patrón de bloques y para qué sirve?

Un patrón de bloques es un diseño predefinido que puedes insertar en el editor. Puedes usarlo tal como se presenta o modificarlo a tu gusto.

Dentro del editor de bloques de WordPress, haz clic en la pestaña «Patrones» del insertador de bloques (recuadro azul con un +, que verás en la barra de herramientas, arriba de la pantalla). Allí se encuentran los patrones de bloques predeterminados divididos por categorías (ver figura 1). Comprueba si hay una opción en el desplegable de categorías, justo debajo de las pestañas, correspondiente a tu theme activo.

Por ejemplo, el theme Blogpocket Sustie contiene 13 patrones de bloques especialmente desarrollados para él, además de los preterminados. Si se hace clic en el desplegable de categorías en la opción «Blogpocket Nineteen» (porque los patrones son comunes a ese theme) se muestran todos los patrones de bloques listos para usar (ver figura 2).

Si se inserta un patrón de bloques dentro del editor puede modificarse, haciendo clic en cada una de sus partes (bloques a su vez), o no (ver figura 3). Los patrones de bloques sirven para proporcionar al usuario final diseños predeterminados que le ahorren trabajo. Puedes añadirlos cuantas veces desees, en distintos lugares de tu sitio web (páginas, posts, etc.) pero no se comportan como los bloques reutilizables. En éstos últimos, si se hace un cambio en cualquier instancia, la modificación se ve reflejada automáticamente en el resto de instancias existentes. Sin embargo, eso no sucede en los patrones de bloques. Si tienes el mismo patrón de bloques en varias ubicaciones y quieres realizar un cambio, debes efectuarlo en todos los lugares donde se encuentre.

En esta demo de Blogpocket Nineteen puedes ver algunos de los patrones de bloques que se sirven con el theme.

Índice del curso

1. ¿Qué es un patrón de bloques y para qué sirve?
2. Ejemplo de uso de patrones de bloques: confección de un sitio web de una sola página
3. Importar y exportar diseños realizados en el editor de bloques
4. Código para registrar un patrón de bloques
5. Creación de un patrón de bloques a partir de bloques nativos, sin código CSS
6. Crear un patrón de bloques con código CSS