Para crear diseños con el editor de bloques, no es necesario utilizar ninguna colección de bloques de terceros. Existen plugins como Genesis Blocks, Stackable, Coblocks, etc. que añaden bloques a la lista de bloques nativos de WordPress. Pero se puede diseñar una página web solo con bloques nativos.
Como usuario final, quieres diseñar sin código. Por lo tanto, nos limitaremos a las posibilidades de configuración que ofrecen los bloques nativos. Estas posibilidades se reducen a lo que ofrezca cada bloque en la botonadura superior (la que aparece arriba del bloque cuando haces clic en él) y en las opciones de configuración mostradas en la rueda dentada (en el sidebar de la derecha del editor).
Así trabajaremos para conseguir un patrón de bloques de carácter universal, que servirá en cualquier instalación de WordPress donde se instale el theme.
Si utilizamos un plugin como Editor Plus, podemos aplicar CSS sin saber CSS pero entonces, el patrón de bloques así generado solo servirá en aquellas instalaciones de WordPress donde se instale el theme que tengan, además, instalado dicho plugin. Si tenemos instalado Editor Plus, veremos en las opciones de configuración del bloque, haciendo clic en la rueda dentada, una serie de apartados que corresponden a diversos parámetros CSS (ver figura 1.)
Vamos, por lo tanto, a suponer que queremos crear un patrón de bloques, a partir de un diseño realizado sin código y sin emplear recursos del estilo Editor Plus.
Primero, crea el diseño utilizando solo bloques nativos, ajustando cada uno de ellos mediante las configuraciones permitidas. No uses, para ello ninguno de los plugins tipo Editor Plus.
Algo que tienes que hacer, sobre todo si vas a distribuir el theme que estás desarrollando o, incluso si vas a exportar el bloque reutilizable correspondiente, es modificar las URLs de las imágenes a nivel del código de los bloques que las incluyan. El motivo es que apuntan a una ubicación dentro de tu hosting o servidor donde estás desarrollando. Si es un entorno local, eso provocará una imagen not found; y si estás en Internet, es probable que la imagen se vea pero tendrás peticiones desde otros sitios, lo cual no es recomendable.
Entra en el modo «Edición de código», busca las URLs de todas las imágenes que se usen en el diseño y cámbialas por URLs de un sitio en el que no tengas problemas para servirlas. Por ejemplo, convendría utilizar un CDN o sitios como Cloudinary.
Cuando tengas todo el diseño finalizado, conviértelo a bloque reutilizable. Ve, después, a la lista de bloques reutilizables y descarga el archivo JSON (revisa la lección 3).
Ábre el archivo JSON y copia el valor del parámetro «content» (lo que hay dentro de las comilllas). Ingresa en el archivo functions.php de tu theme activo y añade las instrucciones para registrar un patrón de bloques, pegando el valor que tienes en el portapapeles como valor del parámetro «content» en la función «register_block_pattern». Comprueba que tienes también la función para definir una categoría. Puedes repasar la lección 4.
Si has llegado hasta aquí, probablemente sea porque eres un usuario final inquieto, con ganas de aprender más; o un desarrollador aprendiz que quiere crear un theme con patrones de bloques asociados.
Si tu propósito solo es crear patrones de bloques para tu uso dentro de la plantilla que tienes activa, puedes hacerlo simplemente convirtiendo tu diseño en bloque reutilizable y, luego, en la lista de bloques reutilizables, convirtiendo a patrón de bloques. Todo con un clic.
Espero que te haya sido útil el curso de patrones de bloques para el usuario final.
Í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