Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 12
En las partes anteriores de esta serie hemos aprendido a crear un tema Full Site Editing (FSE) desde cero. Para ello, hemos ido construyendo y personalizando las diferentes plantillas que WordPress utiliza para mostrar el contenido de nuestro sitio. Veamos a continuación los patrones de bloques en WordPress.
Una vez definida la estructura principal del tema, comenzaremos a trabajar con los patrones de bloques en WordPress. Esta herramienta nos permitirá reutilizar composiciones de bloques dentro de nuestro tema Full Site Editing.
En esta Parte 12 aprenderemos qué son los patrones de bloques. Qué ventajas ofrecen dentro de un tema Full Site Editing. También veremos cómo crear nuestros propios patrones para incorporarlos al tema que estamos desarrollando.
Para ello conoceremos la función de la carpeta patterns. Veremos la estructura necesaria para crear un patrón y construiremos un ejemplo práctico. Posteriormente lo podremos insertar desde el Editor de WordPress.
Al finalizar esta parte, nuestro tema contará con su primer patrón de bloques personalizado. Además, tendremos una nueva herramienta para reutilizar diseños y seguir ampliando nuestro tema Full Site Editing de forma más organizada.
¿Qué son los patrones de bloques en WordPress?
Los patrones de bloques son conjuntos de bloques previamente diseñados y organizados que podemos insertar en diferentes partes de nuestro sitio WordPress.
Nos permiten reutilizar una determinada estructura o diseño sin necesidad de volver a construirlo bloque a bloque cada vez que lo necesitemos.
En un tema Full Site Editing, además, podemos crear nuestros propios patrones para que estén disponibles desde el Editor de WordPress.
Patrones del tema y patrones creados desde WordPress
Los patrones creados desde el Editor de WordPress se almacenan en la base de datos y quedan asociados al sitio donde los hemos creado.
Por otro lado, podemos incluir patrones directamente en nuestro tema mediante archivos almacenados en la carpeta patterns. De esta forma, los patrones formarán parte del propio tema y estarán disponibles cuando este se encuentre activo.
En nuestro caso utilizaremos esta segunda opción, ya que queremos continuar desarrollando los archivos de nuestro tema Full Site Editing.
Creando la carpeta patterns
Para incluir nuestros propios patrones dentro del tema necesitamos crear una nueva carpeta llamada patterns en el directorio raíz del tema, al mismo nivel que las carpetas templates y parts.
Para incluir nuestros propios patrones dentro del tema necesitamos crear una nueva carpeta llamada patterns. Esta carpeta debe situarse en el directorio raíz del tema, al mismo nivel que las carpetas templates y parts.
Dentro de la carpeta patterns iremos creando los archivos que contendrán nuestros patrones personalizados. Cada patrón se guardará en un archivo PHP. En cambio, las plantillas y partes de plantilla que hemos creado anteriormente utilizan archivos HTML.
Por ejemplo, si queremos crear un patrón llamado Llamada a la acción, podríamos utilizar:
patterns/
└── llamada-a-la-accion.php
WordPress puede reconocer automáticamente los archivos de patrones incluidos en esta carpeta, siempre que contengan la información necesaria en su cabecera.
Creando nuestro primer patrón
Dentro de la carpeta patterns creamos un nuevo archivo llamado: llamada-a-la-accion.php
Antes de añadir los bloques debemos incluir una cabecera que proporcione a WordPress la información necesaria para identificar el patrón:
En esta cabecera encontramos tres datos principales:
- Title: nombre con el que aparecerá el patrón en el Editor.
- Slug: identificador único del patrón. Utilizamos primero el text domain o identificador de nuestro tema y después el nombre del patrón.
- Categories: categoría en la que WordPress mostrará el patrón dentro del selector de patrones.
Debajo de esta cabecera añadiremos el código de bloques que formará nuestra llamada a la acción.
Diseñando nuestro patrón desde el Editor
Para construir nuestro primer patrón podemos utilizar el Editor de una página o entrada y crear allí la composición de bloques que posteriormente convertiremos en nuestro patrón.
Vamos a mantener el ejemplo sencillo. Insertamos un bloque Grupo y dentro colocamos:
Grupo
├── Espaciador
├── Encabezado
├── Espaciador
├── Párrafo
├── Espaciador
├── Botones
│ └── Contacta conmigo
└── Espaciador
Una vez terminado el diseño, ya tenemos preparada la composición de bloques que utilizaremos como nuestro primer patrón. En nuestro caso hemos creado una sencilla llamada a la acción formada por un encabezado, un párrafo y un botón, utilizando varios bloques Espaciador para controlar la separación entre los diferentes elementos.
El siguiente paso será copiar el código generado por estos bloques e incorporarlo al archivo llamada-a-la-accion.php que hemos creado anteriormente dentro de la carpeta patterns.
Copiando el código de nuestro patrón
Una vez terminado el diseño de nuestra llamada a la acción, necesitamos obtener el código de bloques que WordPress ha generado para poder incorporarlo a nuestro patrón.
Para ello, seleccionamos el bloque Grupo que contiene todos los elementos de nuestra llamada a la acción y, desde el menú de los tres puntos, elegimos Copiar.
Pegamos en el archivo llamada-a-la-accion.php.
Comprobando nuestro patrón en WordPress
Una vez guardado el archivo llamada-a-la-accion.php, podemos comprobar que WordPress ha reconocido correctamente nuestro patrón.
Vamos por ejemplo a la plantilla Índice, pulsamos el botón + para acceder al insertador de bloques y seleccionamos Patrones → Destacados.
Nuestro patrón aparecerá con el nombre Llamada a la acción, ya que este es el valor que hemos establecido mediante Title en la cabecera. Del mismo modo, aparece dentro de Destacados porque hemos utilizado featured en Categories.
Al seleccionar el patrón podremos insertarlo y comprobar que contiene la misma composición de bloques que habíamos diseñado anteriormente desde el Editor.
De esta forma hemos comprobado que el archivo situado en la carpeta patterns ha sido reconocido por WordPress y que nuestro primer patrón ya forma parte del tema.
Importante: después de la cabecera debemos cerrar el código PHP mediante ?>. A continuación se incorpora el código de bloques que formará el patrón.
WordPress dispone de diferentes categorías en las que podemos clasificar nuestros patrones. Un mismo patrón puede pertenecer a varias categorías separándolas mediante comas.
Una vez insertado el patrón en una entrada o página, podemos modificar libremente los bloques que lo forman, cambiar sus textos, colores, imágenes o cualquier otra opción disponible.
Estos cambios afectan únicamente a la copia que hemos insertado en ese contenido y no modifican el patrón original almacenado en nuestro tema. De esta forma podemos utilizar un mismo patrón como punto de partida en diferentes lugares del sitio y personalizar cada una de sus apariciones de forma independiente.
Las categorías de los patrones
La propiedad Categories de la cabecera nos permite indicar en qué categoría del Editor de WordPress queremos que aparezca nuestro patrón.
En nuestro ejemplo hemos utilizado: Categories: featured
Por este motivo, el patrón Llamada a la acción aparece dentro de la categoría Destacados.
WordPress dispone de diferentes categorías para organizar los patrones. Por ejemplo, si queremos que nuestro patrón aparezca dentro de Llamada a la acción, podemos utilizar: Categories: call-to-action
Podemos consultar las categorías disponibles desde el insertador de bloques, seleccionando la pestaña Patrones. En nuestro caso encontramos categorías como Acerca de, Banners, Cabeceras, Destacados, Entradas, Galería, Llamada a la acción, Pies de página, Recomendaciones y Texto.
También podemos asignar un mismo patrón a más de una categoría, separando sus identificadores mediante comas:
Categories: featured, call-to-action.
De esta forma, el patrón aparecerá tanto en Destacados como en Llamada a la acción, facilitando su localización desde diferentes categorías del insertador.
El modo de desarrollo del tema
Durante el desarrollo de un tema podemos crear o modificar los archivos de la carpeta patterns. Para facilitar que WordPress detecte estos cambios durante el desarrollo podemos utilizar la constante WP_DEVELOPMENT_MODE.
En nuestro archivo wp_config.php podemos indicar que estamos desarrollando un tema mediante:
define( ‘WP_DEVELOPMENT_MODE’, ‘theme’ );
Es importante que esta constante se defina antes de que WordPress cargue wp-settings.php, que se encuentra dentro del mismo archivo. Por ejemplo:
define( ‘WP_ENVIRONMENT_TYPE’, ‘local’ );
define( ‘WP_DEVELOPMENT_MODE’, ‘theme’ );
En nuestro caso, WP_DEVELOPMENT se encontraba después de la carga de wp-settings.php, por lo que WordPress ya había iniciado su proceso de carga antes de que se definiera esta constante. Al situarla antes de wp-settings.php, los nuevos patrones y las modificaciones realizadas en ellos comenzaron a mostrarse correctamente en el Editor.
Conclusión
En esta parte hemos aprendido a crear nuestros propios patrones de bloques e incorporarlos directamente al tema mediante la carpeta patterns.
Partiendo de un diseño creado desde el Editor, hemos obtenido su código de bloques y creado nuestro primer patrón personalizado, comprobando posteriormente que WordPress lo reconoce y nos permite utilizarlo en diferentes partes del sitio.
También hemos visto cómo organizar nuestros patrones mediante categorías y cómo un mismo patrón puede pertenecer a varias de ellas.
Con ello incorporamos a nuestro tema una nueva herramienta que nos permitirá reutilizar diseños y estructuras de bloques, facilitando la creación de nuevas páginas y contenidos a medida que continuemos desarrollándolo.
En la siguiente parte daremos un paso más y aprenderemos a personalizar y organizar nuestros patrones, añadiendo información que facilite su identificación y localización desde el Editor de WordPress. También crearemos un nuevo patrón para poner en práctica estos conceptos.
Puedes ampliar conocimientos visitando:
Patrones
Registro de patrones
wp_get_development_mode()