Temas de bloques y Editor del sitio en WordPress: guía práctica
WordPress ha cambiado considerablemente su forma de trabajar con el diseño de una web. Si hace tiempo que no entras en el panel de administración, es posible que encuentres herramientas, menús y formas de editar el sitio bastante diferentes de las que recordabas.
Uno de los cambios más importantes es la llegada de los temas de bloques y del Editor del sitio. Con ellos, WordPress amplía el sistema de bloques más allá de las páginas y entradas: ahora también puede utilizarse para modificar cabeceras, pies de página, plantillas, navegación y gran parte del diseño general de una web.
Los temas de bloques se incorporaron al ecosistema de WordPress con la versión 5.9. El Editor del sitio solamente está disponible cuando hay activado un verdadero tema de bloques.
¿Qué es un tema de bloques de WordPress?
Un tema de bloques es un tema diseñado para construir las distintas partes de una web utilizando bloques.
En un tema clásico, elementos como la cabecera, el pie de página o determinadas plantillas suelen depender de archivos PHP, widgets, menús tradicionales, opciones específicas del tema o del antiguo Personalizador.
Con un tema de bloques, muchos de esos elementos pasan a editarse visualmente desde WordPress.
Esto incluye, entre otros:
- cabeceras;
- pies de página;
- menús de navegación;
- logotipo y título del sitio;
- plantillas de entradas y páginas;
- archivos de categorías y etiquetas;
- resultados de búsqueda;
- páginas de error 404;
- listados de entradas;
- elementos reutilizables del diseño.
WordPress define precisamente los temas de bloques como aquellos que utilizan bloques para todas las partes principales del sitio, incluida la navegación, la cabecera, el contenido y el pie de página.
Tema de bloques y tema clásico: ¿cuál es la diferencia?
La diferencia no está únicamente en el aspecto visual. También cambia la arquitectura del tema y la forma de mantener la web.
Los temas clásicos se han construido tradicionalmente alrededor de archivos PHP como header.php, single.php, page.php o index.php, además de functions.php, hojas de estilo, widgets y diferentes opciones de personalización.
En los temas de bloques, las plantillas pueden construirse mediante archivos HTML formados por bloques. La configuración global del diseño se concentra en gran medida en theme.json, donde pueden definirse colores, tipografías, tamaños, espaciados y otras opciones que posteriormente utiliza tanto el tema como el propio editor.
Para el propietario de una web, la diferencia práctica es todavía más sencilla:
con un tema clásico, el diseño depende en gran medida del tema; con un tema de bloques, WordPress proporciona muchas más herramientas para modificar directamente ese diseño.
Esto no significa que los temas clásicos hayan dejado de funcionar ni que sea obligatorio sustituirlos. Siguen siendo una opción perfectamente válida, especialmente en webs existentes que dependen de una arquitectura concreta, widgets antiguos o constructores visuales.
¿Qué pasó con Full Site Editing o FSE?
Durante el desarrollo de esta nueva forma de trabajar se utilizó ampliamente el término Full Site Editing (FSE), que podría traducirse como «edición completa del sitio».
Todavía encontrarás FSE en tutoriales, documentación antigua y conversaciones entre desarrolladores. Sin embargo, WordPress decidió simplificar el nombre y utilizar Site Editor, que en español encontramos habitualmente como Editor del sitio.
El cambio de nombre ayuda a entender mejor la función: se trata del entorno desde el que podemos modificar el diseño general del sitio.
Cómo acceder al Editor del sitio
Cuando hay un tema de bloques activo, el Editor del sitio se encuentra en:
Apariencia → Editor
Desde allí se puede acceder a diferentes áreas relacionadas con el diseño de la web, como estilos, páginas, plantillas, patrones y navegación.
Si la opción Editor no aparece dentro de Apariencia, una de las primeras cosas que conviene comprobar es si el tema activo es realmente un tema de bloques. El Editor del sitio solamente está disponible con este tipo de temas.
En el directorio oficial de temas de WordPress también existe un filtro específico para localizar temas de bloques.
Editar la cabecera y el pie de página sin tocar código
Esta es probablemente una de las ventajas más fáciles de apreciar.
En muchas instalaciones antiguas de WordPress, modificar la cabecera podía significar entrar en las opciones del tema, utilizar el Personalizador, cambiar widgets o incluso modificar una plantilla.
Con el Editor del sitio, la cabecera puede estar formada por bloques como:
- logotipo;
- título del sitio;
- navegación;
- botones;
- buscador;
- iconos sociales;
- grupos y columnas.
Lo mismo ocurre con el pie de página.
La cabecera y el footer pueden formar parte de componentes reutilizables, de manera que al modificarlos se actualizan las plantillas en las que aparecen. WordPress denomina a estos elementos partes de plantilla.
Para una pyme, un profesional autónomo o el responsable de contenidos de una empresa, esto puede simplificar bastante tareas habituales como cambiar un enlace del menú, incorporar una llamada a la acción o actualizar información del pie de página.
Plantillas: controlar cómo se muestran los distintos contenidos
Una de las posibilidades más interesantes del sistema es poder trabajar visualmente con las plantillas.
Una plantilla no es el contenido concreto de una página. Define cómo debe mostrarse determinado tipo de contenido.
Por ejemplo, podemos tener plantillas diferentes para:
- una entrada individual;
- una página;
- la portada;
- un archivo de categoría;
- los resultados de búsqueda;
- una página 404.
Desde el Editor del sitio podemos abrir una plantilla y reorganizar sus bloques visualmente.
Por ejemplo, en la plantilla de las entradas de un blog podríamos decidir que aparezcan primero la categoría y el título, después la imagen destacada, el contenido y finalmente la información del autor.
No es necesario editar cada entrada individualmente: estamos cambiando la estructura que WordPress utiliza para mostrarlas.
Patrones de bloques: crear diseños sin empezar desde cero
Los patrones son combinaciones prediseñadas de bloques.
Pueden utilizarse para crear rápidamente elementos como:
- una cabecera;
- una sección de presentación;
- un bloque de servicios;
- testimonios;
- llamadas a la acción;
- tablas de precios;
- grupos de imágenes;
- pies de página.
Los patrones resultan especialmente útiles porque permiten partir de una estructura ya diseñada y adaptarla después al contenido y a la identidad visual de la web.
Una recomendación práctica es no instalar varias colecciones de patrones sin necesidad. Cuantos más sistemas de diseño diferentes se mezclan en una misma web, más difícil resulta mantener una estética coherente.
Para una web corporativa suele ser preferible disponer de un conjunto reducido de patrones bien definidos y reutilizarlos de forma consistente.
Estilos globales: colores y tipografías desde un mismo lugar
Otra pieza fundamental de los temas de bloques son los Estilos.
En lugar de modificar individualmente cada botón, encabezado o párrafo, WordPress permite definir estilos que se aplican al conjunto del sitio.
Desde este sistema pueden controlarse aspectos como:
- paleta de colores;
- tipografías;
- tamaños de texto;
- interlineado;
- colores de enlaces;
- aspecto de los botones;
- espaciados;
- estilos específicos de determinados bloques.
El archivo theme.json permite al desarrollador establecer la configuración y los valores de diseño que posteriormente se reflejan tanto en la parte pública de la web como en los editores de WordPress.
Esto facilita algo especialmente importante en una web profesional: mantener la coherencia visual.
Si cambia el color corporativo principal, por ejemplo, es posible actualizar la configuración global en lugar de localizar manualmente decenas de botones repartidos por la web.
¿Siguen siendo necesarios Elementor, Divi y otros page builders?
Depende del proyecto.
Los constructores visuales como Elementor, Divi o Beaver Builder han resuelto durante años muchas de las limitaciones del editor y de los temas tradicionales de WordPress.
Los temas de bloques reducen esa dependencia en numerosos proyectos porque WordPress incorpora de forma nativa cada vez más herramientas de maquetación.
Sin embargo, eso no significa que los page builders hayan dejado de tener utilidad.
Una web existente construida extensamente con Elementor, Divi u otro constructor no debería cambiar de tema simplemente para adoptar el Editor del sitio. Una migración de este tipo requiere comprobar cuidadosamente plantillas, shortcodes, plugins, widgets y diseños existentes.
Para una web nueva, en cambio, merece la pena estudiar primero hasta dónde permiten llegar los bloques nativos antes de añadir otra capa completa de edición.
La regla práctica es sencilla: no añadas un segundo sistema de maquetación si el primero ya resuelve tus necesidades.
Menos sistemas superpuestos suelen significar una web más fácil de entender y mantener.
¿Son más rápidos los temas de bloques?
Un tema de bloques puede facilitar una arquitectura más ligera, pero utilizar bloques no garantiza automáticamente una web rápida.
El rendimiento sigue dependiendo de muchos otros factores:
- calidad del alojamiento;
- plugins instalados;
- imágenes y vídeo;
- fuentes;
- scripts externos;
- sistemas de analítica;
- publicidad;
- caché;
- optimización del código.
Por tanto, sería un error pensar que cambiar a un tema de bloques solucionará por sí solo todos los problemas de velocidad.
Su ventaja está más bien en que WordPress proporciona una estructura estandarizada con la que es posible construir sitios relativamente limpios sin depender necesariamente de grandes frameworks de maquetación.
¿Qué es theme.json?
Para quienes desarrollan o mantienen temas, theme.json se ha convertido en una pieza central del sistema moderno de WordPress.
Es un archivo de configuración que permite definir ajustes y estilos globales del tema.
Entre otras cosas, puede utilizarse para establecer:
- paletas de colores;
- familias y tamaños tipográficos;
- anchuras del contenido;
- espaciados;
- opciones disponibles para determinados bloques;
- estilos predeterminados;
- plantillas personalizadas.
La versión 3 del esquema de theme.json funciona desde WordPress 6.6 y sigue siendo la especificación vigente documentada por WordPress.
Para un usuario que simplemente administra contenidos no es necesario conocer este archivo. Para un desarrollador de temas, en cambio, comprender theme.json es cada vez más importante.
¿Conviene cambiar una web existente a un tema de bloques?
No necesariamente.
Si tu web funciona correctamente, utiliza un tema clásico mantenido y depende de un constructor visual concreto, no existe ninguna obligación inmediata de migrarla.
Un cambio de tema puede afectar a:
- estructura de páginas;
- widgets;
- menús;
- estilos personalizados;
- shortcodes;
- plantillas;
- funciones específicas del tema;
- integraciones con plugins.
Por eso, cualquier cambio importante debería probarse primero en una copia de desarrollo o staging, nunca directamente en una web en producción.
Los temas de bloques resultan especialmente interesantes en tres situaciones:
- Una web nueva.
Es el momento ideal para valorar una arquitectura basada en bloques. - Un rediseño completo.
Si de todos modos se va a reconstruir gran parte del sitio, tiene sentido estudiar la tecnología actual de WordPress. - Una web relativamente sencilla.
Blogs, webs corporativas, portfolios y determinados proyectos de comercio electrónico pueden beneficiarse especialmente de un sistema basado en bloques y patrones.
Cómo probar un tema de bloques
No hace falta transformar la web principal para aprender.
Una buena forma de empezar es crear una instalación de prueba y utilizar un tema oficial de bloques.
Twenty Twenty-Two fue el primer tema predeterminado de WordPress creado específicamente como tema de bloques. Temas posteriores como Twenty Twenty-Three, Twenty Twenty-Four y Twenty Twenty-Five han continuado desarrollando este modelo.
Una vez instalado, prueba algunas tareas sencillas:
- Abre Apariencia → Editor.
- Cambia la cabecera.
- Modifica el menú de navegación.
- Edita el pie de página.
- Prueba una variación de estilos.
- Cambia la tipografía global.
- Añade un patrón.
- Abre la plantilla de una entrada y modifica su estructura.
En poco tiempo se entiende la lógica del sistema mucho mejor que leyendo únicamente documentación.
¿Son los temas de bloques el futuro de WordPress?
Todo indica que los bloques y el Editor del sitio forman una parte fundamental de la evolución de WordPress.
El proyecto continúa desarrollando el Editor del sitio, los patrones, las herramientas de diseño y theme.json, mientras intenta acercar progresivamente la experiencia de edición del contenido y del diseño general de la web.
Eso no implica la desaparición inmediata de los temas clásicos.
WordPress mantiene una enorme base instalada de webs construidas durante muchos años y seguirá siendo necesario trabajar con arquitecturas diferentes.
Pero para quienes empiezan hoy un nuevo proyecto, y especialmente para desarrolladores, diseñadores y agencias que trabajan habitualmente con WordPress, conocer los temas de bloques ya no es simplemente experimentar con una función nueva.
Es aprender una de las formas principales en las que WordPress se construye y se administra actualmente.
Conclusión
Los temas de bloques trasladan buena parte del diseño de una web al mismo sistema de bloques que WordPress utiliza para gestionar el contenido.
Cabeceras, pies de página, navegación, plantillas, patrones, colores y tipografías pueden gestionarse desde un entorno mucho más integrado.
Para el usuario final, esto puede significar mayor autonomía. Para desarrolladores y agencias, implica una arquitectura diferente y nuevas herramientas como theme.json. Y para quien mantiene una web existente, no supone que haya que migrar inmediatamente.
La mejor forma de empezar es sencilla: crea una instalación de pruebas, activa un tema de bloques y dedica un rato a explorar Apariencia → Editor.
Después de trabajar directamente con el Editor del sitio, resulta mucho más fácil decidir si este modelo encaja en tu próximo proyecto WordPress.
Changed