Cómo crear un tema Full Site Editing (FSE) desde cero. Parte 13

En la Parte 12 aprendimos a crear patrones de bloques en WordPress e incorporarlos directamente a nuestro tema Full Site Editing mediante la carpeta patterns. En esta entrega veremos cómo personalizar patrones de WordPress y organizarlos para facilitar su identificación y localización desde el Editor.

Ahora vamos a dar un paso más y veremos cómo personalizar y organizar nuestros patrones para facilitar su identificación y localización desde el Editor de WordPress.

Para ello trabajaremos con el patrón que ya hemos creado y añadiremos un nuevo patrón para poner en práctica estos conceptos.

¿Qué información podemos añadir a un patrón?

Cuando creamos un patrón de bloques, es decir, personalizar patrones de WordPress, se necesita determinada información para identificarlo y mostrarlo correctamente en el Editor. En la Parte 12 utilizamos los campos Title, Slug y Categories para definir nuestro primer patrón.

Sin embargo, la cabecera de un patrón puede incluir más información. Estos datos nos permiten describir mejor su contenido y facilitar que los usuarios puedan localizarlo y utilizarlo desde el Editor de WordPress.

A continuación veremos algunos de los campos que podemos añadir a la cabecera de nuestros patrones y comprobaremos cómo afectan a su organización y localización.

Añadiendo una descripción al patrón

Nuestro patrón ya dispone de la información básica que añadimos en la Parte 12, la cual vamos a recordar:

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.

Vamos a modificar la cabecera de nuestro patrón:

¿Qué conseguimos con esto?

La descripción no modifica el diseño del patrón. Su función es aportar información adicional sobre él, algo especialmente útil cuando nuestro tema empieza a incorporar varios patrones y necesitamos distinguirlos fácilmente.

Por tanto, podemos pensar en estos datos de la cabecera como la información que describe y organiza el patrón, mientras que el código de bloques que aparece después de la cabecera es el que define su contenido y diseño.

Nota: La documentación actual de WordPress contempla, además de Description, otros campos como Keywords, Viewport Width, Inserter, Block Types, Post Types y Template Types.

Añadiendo palabras clave al patrón

Además de la descripción, podemos añadir palabras clave mediante la propiedad Keywords. Estas palabras ayudan a localizar el patrón desde el buscador del insertador de bloques.

Vamos a modificar de nuevo la cabecera de nuestro patrón llamada-a-la-accion.php:

En este caso hemos añadido tres palabras relacionadas con el contenido de nuestro patrón: contacto, ayuda y WordPress.

De esta forma, cuando alguien busque alguno de estos términos en el insertador de bloques, WordPress podrá utilizar las palabras clave para encontrar nuestro patrón.

¿Por qué son útiles las palabras clave?

Cuando nuestro tema tenga varios patrones, puede resultar complicado localizar uno concreto simplemente recorriendo las categorías disponibles. Las palabras clave permiten asociar diferentes términos con un mismo patrón y facilitan su búsqueda.

Por ejemplo, aunque nuestro patrón se llame «Llamada a la acción», un usuario podría buscarlo utilizando términos como contacto o ayuda. Las palabras clave permiten que esos términos estén asociados al patrón sin necesidad de cambiar su nombre.

Por tanto, Title, Description y Keywords cumplen funciones diferentes:

• Title → identifica el patrón.
• Description → explica para qué sirve.
• Keywords → facilita su localización mediante búsquedas.

Personalizando y creando patrones de WordPress

Ahora que conocemos cómo añadir información a nuestros patrones, vamos a crear uno nuevo para nuestro tema Full Site Editing.

En la Parte 12 creamos el patrón llamada-a-la-accion.php. En esta ocasión diseñaremos una composición diferente y la guardaremos en la carpeta patterns de nuestro tema.

Para ello, seguiremos el mismo procedimiento que utilizamos anteriormente: crearemos el diseño desde el Editor de WordPress, copiaremos el código de los bloques y lo incorporaremos a un nuevo archivo PHP.

De esta forma, comprobaremos cómo podemos ampliar nuestra colección de patrones, personalizar patrones de WordPress y reutilizar diferentes composiciones de bloques en nuestro sitio.

Paso 1. Personalizando y creando patrones de WordPress. Diseñar el nuevo patrón

Hagamos una presentación de servicios con tres columnas.

Grupo como contenedor principal.

• Encabezado con el título de la sección.
• Párrafo introductorio.
• Columnas con tres bloques de contenido, cada uno con un encabezado y un párrafo.

Paso 2. Personalizando y creando patrones de WordPress. Crear el diseño en WordPress

• Entra en Apariencia → Editor.
• Abre una página o plantilla que puedas utilizar para preparar el diseño.
• Inserta los bloques siguiendo la estructura anterior.
• Personaliza el contenido y los estilos para que encajen con nuestro tema.

Para crear el patrón, he elegido la plantilla Inicio de blog. Dentro de esta plantilla, he añadido el diseño Servicios de WordPress al final del contenido del blog, justo antes del pie de página.

Grupo: ancho amplio de 900 px y clase CSS patron-servicios.

Encabezado: H2, color #cc454e.

Espaciador: 20px

Párrafo: color #000000.

Espaciador: 20px

Columnas: tres

Para ajustar el ancho del diseño y personalizar el aspecto de las tarjetas, añadimos las siguientes reglas CSS a la hoja de estilos style.css de nuestro tema.

   /* Patrón de presentación de servicios */
      .patron-servicios {
       max-width: 900px;
       margin-inline: auto;
   }
   /* Columnas del patrón */
   .patron-servicios .wp-block-columns {
       gap: 12px;
   }
   .patron-servicios .wp-block-column {
       flex: 1 1 0;
       min-width: 0;
       padding: 16px 8px;
       background-color: #FFFAF4;
       border: 1px solid #e5b9b4;
       border-radius: 12px;
       box-sizing: border-box;
   }

   @media (max-width: 600px) {
       .patron-servicios {
           max-width: 100%;
       }
   }

Al crear nuestro diseño desde el Editor de WordPress, comprobamos que el grupo principal ocupaba todo el ancho disponible y que las tarjetas quedaban demasiado estrechas. Por eso, hemos limitado el ancho del grupo principal a 900 px para distribuir mejor el espacio entre las columnas y conseguir que los textos se lean cómodamente. Además, hemos añadido la clase CSS patron-servicios para aplicar los estilos específicos de nuestro diseño sin afectar al resto del sitio.

Paso 3. Personalizando y creando patrones de WordPress. Creando el archivo PHP del patrón

Copiar el código desde el Editor de WordPress. Abriremos el Editor de código y copiaremos el código correspondiente al diseño que hemos creado.

Crear el archivo PHP. En Visual Studio Code, dentro de la carpeta patterns de nuestro tema crearemos el archivo presentacion-servicios.php.

Añadir la cabecera del patrón. Incorporaremos los metadatos necesarios, como Title, Slug, Description, Keywords, Categories e Inserte.

Pegar el código de bloques. Debajo de la cabecera, pegamos el código que hemos copiado del Editor de WordPress.

Comprobar el resultado. Guardamos el archivo y verificamos que WordPress reconoce el nuevo patrón en nuestra instalación.

Si accedemos al administrador de WordPress y entramos en Patrones, dentro de la categoría Texto encontraremos Presentación de servicios, el patrón que acabamos de crear.

Es importante que todos los metadatos del patrón estén dentro del bloque de PHP, delimitado por las etiquetas de apertura <php y cierre ?>. Además, conviene comprobar si podemos insertar el patrón en cualquier plantilla de nuestro tema y verificar que se muestra correctamente. De esta forma, habremos conseguido personalizar patrones de WordPress y ampliar nuestra colección de diseños reutilizables.

Puedes ampliar conocimientos visitando:

Patrones
Registro de patrones
wp_get_development_mode()

Más tutoriales de WordPress

Conclusión

A lo largo de todas estas entradas hemos aprendido a crear un tema Full Site Editing desde cero, construyendo sus plantillas, organizando sus partes y creando patrones de bloques reutilizables.

Hemos trabajado directamente con los archivos del tema y comprobado cómo WordPress utiliza estas estructuras para construir el diseño de nuestro sitio web. Además, hemos aprendido a crear nuestros propios patrones y a personalizarlos mediante metadatos, descripciones, palabras clave y categorías para facilitar su identificación y reutilización.

Con este recorrido disponemos de una base para seguir desarrollando y personalizando nuestros propios temas de bloques, adaptándolos a las necesidades de cada proyecto.

Esta serie llega aquí a su fin, pero todavía podemos profundizar en algunos de los archivos fundamentales de un tema FSE. Uno de ellos es theme.json, que permite configurar aspectos como los colores, las tipografías, las dimensiones y los estilos disponibles en el Editor de WordPress. Por su importancia, lo abordaremos en una entrada independiente.