Gutenberg FSE: El Futuro del Diseño de WordPress en 2026

La Edición Completa del Sitio (FSE) llegó con WordPress 5.9. Tres años después, la mayoría de las agencias todavía no la usan correctamente, y las que sí lo hacen tienen una seria ventaja competitiva.

Qué significa realmente FSE

Antes de FSE, los temas de WordPress controlaban las cabeceras, pies de página y el diseño global a través de plantillas PHP. Gutenberg solo manejaba el área de contenido. Podías editar tu entrada de blog con bloques, pero tu navegación estaba bloqueada en un archivo PHP.

FSE cambia eso. Con un tema de bloques, cada parte del sitio — cabecera, pie de página, barra lateral, plantillas de archivo, diseño de entrada individual — es editable en el editor de Gutenberg usando bloques. No se requiere PHP para cambios de diseño.

Esto es importante para la generación de IA porque significa que todo el sitio puede expresarse como JSON de bloques. No hay un sistema híbrido donde algunas partes son plantillas PHP y otras son bloques. Todo son bloques, todo es JSON, todo puede ser generado y editado programáticamente.

Cómo PAGEnza usa FSE

Cuando PAGEnza genera un sitio, no solo crea una página de inicio. Crea un tema de bloques completo con:

• templates/index.html — la plantilla predeterminada
• templates/single.html — diseño de entrada individual
• templates/archive.html — listado de blog/categoría
• templates/404.html — página de error
• parts/header.html — bloque de cabecera reutilizable
• parts/footer.html — bloque de pie de página reutilizable
• theme.json — estilos globales (colores, tipografía, espaciado)

Todos estos se generan a partir del mismo Mandato de Diseño. La paleta de colores definida para la página de inicio es la misma que se usa en los estilos globales de theme.json. El trío de fuentes elegido para el héroe es el mismo que se carga en la hoja de estilos del tema de bloques.

Esta es la ventaja clave de FSE para la generación de IA: la consistencia es impuesta por el sistema, no por esperar que el diseñador recuerde aplicar la misma fuente en todas partes.

theme.json — el archivo más importante que nunca has editado

theme.json es un archivo de configuración que define el sistema de diseño global para un tema de bloques. Controla:

• Paleta de colores — colores con nombre que aparecen en el selector de color del editor
• Tipografía — familias de fuentes, tamaños, alturas de línea
• Espaciado — la escala de espaciado utilizada por los controles de relleno y margen
• Radio de borde — valores predeterminados de radio de esquina

Cuando PAGEnza genera un sitio, theme.json se construye programáticamente a partir del Mandato de Diseño. Los colores ink, bg1, bg2 y accent se registran como colores de paleta con nombre. El trío de fuentes se registra como familias de fuentes con las URL @import correctas de Google Fonts.

El resultado es que cuando un cliente abre el editor de Gutenberg para cambiar texto, el selector de color muestra exactamente los cuatro colores de marca, nada más. El selector de fuentes muestra las tres fuentes elegidas. Los controles de espaciado utilizan la escala del sistema. El sistema de diseño se impone a nivel del editor.

Qué significa realmente "editar en vivo en Gutenberg"

Cada sitio generado por PAGEnza es una instalación de WordPress en vivo con Gutenberg FSE activo. El cliente puede:

• Hacer clic en cualquier texto y editarlo directamente
• Cambiar los fondos de las secciones haciendo clic y seleccionando de la paleta de colores de marca
• Reordenar secciones arrastrando bloques
• Agregar nuevas secciones desde el insertador de bloques
• Cambiar imágenes haciendo clic en el marcador de posición

No pueden romper accidentalmente el sistema de diseño al elegir un color fuera de marca, porque los únicos colores disponibles son los cuatro colores de marca. No pueden elegir una fuente que no coincida, porque solo las tres fuentes de marca están registradas.

Esto es lo que hace que los sitios generados por IA sean prácticos para clientes reales: las restricciones que hacen que el diseño funcione se conservan después de la entrega.

El problema de la cobertura de bloques

FSE es potente, pero tiene un problema de cobertura. No todos los patrones de diseño se pueden expresar limpiamente en bloques de Gutenberg principales. Diseños complejos, componentes interactivos y visualizaciones de datos personalizadas a menudo requieren bloques personalizados o plugins de terceros.

PAGEnza maneja esto de dos maneras:

Para el diseño: utilizamos una combinación de bloques Group, Cover, Columns y Media & Text con atributos cuidadosamente controlados. Aproximadamente el 95% de los diseños de páginas de marketing se pueden lograr solo con estos cuatro tipos de bloques.

Para componentes interactivos: el Plugin Builder genera bloques de Gutenberg personalizados como plugins PHP. Una tabla de precios, un formulario de reserva, un carrusel de testimonios: estos se generan como bloques registrados adecuados que se integran con el editor FSE, no como shortcodes adjuntos.

El objetivo es que todo lo que un cliente necesita editar sea editable en el editor visual, sin tocar código.