El Full Site Editing (FSE) en 2025

El Full Site Editing (FSE) en 2025: Análisis del Estado Actual, Nuevos Bloques y la Transformación del Desarrollo de Temas

El ecosistema de WordPress ha experimentado una de sus revoluciones más significativas con la introducción del Full Site Editing (FSE), una funcionalidad que ha redefinido fundamentalmente cómo los usuarios y desarrolladores interactúan con la plataforma. Lo que comenzó como un ambicioso proyecto para llevar la experiencia de edición de bloques de Gutenberg más allá del contenido de las entradas y páginas, se ha consolidado en 2025 como una herramienta madura y potente, transformando la creación y gestión de sitios web de maneras que antes requerían conocimientos avanzados de codificación.

Esta evolución marca un hito crucial, democratizando aún más el diseño web y ofreciendo un control sin precedentes sobre cada aspecto visual de un sitio, desde el encabezado hasta el pie de página, pasando por las plantillas de archivo y las páginas personalizadas. La promesa de “lo que ves es lo que obtienes” (WYSIWYG) ha alcanzado una nueva dimensión, permitiendo a los creadores de contenido diseñar sitios completos directamente desde el editor, sin necesidad de tocar una línea de código PHP o CSS, a menos que se desee una personalización muy específica.

En este artículo, profundizaremos en el estado actual del Full Site Editing en 2025, explorando la madurez de sus herramientas, los nuevos bloques y funcionalidades que han emergido para potenciar su capacidad, y cómo esta paradigma está redefiniendo por completo el desarrollo de temas en WordPress. Analizaremos los beneficios, los desafíos y las mejores prácticas para aprovechar al máximo esta poderosa evolución, tanto si eres un usuario final como un desarrollador experimentado. Prepárate para descubrir cómo el FSE no solo ha cambiado WordPress, sino que está marcando el rumbo de su futuro.

El Full Site Editing (FSE) en 2025: Un Vistazo al Estado Actual

En 2025, el Full Site Editing ha trascendido de ser una característica experimental a convertirse en la columna vertebral de la experiencia de construcción de sitios en WordPress. Después de varios años de desarrollo iterativo en el proyecto Gutenberg, FSE ha alcanzado un nivel de madurez y estabilidad que lo posiciona como la metodología preferida para la creación de nuevos temas y sitios web. Ya no es una opción para unos pocos, sino una dirección clara y consolidada para la plataforma.

La visión de un WordPress completamente basado en bloques, donde cada elemento, desde un párrafo hasta un widget o un área de plantilla completa, es un bloque editable, se ha materializado. Esto permite una flexibilidad y un control de diseño que antes estaban reservados para constructores de páginas complejos o desarrolladores con habilidades de codificación avanzadas. El Editor de Sitio Completo ahora proporciona una interfaz unificada donde los usuarios pueden gestionar plantillas, partes de plantillas, estilos globales y contenido, todo desde un único entorno intuitivo. La Madurez de Gutenberg y el Editor de Sitio Completo

La Madurez de Gutenberg y el Editor de Sitio Completo

El Editor de Sitio Completo, impulsado por Gutenberg, ha evolucionado significativamente desde su introducción. Las versiones más recientes de WordPress y el plugin Gutenberg han pulido la interfaz de usuario, mejorado el rendimiento y añadido una gran cantidad de funcionalidades que hacen que la edición de sitios sea más fluida y potente. La estabilidad ha mejorado drásticamente, minimizando errores y proporcionando una experiencia más predecible para los usuarios.

Uno de los aspectos más notables de su madurez es la integración profunda con los temas de bloques. Estos temas, diseñados específicamente para FSE, no dependen de archivos PHP tradicionales para sus plantillas, sino de archivos HTML que están compuestos enteramente por bloques de Gutenberg. Esto simplifica enormemente la estructura del tema y permite que todo el diseño sea editable a través del Editor de Sitio. La curva de aprendizaje para los desarrolladores de temas se ha enfocado ahora en entender la estructura de los bloques, el theme.json y las capacidades del editor, en lugar de en la programación PHP y las funciones de plantilla.

“El Full Site Editing no es solo una característica; es una filosofía que está remodelando la interacción entre el usuario, el contenido y el diseño en WordPress, llevando el control creativo a un nivel sin precedentes.”

La experiencia del usuario también ha visto mejoras considerables. Las herramientas de diseño contextual, como los controles de espaciado, tipografía, color y bordes, son ahora más accesibles y consistentes en todos los bloques. Las interacciones de arrastrar y soltar se han vuelto más robustas, y la capacidad de previsualizar los cambios en tiempo real ha hecho que el proceso de diseño sea mucho más eficiente. El objetivo es que cualquier persona, independientemente de su experiencia técnica, pueda construir un sitio web profesional y funcional.

Principios Fundamentales del FSE

El Full Site Editing se basa en un conjunto de principios clave que lo diferencian de los métodos de construcción de sitios anteriores en WordPress:

Todo es un Bloque: Este es el pilar central. Desde el título del sitio y el menú de navegación hasta el pie de página y los bucles de consulta de entradas, cada componente de un sitio FSE se trata como un bloque de Gutenberg. Esto permite una consistencia y una flexibilidad de edición uniformes en todo el sitio. Puedes mover, duplicar y personalizar cualquier elemento con las mismas herramientas.
Edición de Plantillas Completa: En lugar de editar solo el contenido de una página o entrada, FSE permite editar las plantillas que definen la estructura de diferentes tipos de contenido (por ejemplo, single.html para entradas individuales, archive.html para archivos de categorías, page.html para páginas, index.html para la página de inicio del blog). Esto significa que puedes diseñar el diseño de tus páginas, no solo su contenido.
Partes de Plantilla Reutilizables: Componentes comunes como encabezados (header.html) y pies de página (footer.html) se gestionan como “partes de plantilla”. Estas partes pueden insertarse en múltiples plantillas y editarse de forma centralizada, asegurando la coherencia en todo el sitio y facilitando las actualizaciones. Si cambias un elemento en tu encabezado, ese cambio se reflejará instantáneamente en todas las plantillas que utilicen esa parte de plantilla.
Estilos Globales a Través de theme.json: Este archivo JSON es el corazón de la configuración de diseño de un tema de bloques. Permite definir tipografías, paletas de colores, espaciado, tamaños de diseño y otros estilos predeterminados para todo el sitio. Los usuarios pueden anular estos estilos en el Editor de Sitio mediante la interfaz de Estilos Globales, aplicando cambios de diseño consistentes en todo el sitio con unos pocos clics. Esto elimina la necesidad de escribir CSS personalizado para cambios de estilo básicos y asegura la coherencia visual.
Patrones de Bloques: Los patrones son colecciones predefinidas de bloques que se pueden insertar y reutilizar fácilmente. Son fundamentales para acelerar el proceso de diseño y garantizar la coherencia. Los temas de bloques vienen con sus propios patrones, y los usuarios pueden crear los suyos propios. Son ideales para secciones de página comunes como “Acerca de nosotros”, “Testimonios” o “Llamadas a la acción”.

Estos principios, trabajando en conjunto, empoderan tanto a los usuarios novatos como a los diseñadores experimentados para construir y mantener sitios web complejos con una eficiencia y un control sin precedentes, marcando una nueva era en la evolución de WordPress.

Nuevos Bloques y Herramientas Potenciadoras en FSE

La continua evolución de Gutenberg, en tándem con el Full Site Editing, ha dado lugar a una proliferación de bloques y herramientas diseñadas para maximizar la flexibilidad y la potencia del editor de sitio. En 2025, la suite de bloques disponibles es robusta, permitiendo la creación de cualquier tipo de diseño, desde los más sencillos hasta los más intrincados. Estos bloques no solo manejan el contenido, sino también la estructura y la lógica del sitio.

Bloques Esenciales para la Creación de Sitios

Los bloques que impulsan el Full Site Editing son aquellos que permiten estructurar y mostrar la información dinámica del sitio, trascendiendo la función de simples contenedores de contenido estático. Algunos de los más cruciales incluyen:

Bloques de Información del Sitio:
- Título del Sitio: Muestra el título configurado en los ajustes de WordPress. Totalmente personalizable en tipografía, color y espaciado.
- Logo del Sitio: Permite cargar y mostrar el logo de la marca, con controles de tamaño y posicionamiento.
- Descripción del Sitio: Muestra el eslogan o la descripción corta del sitio.
Bloques de Navegación:
- Navegación: Este es uno de los bloques más complejos y potentes, permitiendo construir menús de navegación completos con submenús, enlaces personalizados, enlaces a entradas y páginas, e incluso bloques dentro de los elementos del menú (como iconos o botones). Su flexibilidad es clave para los encabezados modernos.
Bloques de Contenido Dinámico:
- Bucle de Consulta (Query Loop): El bloque más potente para mostrar listas de contenido dinámico (entradas, páginas, tipos de entrada personalizados). Permite filtrar por categoría, autor, fecha, etc., y personalizar completamente la plantilla de cada elemento dentro del bucle. Es fundamental para páginas de archivo, blogs y secciones de noticias.
- Contenido de la Entrada/Página: Muestra el contenido principal de la entrada o página actual.
- Título de la Entrada/Página: Muestra el título de la entrada o página actual.
- Imagen Destacada: Muestra la imagen destacada de la entrada o página, con controles de tamaño y relación de aspecto.
- Fecha de la Entrada, Autor de la Entrada, Categorías de la Entrada, Etiquetas de la Entrada: Bloques individuales para mostrar metadatos de las entradas.
Bloques de Estructura y Diseño:
- Grupo: Un bloque versátil para agrupar otros bloques, permitiendo aplicar estilos y controles de diseño (como fondo, relleno, márgenes) a una sección completa.
- Fila: Organiza bloques horizontalmente, ideal para diseños de columnas flexibles.
- Pila: Organiza bloques verticalmente, útil para apilar elementos.
- Columnas: Permite crear diseños de múltiples columnas con controles de ancho y espaciado.

Estos bloques, combinados con las herramientas de diseño, permiten a los usuarios construir cualquier componente de un sitio web directamente en el editor.

Bloques Avanzados y Patrones para Diseños Complejos

Más allá de los bloques esenciales, el ecosistema FSE ha visto la emergencia de bloques más especializados y la consolidación de los Patrones de Bloques como una herramienta indispensable para la eficiencia y la estética.

Bloques de Contenedor y Diseño Flexibles: Si bien los bloques Grupo, Fila y Columnas son potentes, la comunidad y el core han explorado bloques aún más flexibles que emulan las capacidades de flexbox y grid CSS, permitiendo un control preciso sobre el alineamiento, la distribución y el tamaño de los elementos dentro de un contenedor. Estos bloques son cruciales para crear diseños responsivos y complejos sin escribir CSS.
Bloques de Medios y Texto Avanzados: Bloques como Medios y Texto han mejorado, ofreciendo más opciones de superposición, degradados y efectos visuales para crear secciones de héroe o testimonios visualmente atractivos.
Patrones de Bloques: Los patrones son la clave para la reutilización y la consistencia. Un patrón es una colección predefinida de bloques y sus configuraciones, que se puede insertar en cualquier parte del sitio con un solo clic.

Por ejemplo, un tema de bloques puede incluir patrones para:
- Secciones de Llamada a la Acción (CTA): Un encabezado, un párrafo de texto y un botón, todos estilizados y listos para usar.
- Secciones de Testimonios: Un bloque de columnas con imágenes, citas y nombres de clientes.
- Diseños de Tarjetas de Servicios: Múltiples bloques de grupo que muestran un icono, título y descripción para diferentes servicios.
Los patrones no solo aceleran el desarrollo, sino que también guían a los usuarios hacia diseños estéticos y funcionales, manteniendo la coherencia visual del sitio. Los desarrolladores pueden registrar patrones personalizados en sus temas, y los usuarios pueden incluso crear y guardar sus propios patrones desde el editor.

Herramientas de Diseño y Estilo Global

Las herramientas de diseño del Editor de Sitio y la configuración de theme.json son el motor que permite la personalización visual sin código.

Estilos Globales: Esta interfaz, accesible desde el Editor de Sitio, permite a los usuarios modificar la tipografía, los colores, el espaciado y el diseño de todo el sitio. Los cambios realizados aquí se aplican globalmente, asegurando la coherencia.
- Tipografía: Control sobre fuentes, tamaños de fuente (incluida la tipografía fluida para adaptabilidad), altura de línea y espaciado de letras.
- Colores: Paletas de colores predefinidas por el tema, con la opción de añadir colores personalizados para el texto, el fondo, los enlaces, etc.
- Diseño: Configuración del ancho del contenido y el ancho amplio predeterminado para el sitio.
- Bloques: Posibilidad de anular los estilos predeterminados para bloques específicos (por ejemplo, hacer que todos los botones tengan un cierto color de fondo).

theme.json: Este archivo es el cerebro detrás de los Estilos Globales y la configuración del tema. Es un archivo JSON que define:

Versión de la API: "$schema": "https://schemas.wp.org/wp/6.5/theme.json".
Configuraciones de Diseño: Habilitar/deshabilitar funcionalidades como bordes, colores, tipografía, espaciado, diseño de bloques.
Estilos Predeterminados: Configura la paleta de colores, degradados, tamaños de fuente, plantillas de espaciado y valores predeterminados para bloques específicos.
Configuraciones Personalizadas: Permite a los desarrolladores añadir sus propias configuraciones que pueden ser leídas por bloques personalizados.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#007cba",
          "name": "Primario"
        },
        {
          "slug": "secondary",
          "color": "#f1f1f1",
          "name": "Secundario"
        }
      ],
      "custom": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
          "name": "System Font",
          "slug": "system-font"
        }
      ],
      "fluid": true,
      "fontSizes": [
        {
          "slug": "small",
          "size": "0.875rem",
          "name": "Pequeño"
        },
        {
          "slug": "base",
          "size": "1rem",
          "name": "Base"
        }
      ]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--secondary)",
      "text": "var(--wp--preset--color--primary)"
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "#ffffff"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--base)"
        }
      }
    }
  }
}

Este archivo permite a los desarrolladores de temas definir una base sólida y personalizable para sus diseños, mientras que los usuarios tienen la libertad de ajustar y afinar esos estilos sin necesidad de CSS, lo que representa un cambio fundamental en el desarrollo y mantenimiento de los temas de WordPress. La tipografía fluida, por ejemplo, permite que los tamaños de fuente se adapten automáticamente a diferentes tamaños de pantalla, mejorando la responsividad de forma nativa.

Cómo el FSE Está Transformando el Desarrollo de Temas

El Full Site Editing no es solo una nueva característica para los usuarios finales; es una reestructuración fundamental de cómo se construyen los temas de WordPress. En 2025, el desarrollo de temas está experimentando una metamorfosis de los temas clásicos basados en PHP a los temas de bloques, con un enfoque en HTML, JSON y la versatilidad de Gutenberg. Esta transformación trae consigo tanto desafíos como enormes oportunidades para la comunidad de desarrolladores.

De Temas Clásicos a Temas de Bloques

La principal diferencia entre un tema clásico y un tema de bloques radica en cómo se construyen y se configuran sus plantillas.

Temas Clásicos: Dependen en gran medida de archivos PHP como header.php, footer.php, index.php, single.php, archive.php, etc. Estos archivos utilizan funciones de plantilla de WordPress (wp_head(), wp_footer(), the_post(), get_template_part()) para ensamblar las diferentes partes de una página. La lógica y la presentación están entrelazadas en el código PHP, y la personalización visual a menudo requiere CSS personalizado o el uso de un personalizador de temas limitado.
Temas de Bloques: Abandonan la mayoría de los archivos PHP de plantilla en favor de archivos HTML estáticos que contienen bloques de Gutenberg. La estructura del sitio (encabezados, pies de página, barras laterales, bucles de contenido) se define mediante bloques. La configuración de estilos y las opciones de diseño se gestionan principalmente a través del archivo theme.json. Esto significa que el diseño y el contenido son completamente editables dentro de la interfaz del Editor de Sitio, sin necesidad de tocar el código.

“La transición a los temas de bloques es más que un cambio técnico; es un cambio de paradigma que empodera a los usuarios con un control de diseño sin precedentes, relegando el código PHP a la lógica del backend y a los bloques personalizados.”

Este cambio libera a los desarrolladores de la necesidad de escribir y mantener complejos archivos de plantilla PHP para cada diseño. En su lugar, se centran en crear bloques reutilizables, patrones de bloques y configuraciones robustas en theme.json que los usuarios pueden combinar y personalizar en la interfaz visual. El desarrollo se vuelve más modular y se alinea más estrechamente con los principios de desarrollo de componentes web.

La Estructura de un Tema de Bloques Moderno

Un tema de bloques moderno tiene una estructura de directorio simplificada y altamente organizada:

style.css: Contiene solo los metadatos del tema (Theme Name, Author, Version, Text Domain, Requires at least, Requires PHP, Theme URI, Description, Tags). El CSS real se gestiona en theme.json o en archivos CSS cargados por bloques específicos.
theme.json: Como se mencionó, este archivo es la configuración central del tema. Define los ajustes de diseño, los estilos predeterminados, la paleta de colores, la tipografía y las capacidades que el tema expone al Editor de Sitio. Es el archivo más importante para la apariencia y funcionalidad de un tema de bloques.
templates/: Este directorio contiene los archivos HTML que definen las plantillas completas del sitio. Cada archivo corresponde a una plantilla específica de WordPress:
- index.html: La plantilla principal para la página de inicio o el blog.
- single.html: Plantilla para entradas individuales.
- page.html: Plantilla para páginas estáticas.
- archive.html: Plantilla para archivos de categorías, etiquetas, etc.
- search.html: Plantilla para resultados de búsqueda.
- 404.html: Plantilla para la página de error 404.
- home.html: Plantilla para la página de inicio estática.
Cada uno de estos archivos es una colección de bloques de Gutenberg, a menudo incluyendo referencias a “partes de plantilla” para elementos reutilizables.
parts/: Este directorio contiene los archivos HTML para las “partes de plantilla” reutilizables, como:
- header.html: Encabezado del sitio.
- footer.html: Pie de página del sitio.
- sidebar.html: Barra lateral (si el tema la incluye).
Estas partes pueden incluirse en múltiples plantillas utilizando el bloque Plantilla Parte.

patterns/: Este directorio contiene archivos PHP que registran patrones de bloques personalizados para el tema. Estos patrones son esenciales para ofrecer diseños predefinidos y secciones complejas a los usuarios.

Ejemplo de un patrón simple en patterns/cta-section.php:

<?php
/**
 * Title: Sección de Llamada a la Acción
 * Slug: mytheme/cta-section
 * Categories: call-to-action, featured
 * Keywords: CTA, llamada a la acción, banner
 * Block Types: core/post-content
 * Viewport Width: 1200
 */
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"primary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-primary-background-color has-text-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:heading {"textAlign":"center","level":2,"style":{"typography":{"fontSize":"var:preset|font-size|x-large"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:var(--wp--preset--font-size--x-large)">¿Listo para empezar?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Descubre cómo podemos ayudarte a construir tu presencia online.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"secondary","textColor":"primary","style":{"border":{"radius":"5px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-secondary-background-color has-text-color has-background wp-element-button" style="border-radius:5px" href="#">Contáctanos Hoy</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

Este ejemplo muestra cómo un patrón de bloque, definido en PHP, renderiza una sección completa con un grupo, un encabezado, un párrafo y un botón, todos con estilos predefinidos.

functions.php: Aunque menos crítico para la estructura de la plantilla, functions.php sigue siendo importante para registrar funcionalidades adicionales, custom post types, taxonomías, bloques personalizados (si los hay), y para encolar scripts y estilos específicos que no se gestionan a través de theme.json.

Desafíos y Oportunidades para Desarrolladores

La transición a FSE presenta un nuevo conjunto de desafíos y abre un abanico de oportunidades.

Desafíos:

Curva de Aprendizaje: Los desarrolladores acostumbrados a la programación PHP orientada a plantillas necesitarán aprender la estructura de los bloques, el funcionamiento de theme.json y cómo interactuar con el Editor de Sitio.
Compatibilidad: Asegurar que los temas y plugins existentes sean compatibles con FSE puede requerir adaptaciones, especialmente para plugins que inyectan contenido o estilos de formas no estándar.
Depuración: Depurar problemas de diseño puede ser diferente, ya que gran parte de la lógica de presentación se maneja a través de bloques y JSON, en lugar de PHP y CSS explícitos.
Limitaciones Iniciales: Aunque FSE ha madurado, todavía puede haber escenarios complejos donde los desarrolladores necesiten extender las capacidades con bloques personalizados o CSS adicional.

Oportunidades:

Desarrollo Más Rápido: Una vez que se domina la metodología, la construcción de temas puede ser significativamente más rápida, utilizando la reutilización de bloques y patrones.
Mayor Control para el Usuario: Los temas de bloques ofrecen a los usuarios finales un control de diseño sin precedentes, lo que puede aumentar la satisfacción del cliente y reducir las solicitudes de personalización.
Enfoque en Componentes: Fomenta un enfoque de desarrollo basado en componentes, que es una práctica moderna y escalable.
Mercado de Patrones: Abre un nuevo mercado para la creación y venta de patrones de bloques y bloques personalizados.
Mantenimiento Simplificado: Los temas son más fáciles de mantener y actualizar, ya que la lógica de presentación está más desacoplada de la lógica de negocio.
Diseño Visual Primero: Permite a los diseñadores con menos conocimientos de código tomar las riendas del proceso de diseño, colaborando más estrechamente con los desarrolladores.

Mejores Prácticas en el Desarrollo de Temas de Bloques

Para maximizar los beneficios del FSE, los desarrolladores deben adoptar ciertas mejores prácticas:

Priorizar theme.json: Utiliza theme.json para definir la mayor cantidad posible de estilos y configuraciones. Esto garantiza que el tema sea totalmente editable a través del Editor de Sitio y que los estilos sean consistentes.
Crear Patrones Reutilizables: Invierte tiempo en desarrollar una biblioteca de patrones de bloques bien diseñados. Esto no solo acelera tu propio flujo de trabajo, sino que también proporciona un gran valor a los usuarios finales.
Modularidad: Piensa en tu tema como una colección de bloques y partes de plantilla. Cada componente debe ser lo más independiente y reutilizable posible.
Accesibilidad: Asegúrate de que todos los bloques y patrones que crees sean accesibles, siguiendo las pautas WCAG. FSE ofrece herramientas para ello, pero la responsabilidad recae en el desarrollador.
Responsividad: Diseña siempre pensando en la responsividad. Utiliza las herramientas de diseño de bloques (como el bloque Grupo, Fila, Columnas) para crear diseños que se adapten bien a diferentes tamaños de pantalla, y aprovecha la tipografía fluida de theme.json.
Extensibilidad: Si necesitas funcionalidades muy específicas, considera desarrollar bloques personalizados en React o JavaScript para extender las capacidades del editor, en lugar de recurrir a soluciones PHP complejas fuera del editor.
Documentación: Documenta claramente cómo se espera que se utilicen tus patrones y bloques, especialmente si otros desarrolladores o clientes van a trabajar con tu tema.

Al abrazar estas prácticas, los desarrolladores pueden no solo sobrevivir sino prosperar en la era del Full Site Editing, creando temas más potentes, flexibles y fáciles de usar que nunca.

Ejemplos Prácticos: Creando un Componente Reutilizable con FSE

Para ilustrar el poder del Full Site Editing, vamos a ver cómo se puede crear un componente reutilizable, como un “Testimonio Destacado”, utilizando bloques y patrones en un tema de bloques. Este ejemplo mostrará cómo se combinan la estructura de bloques, las partes de plantilla y los estilos globales para lograr un diseño coherente y editable.

Imaginemos que queremos un patrón para mostrar un testimonio, que incluya una imagen del cliente, su nombre, su rol y el texto de su testimonio.

1. Definir la Estructura con Bloques

Primero, pensaremos en los bloques que compondrán nuestro testimonio:

Un bloque Columnas para dividir la imagen del texto.
Dentro de la primera columna, un bloque Imagen.
Dentro de la segunda columna, un bloque Párrafo para la cita, un Encabezado para el nombre y otro Párrafo para el rol.
Un bloque Grupo exterior para contener todo y aplicar estilos de fondo y espaciado.

2. Crear el Patrón de Bloques

Para que este diseño sea reutilizable, lo definiremos como un patrón de bloques. Los patrones se registran en el directorio patterns/ de tu tema de bloques.

Crea un archivo, por ejemplo, patterns/featured-testimonial.php, con el siguiente contenido:

<?php
/**
 * Title: Testimonio Destacado
 * Slug: your-theme-slug/featured-testimonial
 * Categories: testimonials, featured
 * Keywords: testimonio, cliente, cita
 * Block Types: core/post-content
 * Viewport width: 1200
 */
?>
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-secondary-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide is-vertically-aligned-center"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":123,"sizeSlug":"thumbnail","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-thumbnail is-style-rounded"><img src="https://via.placeholder.com/150" alt="Foto del Cliente" class="wp-image-123"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>Nombre del Cliente</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Cargo del Cliente, Empresa</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>"Esta es una cita de testimonio impactante que resalta la experiencia positiva del cliente con nuestro producto o servicio. El Full Site Editing ha transformado la forma en que construimos sitios web, ofreciendo una flexibilidad y control sin precedentes."</p><cite>Un Cliente Satisfecho</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Explicación del Patrón de Bloques y su Registro

Este archivo featured-testimonial.php es un ejemplo perfecto de cómo se definen los patrones de bloques en un tema de FSE. A diferencia de los shortcodes o los widgets tradicionales, los patrones de bloques son colecciones predefinidas de bloques que los usuarios pueden insertar con un solo clic en el editor. Son increíblemente útiles para crear diseños complejos y reutilizables que mantienen la coherencia visual en todo el sitio.

Analicemos sus componentes clave:

Cabecera PHP (DocBlock): Las líneas comentadas al principio (/** ... */) son cruciales. Son metadatos que WordPress lee para registrar el patrón.
- Title: El nombre que aparecerá en el inserter de patrones.
- Slug: Un identificador único para el patrón, generalmente siguiendo la convención your-theme-slug/pattern-name.
- Categories: Permite agrupar patrones en categorías predefinidas (ej. “testimonials”, “featured”) para facilitar su búsqueda.
- Keywords: Palabras clave adicionales para mejorar la capacidad de descubrimiento.
- Block Types: Indica en qué tipos de bloques este patrón es más relevante o debería aparecer. En este caso, core/post-content sugiere que es ideal para el contenido principal.
- Viewport width: Una sugerencia para cómo se debe mostrar la vista previa del patrón en el editor.
Contenido HTML Comentado (Bloques): El resto del archivo es una serie de comentarios HTML que representan la estructura de bloques. Cada comentario  y  define un bloque de Gutenberg.
- Bloque group: Es el contenedor principal, alineado wide, con espaciado interno (padding) definido usando variables CSS de theme.json (var:preset|spacing|70) y un color de fondo secondary.
- Bloque columns: Organiza el contenido en una disposición de dos columnas, ideal para el diseño de testimonio. verticalAlignment: "center" asegura que el contenido de ambas columnas esté centrado verticalmente.
- Bloque column (1): La primera columna, con un ancho del 33.33%, contiene una imagen (image) para la foto del cliente, un encabezado (heading) para el nombre y un párrafo (paragraph) para el cargo y la empresa. La imagen tiene la clase is-style-rounded para aplicar un estilo redondo.
- Bloque column (2): La segunda columna, con un ancho del 66.66%, alberga el bloque quote, que es perfecto para el texto del testimonio. La clase is-style-large le da un estilo visual más prominente.

Este enfoque de definir patrones directamente con la sintaxis de bloques HTML permite a los desarrolladores crear diseños complejos y funcionales sin tener que escribir una sola línea de JavaScript para registrar bloques personalizados. Es una forma declarativa y potente de extender las capacidades de diseño de un tema de FSE.

Para que este patrón esté disponible en tu tema, debes registrarlo en el archivo functions.php de tu tema.

// functions.php de tu tema
<?php

if ( ! function_exists( 'your_theme_slug_setup' ) ) :
    /**
     * Configura el tema, registra patrones, etc.

     */
    function your_theme_slug_setup() {
        // Carga el dominio de texto del tema para traducciones.

        load_theme_textdomain( 'your-theme-slug', get_template_directory() . '/languages' );

        // Registra patrones de bloques.

        register_block_pattern_category(
            'testimonials',
            array( 'label' => esc_html__( 'Testimonios', 'your-theme-slug' ) )
        );
        register_block_pattern_category(
            'featured',
            array( 'label' => esc_html__( 'Destacados', 'your-theme-slug' ) )
        );

        // La función register_block_patterns se encarga de cargar los patrones desde la carpeta 'patterns'.

        // Asegúrate de que tus patrones estén en una subcarpeta llamada 'patterns' dentro de tu tema.

        // No necesitas llamar a register_block_pattern individualmente para cada archivo si usas esta función.

        // WordPress detectará y registrará automáticamente los patrones con su cabecera PHP correcta.

    }
endif;
add_action( 'after_setup_theme', 'your_theme_slug_setup' );

/**
 * Registra la carpeta de patrones del tema.

 * Esta función es necesaria para que WordPress escanee la carpeta 'patterns'
 * y registre automáticamente todos los archivos de patrón que contenga.

 */
function your_theme_slug_register_block_patterns() {
    register_theme_block_patterns(
        'your-theme-slug', // El slug de tu tema
        get_template_directory() . '/patterns' // Ruta a la carpeta de patrones
    );
}
add_action( 'init', 'your_theme_slug_register_block_patterns' );

// Otros códigos de configuración del tema...

En este functions.php:

Se definen las categorías de patrones testimonials y featured usando register_block_pattern_category(). Estas categorías son las que se usan en la cabecera del archivo del patrón.
La función your_theme_slug_register_block_patterns() utiliza register_theme_block_patterns(), una función introducida para simplificar el registro de múltiples patrones. Esta función le dice a WordPress que escanee la carpeta patterns dentro de tu tema. Cualquier archivo PHP en esa carpeta con la estructura de DocBlock correcta será registrado automáticamente como un patrón de bloques. Esto es mucho más eficiente que registrar cada patrón individualmente con register_block_pattern().

Una vez que el patrón está registrado, los usuarios pueden encontrarlo en el Inserter de Bloques bajo la pestaña “Patrones” y sus respectivas categorías. Esto agiliza enormemente el proceso de creación de contenido, permitiendo a los usuarios construir páginas con diseños complejos en minutos, manteniendo la consistencia de la marca y la estructura del sitio. Los patrones son, sin duda, una de las características más poderosas y subestimadas del Full Site Editing, actuando como bloques de construcción a gran escala.

La Importancia de los Patrones en el Ecosistema FSE

Los patrones de bloques representan un pilar fundamental en la filosofía del Full Site Editing, sirviendo como un puente esencial entre la flexibilidad ilimitada de los bloques individuales y la necesidad de coherencia y eficiencia en el diseño web. En 2025, su uso se ha estandarizado como una práctica recomendada, tanto para desarrolladores de temas como para diseñadores de sitios.

Aceleración del Desarrollo: Para los desarrolladores de temas, los patrones permiten empaquetar diseños complejos y reutilizables que los usuarios pueden insertar con un solo clic. Esto reduce drásticamente el tiempo de configuración inicial de un sitio, ya que las secciones comunes (como testimonios, llamadas a la acción, secciones de servicios o pies de página alternativos) pueden ser proporcionadas de forma preconstruida.
Coherencia Visual: Los patrones garantizan que los elementos de diseño clave se adhieran a la estética del tema. Al definir patrones, los desarrolladores pueden establecer pautas visuales y estructurales, minimizando la necesidad de que los usuarios realicen ajustes manuales que podrían desviarse del diseño original. Esto es especialmente útil para clientes que desean un sitio fácil de mantener sin romper el diseño.
Democratización del Diseño: Para los usuarios finales, los patrones son una bendición. Eliminan la barrera de tener que construir diseños complejos desde cero con bloques individuales. En lugar de eso, pueden navegar por una biblioteca de patrones bien diseñados, seleccionar el que mejor se adapte a sus necesidades y simplemente personalizar el contenido. Esto empodera a personas con poca o ninguna experiencia en diseño web para crear sitios visualmente atractivos y profesionales.
Flexibilidad y Edición: A diferencia de las secciones de “contenido demo” estáticas de los temas clásicos, los patrones de bloques son completamente editables una vez insertados. El usuario puede modificar cada bloque dentro del patrón, cambiar textos, imágenes, colores o incluso reorganizar los bloques, ofreciendo lo mejor de ambos mundos: facilidad de uso y control total.
Evolución Constante: La biblioteca de patrones de WordPress sigue creciendo, tanto a través de los patrones enviados por la comunidad al Directorio de Patrones de WordPress.org como por los que los temas individuales incorporan. Esto asegura que siempre haya nuevas ideas y diseños disponibles, manteniendo la plataforma fresca y adaptada a las últimas tendencias de diseño.

En resumen, los patrones de bloques son el tejido conectivo que une la potencia granular de los bloques con la visión holística del Full Site Editing, haciendo que el diseño y la construcción de sitios sean más rápidos, más coherentes y accesibles para todos.

Nuevos Bloques y Funcionalidades en 2025: Potenciando el FSE

El avance del Full Site Editing en 2025 no solo se ha centrado en la estabilidad, sino también en la expansión y refinamiento de su arsenal de bloques. La visión de “todo es un bloque” ha madurado, y ahora disponemos de una suite de herramientas mucho más sofisticada que en sus primeras iteraciones. Estos nuevos bloques y mejoras no solo facilitan la creación de contenido, sino que también permiten un control sin precedentes sobre la estructura y el diseño de todo el sitio.

La evolución ha sido constante, con cada nueva versión de Gutenberg (y, por extensión, de WordPress) introduciendo mejoras significativas. En 2025, el enfoque se ha desplazado hacia la creación de bloques más inteligentes, con más opciones de personalización integradas y una mejor integración con los estilos globales definidos en theme.json.

Bloques de Contenido Dinámico Avanzados

Una de las áreas donde el FSE ha brillado con luz propia es en la gestión de contenido dinámico. Los bloques que antes requerían complejas consultas PHP o el uso de plugins de terceros ahora son nativos y fáciles de configurar.

Query Loop (Bucle de Consulta) Mejorado: Este bloque es el corazón del contenido dinámico. En 2025, el Query Loop ha alcanzado una madurez impresionante, permitiendo a los usuarios construir bucles personalizados para mostrar entradas, páginas o cualquier tipo de contenido personalizado (CPT) con una flexibilidad asombrosa.
- Múltiples Variaciones de Patrones: Ahora incluye una amplia gama de patrones predefinidos (listas, cuadrículas, carruseles básicos) que los usuarios pueden seleccionar como punto de partida.
- Controles de Filtro Avanzados: Filtros por categoría, etiqueta, autor, fecha, estado de la entrada y campos personalizados (si están bien integrados por el tema o plugins).
- Paginación Integrada: Bloques de paginación (Query Pagination) y de resultados (Query No Results) que funcionan a la perfección con el Query Loop.
- Bloques Hijos de Contenido Dinámico: Dentro del Query Loop, se utilizan bloques como Post Title, Post Content, Post Excerpt, Post Date, Post Author, Post Featured Image, Post Categories, Post Tags y Read More. Estos bloques se rellenan automáticamente con los datos de cada entrada en el bucle. La capacidad de personalizar su apariencia y disposición dentro del bucle es fundamental para crear diseños de blog, portafolios o listas de productos atractivos.

<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"250px","align":"wide"} /-->

<!-- wp:post-title {"isLink":true,"level":3} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-excerpt /-->

<!-- wp:read-more {"content":"Leer más"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"No se encontraron entradas."} /-->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

Este bloque de Query Loop en HTML es un ejemplo de cómo se puede construir una sección de “Últimas Noticias” o “Entradas Relacionadas” directamente en el editor, sin necesidad de código PHP. Permite una flexibilidad increíble para mostrar contenido dinámico en cualquier parte del sitio.

Bloque de Comentarios: El bloque Comments ha sido rediseñado para ser completamente editable dentro del editor de sitio. Permite personalizar la apariencia de los comentarios, el formulario de comentarios y la paginación de comentarios, algo que antes era potestad exclusiva de los desarrolladores de temas PHP.

Bloques de Diseño y Estructura Mejorados

El control sobre el layout y la presentación visual es fundamental para el FSE. En 2025, los bloques de diseño han sido pulidos para ofrecer una mayor precisión y flexibilidad.

Row y Stack (Fila y Pila): Estos bloques son esenciales para el diseño responsivo.
- El bloque Row organiza los elementos horizontalmente, mientras que el bloque Stack los apila verticalmente.
- Permiten un control preciso sobre la alineación, el espaciado y la distribución de los elementos dentro de ellos, adaptándose automáticamente a diferentes tamaños de pantalla. Esto reemplaza gran parte de la necesidad de usar CSS para flexbox o grid layouts.
Group (Grupo) y Columns (Columnas) con Flexibilidad Avanzada: Los bloques Group y Columns han recibido mejoras significativas en sus controles de espaciado, alineación y capacidad de respuesta. Ahora es más fácil crear diseños complejos de varias columnas que se adaptan bien a móviles, con opciones para controlar el orden de las columnas en pantallas pequeñas.
Bloque de Navegación (Navigation Block): Este bloque es central para cualquier sitio web. En 2025, ha evolucionado para ser increíblemente potente y fácil de usar.
- Edición Visual Completa: Permite arrastrar y soltar elementos de menú, reordenarlos, añadir submenús y enlaces personalizados directamente en el lienzo del editor.
- Múltiples Menús: Los temas pueden definir múltiples ubicaciones de menú, y los usuarios pueden crear y gestionar varios menús de navegación, asignándolos a diferentes partes de las plantillas del sitio.
- Estilos y Variaciones: Ofrece opciones de estilo para el color del texto, el fondo, el espaciado, la tipografía y el diseño (horizontal, vertical, superpuesto), junto con variaciones de bloques para menús sociales o menús con botones.

Controles de Estilo y Tipografía Mejorados

El sistema de estilos globales, centralizado en theme.json, se ha vuelto aún más robusto y se integra perfectamente con los bloques.

Tipografía Avanzada: Los bloques ahora ofrecen controles de tipografía mucho más granulares, incluyendo:
- Tamaños de Fuente Fluidos: Escalado automático de fuentes para adaptarse a diferentes tamaños de pantalla, usando unidades clamp() o vw.
- Peso de Fuente, Altura de Línea, Espaciado de Letras: Controles directos para estos atributos CSS.
- Decoración de Texto: Subrayado, tachado, mayúsculas/minúsculas.
- Familias de Fuentes Personalizadas: Soporte para cargar y usar fuentes personalizadas directamente a través de theme.json o la interfaz del editor.
Controles de Espaciado y Dimensiones:
- Padding y Margin: Controles visuales intuitivos para establecer el relleno y los márgenes de los bloques, utilizando las variables de espaciado predefinidas en theme.json o valores personalizados.
- Gap (Brecha): Control para el espacio entre elementos dentro de bloques contenedores como Group o Columns.
- Ancho y Alto Mínimo/Máximo: Permite establecer dimensiones específicas para los bloques, esencial para el diseño responsivo y la alineación.
Colores y Duotone:
- La paleta de colores del tema, definida en theme.json, está disponible en todos los bloques.
- El filtro Duotone, popular para las imágenes, se ha extendido a otros bloques y elementos, permitiendo efectos visuales creativos con facilidad.

Bloques Específicos para Componentes de Sitio

Más allá del contenido de las entradas, el FSE ha introducido bloques para elementos comunes de un sitio web.

Header (Encabezado) y Footer (Pie de Página): Estos son bloques de “Parte de Plantilla” que se pueden reutilizar en múltiples plantillas. Permiten a los usuarios diseñar completamente sus encabezados y pies de página utilizando cualquier combinación de bloques (logo, navegación, texto, redes sociales, etc.).
Site Title (Título del Sitio), Site Tagline (Eslogan del Sitio), Site Logo (Logotipo del Sitio): Bloques dinámicos que extraen información del personalizador del sitio, asegurando que los cambios se reflejen en todo el sitio.
Template Part (Parte de Plantilla): Un bloque genérico que permite insertar cualquier “Parte de Plantilla” definida en el tema o creada por el usuario. Es fundamental para la reutilización de secciones comunes del sitio.

La combinación de estos bloques, junto con la madurez del editor y la integración de theme.json, ha transformado el Full Site Editing en una plataforma de construcción de sitios increíblemente potente y accesible en 2025. Los usuarios ahora tienen un control sin precedentes sobre cada píxel de su sitio, sin necesidad de conocimientos de codificación. La Transformación del Desarrollo de Temas con FSE

La Transformación del Desarrollo de Temas con FSE

El Full Site Editing no es solo una característica para los usuarios finales; ha provocado una reestructuración fundamental en la forma en que los desarrolladores abordan la creación de temas de WordPress. Los “temas de bloques” o “temas FSE” son ahora la norma, y las metodologías tradicionales basadas en PHP para plantillas están cediendo el paso a un enfoque declarativo basado en HTML, JSON y CSS. Esta es, sin duda, la evolución más significativa en el desarrollo de temas desde la introducción del Customizer.

Del PHP al HTML: Un Cambio de Paradigma en las Plantillas

La diferencia más evidente en el desarrollo de temas FSE es el cambio de las plantillas de PHP a las plantillas de HTML.

Temas Clásicos (PHP): Históricamente, un tema de WordPress se construía con archivos PHP como header.php, footer.php, index.php, single.php, page.php, etc. Estos archivos contenían una mezcla de marcado HTML y funciones PHP para obtener datos de la base de datos (por ejemplo, the_title(), the_content(), wp_list_pages()) y para incluir otras partes de la plantilla (get_header(), get_footer()).
Temas de Bloques (HTML): En un tema de bloques, la estructura de la plantilla se define completamente en archivos HTML ubicados en la carpeta /templates. Por ejemplo, index.html o single.html no contienen código PHP para mostrar el título o el contenido. En su lugar, utilizan comentarios HTML que representan bloques de Gutenberg:
```



<main class="wp-block-group">
    
    
    
    
    
    
</main>



```
En este ejemplo de single.html, los bloques como post-title, post-featured-image, post-content, etc., son los encargados de renderizar dinámicamente el contenido de la entrada. El bloque template-part se utiliza para incluir otras partes de la plantilla, como el encabezado y el pie de página, que a su vez son archivos HTML en la carpeta /parts (por ejemplo, header.html, footer.html).

Este cambio significa que la lógica de renderizado se ha movido del lado del desarrollador PHP al propio editor de bloques y al sistema de bloques de Gutenberg. El desarrollador define la estructura y los bloques que deben estar presentes, y WordPress se encarga de rellenar esos bloques con el contenido adecuado.

`theme.json`: El Manifiesto de Estilos del Tema

Si las plantillas HTML son el esqueleto, entonces theme.json es el sistema nervioso central de un tema de bloques. Este archivo JSON, ubicado en la raíz del tema, permite a los desarrolladores controlar una vasta gama de configuraciones y estilos globales, eliminando la necesidad de archivos CSS extensos y complejos para la configuración básica del tema.

En 2025, theme.json ha evolucionado para ser aún más potente, permitiendo configurar:

Tipografía: Fuentes personalizadas, tamaños de fuente fluidos, pesos, alturas de línea, espaciado de letras.
Colores: Paletas de colores personalizadas, colores de fondo, colores de texto, colores de enlaces.
Espaciado: Tamaños de espaciado predefinidos (padding, margin, gap), unidades de espaciado.
Diseño (Layout): Ancho del contenido, ancho amplio, alineaciones por defecto.
Border (Bordes): Estilos de borde, radios, colores.
Shadow (Sombras): Estilos de sombra predefinidos.
CSS Personalizado: Permite inyectar CSS personalizado directamente en el archivo, scoped a bloques específicos o globalmente.
Configuración por Bloque: Permite habilitar/deshabilitar características de bloques específicos (por ejemplo, permitir o no el cambio de color para el bloque de párrafo).

Un ejemplo simplificado de theme.json:

{
    "$schema": "https://schemas.wp.org/wp/6.5/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "color": {
            "palette": [
                {
                    "color": "#000000",
                    "name": "Negro",
                    "slug": "black"
                },
                {
                    "color": "#FFFFFF",
                    "name": "Blanco",
                    "slug": "white"
                },
                {
                    "color": "#336699",
                    "name": "Principal",
                    "slug": "primary"
                },
                {
                    "color": "#F0F8FF",
                    "name": "Secundario",
                    "slug": "secondary"
                }
            ],
            "custom": false,
            "link": true
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
                    "name": "Sistema",
                    "slug": "system-font"
                },
                {
                    "fontFamily": "Georgia,serif",
                    "name": "Serif",
                    "slug": "serif"
                }
            ],
            "fontSizes": [
                {
                    "fluid": {
                        "min": "0.875rem",
                        "max": "1rem"
                    },
                    "size": "1rem",
                    "slug": "small"
                },
                {
                    "fluid": {
                        "min": "1rem",
                        "max": "1.125rem"
                    },
                    "size": "1.125rem",
                    "slug": "medium"
                },
                {
                    "fluid": {
                        "min": "1.25rem",
                        "max": "1.5rem"
                    },
                    "size": "1.5rem",
                    "slug": "large"
                }
            ]
        },
        "spacing": {
            "blockGap": true,
            "margin": true,
            "padding": true,
            "units": ["px", "%", "em", "rem", "vh", "vw"],
            "spacingSizes": [
                {
                    "name": "Extra Pequeño",
                    "size": "0.5rem",
                    "slug": "10"
                },
                {
                    "name": "Pequeño",
                    "size": "1rem",
                    "slug": "20"
                },
                {
                    "name": "Mediano",
                    "size": "2rem",
                    "slug": "40"
                },
                {
                    "name": "Grande",
                    "size": "3rem",
                    "slug": "60"
                },
                {
                    "name": "Extra Grande",
                    "size": "4rem",
                    "slug": "70"
                }
            ]
        }
    },
    "styles": {
        "color": {
            "text": "var:preset|color|black",
            "background": "var:preset|color|white",
            "link": "var:preset|color|primary"
        },
        "typography": {
            "fontFamily": "var:preset|font-family|system-font"
        },
        "blocks": {
            "core/paragraph": {
                "typography": {
                    "fontSize": "var:preset|font-size|medium"
                }
            },
            "core/heading": {
                "color": {
                    "text": "var:preset|color|primary"
                }
            }
        }
    }
}

Este archivo no solo define los valores predeterminados, sino que también genera automáticamente el CSS necesario para aplicar estos estilos, lo que simplifica enormemente el mantenimiento y la personalización. La propiedad appearanceTools: true es un atajo para activar una gran cantidad de controles de diseño en el editor, dando a los usuarios más opciones de personalización sin que el desarrollador tenga que habilitarlas una por una.

El Rol de los Patrones de Bloques en el Diseño de Temas

Como se mencionó anteriormente, los patrones de bloques se han convertido en una herramienta indispensable para los desarrolladores de temas. En lugar de crear diseños específicos con HTML y CSS en cada plantilla, los desarrolladores ahora pueden:

Construir Componentes Reutilizables: Diseñar secciones complejas (como héroes, secciones de características, llamadas a la acción) como patrones de bloques.
Ofrecer Puntos de Partida: Proporcionar una biblioteca de patrones que los usuarios pueden usar para construir sus páginas, guiándolos hacia un diseño coherente con el tema.
Simplificar las Plantillas: Las plantillas de HTML del tema pueden ser bastante básicas, confiando en que los usuarios insertarán los patrones necesarios para construir el contenido. Esto mantiene las plantillas limpias y enfocadas en la estructura general.