Añadir opciones del Full Site Editing a un tema clásico de WordPress

Descubre en este tutorial cómo actualizar un tema clásico de WordPress para que tenga funcionalidades del Full Site Editing (FSE).

En Código Genesis siempre me gusta compartir tutoriales para sacar el máximo partido a todas las novedades que llegan a WordPress.

Con la llegada el editor de bloques (Gutenberg) en WordPress 5.0 preparé una serie de tutoriales actualizar tu tema para que pudieras sacarle partido a todas las mejoras que llegaron. Y también preparé un listado actualizado de los child themes de Genesis Framework adaptados.

Más adelante, con la llegada versiones posteriores de WordPress te expliqué cómo puedes crear:

• Estilos personalizados para bloques (Block Styles)
• Patrones de bloques (Block Patterns)

Ahora que llega WordPress 5.9 y todo lo necesario para usar el Full Site Editing (FSE) está incluido en el núcleo de WordPress, me gustaría continuar en la misma línea.

En este tutorial voy a explicarte cómo puedes aprovechar algunas de las nuevas funcionalidades en el tema que ya estés usando.

Pero antes vamos a definir un poco los distintos tipos de temas que existen y sus características:

• Temas clásicos: los temas de toda la vida, creados con plantillas de PHP. Ejemplos: Twenty Twenty One o Underscores, puedes ver más en el repositorio de WordPress eliminando el filtro de FSE.
• Temas híbridos: temas clásicos que utilizan funcionalidades del FSE como el theme.json o el editor de plantillas. Ejemplo: Astra.
• Temas universales: temas que funcionan con el personalizador y el editor del sitio. Ejemplo: Blockbase (heredero espiritual de Underscores)
• Tema de bloques: temas creados para el FSE utilizando plantillas de HTML y el fichero theme.json. Ejemplos: Twenty Twenty Two o Tove, puedes ver más en el repositorio de WordPress filtrando por FSE.

Así que la idea de este tutorial es convertir tu tema clásico en uno híbrido para sacarle más partido. Y de paso aprendes algunas novedades del FSE. 😉

Vamos allá.

Opciones para añadir funcionalidades del FSE a un tema clásico

1. Añadir el fichero theme.json

Con esto conseguirás controlar los estilos del tema desde este fichero.

Lo bueno es que al hacerlo no pierdes el personalizador de WordPress, los widgets o la página de menús de la administración de WordPress.

Solo tienes que crear un fichero llamado theme.json y colocarlo en la raíz de tu tema.

Puedes usar esta herramienta online para configurar el fichero theme.json de una forma visual.

Este es el ejemplo creado con la herramienta que puedes colocar dentro del fichero:

Esto es lo que aparece en el editor de bloques después de añadir cualquiera de los dos snippets anteriores:

Aunque el generador online del theme.json puede ser muy práctico para ahorrarte tiempo, te recomiendo que entiendas de qué se ocupa cada apartado.

Por ejemplo, algunos se encargan de hacer la función que antes se gestionaba con add_theme_support. A continuación te muestro varios ejemplos:

• typography > fontSizes es el equivalente de add_theme_support( 'editor-font-sizes', array() );
• typography > lineHeight es el equivalente de add_theme_support( 'custom-line-height' );
• layout es el equivalente de add_theme_support( 'align-wide' );
• color > palette es el equivalente def add_theme_support( ‘editor-color-palette’, array() );
• color > gradients es el equivalente de add_theme_support( 'editor-gradient-presets', array() );
• spacing es el equivalente de add_theme_support( 'custom-spacing' );
• spacing > units es el equivalente de add_theme_support( 'custom-units', array() );

Ya ves que el fichero theme.json es muy potente y que puede dar mucho juego incluso en temas clásicos.

En futuros tutoriales explicaré casos concretos con los que sacarle partido.

Por cierto, debes de tener en cuenta que al añadir un fichero theme.json al tema se activa, por defecto, el editor de plantillas.

Si prefieres desactivarlo puedes hacerlo añadiendo este snippet al fichero functions.php:

Activar el editor de plantillas

Pero también se puede dar la situación inversa, en la que no quieras usar el fichero theme.json pero sí quieras tener accesible el nuevo editor de plantillas.

Para eso añade el siguiente código en el functions.php:

Cuando esta opción está activa, usando el snippet de arriba o añadiendo el theme.json, te aparece una nueva opción en el editor de bloques, concretamente en la barra lateral.

Si haces clic en «Nueva» se abrirá una ventana modal que te invita a introducir un nombre:

Una vez hecho, te dará la bienvenida al editor de plantillas:

Y cuando le des a «Comenzar» te enviará al editor de bloques donde podrás empezar a personalizar la plantilla:

También tengo intención de crear tutoriales con ejemplos específicos de plantillas personalizadas.

Conclusiones

¿Quieres empezar a sacarle partido a algunas de las novedades de la edición completa del sitio (FSE) en tu tema actual?

Ahora ya sabes qué opciones tienes y cómo puedes aplicarlas.

A este tutorial más introductorio seguirán otros más específicos. Si hay alguna cosa en particular que quieras que explique solo tienes que decírmelo.

Ventajas de ser suscriptor. 😉

Tutoriales relacionados

• https://codigogenesis.com/pasos-adaptar-child-theme-genesis-gutenberg/
• https://codigogenesis.com/child-themes-genesis/
• https://codigogenesis.com/actualizaciones-wordpress/
• https://codigogenesis.com/crear-block-styles-estilos-personalizados-bloques-wordpress/
• https://codigogenesis.com/crear-patrones-bloques-wordpress/