Instala y activa el plugin Reusable Blocks Extended.
Con este plugin, además de un acceso directo a la lista de bloques reutilizables, podrás:
- Llevar diseños con bloques a las áreas de widgets preparadas en el theme.
- Convertir bloques reutilizables a patrones de bloques.
¿Por qué empezamos esta lección hablando de bloques reutilizables si el curso es de patrones de bloques? Sencillamente, porque para crear -como usuario final- patrones de bloques asociados al theme que estás desarrollando, el mecanismo más sencillo es hacerlo convirtiendo primero el diseño a bloque reutilizable y, luego, obteniendo el código HTML correspondiente a partir de él.
Los bloques reutilizables llevan consigo un archivo en formato JSON que se puede descargar desde la lista de bloques reutilizables. Ese archivo JSON nos servirá para extraer el código HTML que necesitamos para registrar el patrón de bloques asociado, pero también nos puede ser útil para llevar diseños a otras instalaciones de WordPress, en donde se podrá importar el JSON. El mecanismo es muy interesante para trabajar colaborativamente en los mismos diseños, por parte de co-workers en instalaciones distintas.
También, existe la posibilidad de convertir un bloque reutilizable en patrón de bloques, desde la lista de bloques reutilizables; pero eso solo será útil en el caso de aprovechar patrones de bloques en esa instalación de WordPress. Si lo que queremos es desarrollar un theme que lleve asociado patrones de bloques, entonces tendremos que definir éstos a nivel de código, por ejemplo, mediante el archivo functions.php, uno de los elementos que hacen funcionar el theme activo de tu instalación de WordPress.
Para convertir diseños a bloques reutilizables y exportar a JSON no necesitas el plugin Reusable Blocks Extended. Lo que aporta este plugin, entre otras cosas, es el acceso directo a la lista de bloques reutilizables desde el sidebar del Administrador de WordPress y la posible conversión a patrones de bloques para uso dentro de la instalación de WordPress en la que estemos.
La figura 1 muestra cómo convertir un diseño, que tengas en el editor, a bloque reutilizable: selecciona el bloque contenedor del patrón (aquél que contiene a todos los demás) y haz clic en los tres puntos suspensivos. Después, elige la opción «Convertir a bloque reutilizable». Aplícale un nombre y guárdalo.
Convertir diseños a bloques reutilizables puede ser muy útil si necesitas repetir ese diseño en varios lugares de tu sitio web. Y, además, con la ventaja de que si modificas una de las instancias del bloque reutilizables, el cambio se verá automáticamente reflejado en todas las instancias. A diferencia del patrón de bloques, que también puedes insertar en ubicaciones distintas pero si quieres modificarlo, tienes que hacer el cambio en todas las instancias existentes.
Pero otra utilidad es poder exportar tus diseños a otros sitios web. Aquí entra en juego el trabajo colaborativo, por ejemplo.
Y, especialmente, convertir un diseño a bloque reutilizable posee otra gran utilidad: obtener parte del código para registrarlo. Es decir, si quieres crear tus propios patrones de bloques, bien para añadirlos a la lista de patrones disponibles para insertar; o bien con el fin de incluirlos en un theme que estés desarrollando; será preciso codificar ese registro en el archivo functions.php (existen otros mecanismos para no hacerlo desde el archivo functions.php pero aquí veremos cómo hacerlo en functions.php).
Una vez que tengas el diseño convertido a bloque reutilizable, acude al apartado «Bloques reutilizables» del menú lateral del administrador de WordPress. Si pones el puntero del ratón encima del nombre verás la opción «Exportar como JSON» (ver figura 2).
Descargar el archivo JSON del bloque reutilizable nos va a servir para dos cosas:
- Poder enviarlo a un colaborador o llevarlo a otra de tus instalaciones de WordPress.
- Obtener directamente el código para registrarlo, en el caso de que tu intención sea crear un patrón de bloques, sin necesidad ni siquiera de escapar los caracteres (poner la barra inclinada \ delante de las posibles comillas que existan, por ejemplo).
Si eres un co-worker o quieres importar un bloque reutilizable en otro de tus sitios web, haz clic en el botón Importar de JSON (ver figura 3).
Pero si te fijas en la figura 3, en la columna «Conversión de patrón», se ve un botón que dice «Convertir a patrón de bloques». Esto es gracias al plugin Reusable Blocks Extended y, en realidad, con esta opción nos ahorramos tener que obtener el código mediante la descarga del archivo JSON y registrar el patrón de bloques de la forma que veremos en la lección 4 de este curso. Sin embargo, eso solo sirve para personalizar la web en la que estamos; si nuestro propósito es crear un theme con patrones de bloques para distribuir a usuarios finales, entonces tendremos que añadir el registro de patrones mediante la codificación en el archivo functions.php.
Si conviertes bloques reutilizables en patrones, mediante el botón de la columna «Conversión de patrón» en la lista de bloques reutilizables, los verás en la pestaña «Patrones» del insertador de bloques dentro de la categoría «Convertido de bloques reutilizables» (ver figura 4).
Una vez convertido un bloque reutilizable a patrón de bloques, puedes borrarlo desde la misma columna «Conversión de patrón» (ver figura 5).
Sin el plugin Reusable Blocks Extended, la lista de bloques reutilizables se obtiene desde dentro del editor, yendo a los tres puntos suspensivos de la barra de herramientas y eligiendo la opción «Gestionar todos los bloques reutilizables» del apartado «Herramientas» (ver figura 6).
Índice curso
- ¿Qué es un patrón de bloques y para qué sirve?
- Ejemplo de uso de patrones de bloques: confección de un sitio web de una sola página
- Importar y exportar diseños realizados en el editor de bloques
- Código para registrar un patrón de bloques
- Creación de un patrón de bloques a partir de bloques nativos, sin código CSS
- Crear un patrón de bloques con código CSS