Temas de bloques en WordPress: una introducción
Algo ha cambiado en el paradigma de los temas de WordPress. Como sabrás (o habrás notado), WordPress ha incorporado los bloques a todas partes en lo que se conocen como Full Site Editing Themes (Temas FSE). Cabeceras, footers, widgets, etc. Si has jugado con los nuevos temas, como twenty-twentytwo o twenty-twentythree, habrás trasteado con el Editor, y habrás podido comprobar cómo TODA la página puede construirse a través de bloques. Puedes cambiar de posición los sidebar, cambiar las alineaciones, aplicar estilos a golpe de click, etc. Para un usuario de a pie, ahora es infinitamente más sencillo controlar aspectos de su web que antes requerían de la ayuda de desarrolladores especializados en WordPress.
Pero claro, si vamos a ser capaces de modificar a tal nivel la configuración de un sitio, los hasta ahora temas de PHP con sus estrictas configuraciones y plantillas son inviables.
En este artículo, que está inspirado en este otro, vamos a hablar de:
Los beneficios de los temas de bloques
¿Por qué deberías desarrollar y utilizar temas de bloques? Si bien WordPress continúa admitiendo temas clásicos, los temas de bloques están especialmente diseñados para mejorar la escalabilidad y el rendimiento.
1.- Se han incrementado la velocidad de carga y el rendimiento.
Ahora solo se cargan los estilos de los bloques utilizados y renderizados en la página vista, en vez de cargar wp-includes/css/dist/block-library/style.css que contenía todos los estilos de todos los bloques, ahora se han dividido en varios ficheros de estilos: uno con variables y estilos comunes, y otro por cada bloque en particular que solo se cargará si el bloque en cuestión es renderizado en una página.
2.- No es necesario cargar estilos para el front y el editor por separado
Como vamos a trabajar con bloques en todas partes, los estilos del front y del editor deben coincidir. Si ya has trabajado creando bloques de WordPress, te harás una idea de a qué nos referimos. El objetivo es que en el editor de una página, cuando se está trabajando con bloques, el usuario pueda ver una representación lo más fiable posible de cómo será el resultado final. Por eso los estilos son iguales (o muy parecidos) en ambos lados.
3.- Descubrimos la potencia de theme.json
A través del theme.json, podemos controlar fácilmente variables, personalizaciones de todos los bloques habidos y por haber, e incluso gestionar todos los aspectos de add_theme_support()
4.- Se mejora la accesibilidad y usabilidad
Las funciones de accesibilidad como Saltar al contenido, la navegación con el teclado y los puntos de referencia se generan automáticamente sin agregar código adicional.
5.- Control absoluto del usuario final
Como ya hemos explicado, con un tema de bloques, el usuario puede editar todas las partes de su sitio web sin utilizar código, a través del Site Editor. Si no lo conoces todavía, corre a instalarte el último tema por defecto de WordPress, y échale un ojo. Creo que compartirás con nosotros las infinitas posibilidades que nos ofrece este nuevo sistema, tanto a usuarios finales como a desarrolladores.
6.- Personalización de estilos al alcance de todo el mundo
Mediante el uso de la interfaz de Estilos, los usuarios pueden personalizar los colores y la tipografía para todo el sitio web y para los distintos bloques. Nos olvidamos del editor de estilos habituales a través de CSS. Todo va orientado a que los estilos sean configuraciones predefinididas en el theme.json, y el usuarios erá capaz de navegar por dichas opciones y de utilizarlas dónde y cuándo le convenga.
Diferencias y similitudes entre temas clásicos y temas de bloque
Pero, ¿qué es lo que ha cambiado entre un tipo de tema y otro? Muchos conceptos y características son los mismos tanto para los temas clásicos como para los de bloques. En al siguiente tabla tienes una pequeña comparación, con referencias codex de WordPress.
| Temas clásicos : | Temas de bloques: |
| Utiliza archivos PHP para mostrar partes y contenido. | Utiliza archivos HTML para mostrar bloques. Utiliza archivos PHP como respaldo si WordPress no puede encontrar el archivo HTML. single.html es el equivalente de usar single.php. |
| Utiliza la jerarquía de plantillas | Utiliza la jerarquía de plantillas |
| Utiliza funciones de PHP como etiquetas de plantilla para mostrar contenido | Utiliza bloques para todo. El bloque de contenido de publicación es el equivalente a usar the_content(). |
| Usa funciones de PHP para hacer que el texto sea traducible | El texto de los archivos HTML no se puede traducir. Si utilizas los patrones de bloque, se pueden usar funciones PHP para que el texto sea traducible. Aparte, hay que hacer que los textos traducibles al crear los bloques. Pero recuerda: la idea final es que el mayor contenido posible sea modificable por el usuario, de modo que él mismo pueda cambiarlo a golpe de click, como si fuera un párrafo normal. |
| Utiliza funciones de PHP para condicionales if/else | Utiliza la configuración de bloques para lograr diferentes resultados. |
| Utiliza el loop (bucle) para mostrar diferentes publicaciones y tipos de publicaciones. | Utiliza el bloque Query Loop (Lista de Contenido) para mostrar el contenido de los posts que te interesen, en base a alguno de los patrones que haya configurados en el tema. |
| Puede usar áreas de widgets (barras laterales) y widgets | Utiliza bloques en lugar de widgets. Los widgets incluidos en WordPress se han convertido en bloques. |
| Puede usar el Personalizador | Utiliza el Editor del sitio. Puede habilitar opcionalmente el menú Personalizador |
| Debe registrar un menú de navegación para incluir un menú | Los menús se gestionan ahora con el bloque de navegación. |
| Puede registrar un encabezado personalizado | Utiliza bloques para personalizar completamente los encabezados del sitio, incluidas las imágenes. |
| Puede registrar un logotipo personalizado | Utiliza el bloque del logotipo del sitio |
| Puede poner en cola CSS y scripts personalizados | Puede poner en cola CSS y scripts personalizados, pero se basa más en bloques y en el archivo de configuración theme.json |
| Puede usar theme.json, pero los autores de temas deben poner en cola los estilos para el front. | Puede usar theme.json, y los estilos se ponen en cola automáticamente en el editor y en el frente |
| Puede colocar archivos de plantilla en el directorio raíz | Coloca los archivos de plantilla en la carpeta de templates. |
| Puede colocar partes de la plantilla en cualquier directorio | Coloca partes de plantilla en la carpeta de parts. |
| No se pueden crear ni editar plantillas de sitios como 404 ni páginas de archivo en el Editor de sitios | Puede crear y editar plantillas de sitios como 404 y páginas de archivo en el Editor de sitios |
| Puede crear y editar plantillas de bloques en el Editor de plantillas con theme support | Puede crear y editar plantillas de bloques en el Editor de plantillas |
