WordPress 7.0 para developers: bloques, «theme.json» y editor

Esta cuarta entrega es la más densa para quienes hacemos temas. WordPress 7.0 trae una colección de mejoras y correcciones en bloques, theme.json y comportamiento del editor que cambian flujos cotidianos y resuelven bugs arrastrados durante meses. Las repaso ordenadas por impacto real.

Pseudo-elementos en core/button desde theme.json

La mejora técnica más útil para temas: core/button soporta declarativamente :hover, :focus, :focus-visible y :active desde estilos globales. Hasta ahora, para personalizar el estado hover de un botón en un tema tocaba inyectar CSS custom vía wp_enqueue_style() o additional_css en theme.json. Ahora se hace así:

{
  "styles": {
    "blocks": {
      "core/button": {
        "color": { "background": "var(--brand)" },
        "elements": {
          "link": {
            ":hover": {
              "color": { "background": "var(--brand-dark)" }
            },
            ":focus-visible": {
              "outline": { "color": "var(--brand)", "width": "2px" }
            }
          }
        }
      }
    }
  }
}

Esto abre la puerta a que otros bloques sigan el mismo camino en próximas versiones. Si mantienes un design system en theme.json, este es el sitio para empezar a centralizar estados del botón.

Layout classnames al wrapper interno

Cambio silencioso que puede romper estilos puntuales: las clases de layout (is-layout-flow, is-layout-constrained, is-layout-flex, etc.) se aplican ahora al contenedor de bloques internos, no a sus hermanos. Si tu tema dependía de targetear esas clases con CSS custom esperando que estuvieran en el padre, comprueba que sigues alcanzando los elementos correctos.

El patrón roto típico:

/* Antes funcionaba; ahora puede no alcanzar */
.wp-block-group.is-layout-flow > .my-custom-class { ... }

Revisa con DevTools el árbol real tras actualizar antes de declarar la migración hecha.

Bloque Tabs: patrón ARIA, duplicación, estilos clásicos

El bloque Tabs acumula varias mejoras de calidad:

• Patrón ARIA Tabs. Renombrado del marcado para seguir el patrón ARIA Authoring Practices —importante el matiz: WCAG son las pautas, ARIA APG es el patrón concreto—. La accesibilidad real con lectores de pantalla mejora sin tocar tu código.
• Duplicación de tabs implementada en el editor, evita el copia y pega manual.
• Estilos para temas clásicos que evitan que los estilos heredados de core/button se filtren en los tabs. Problema que rompía bastantes temas legacy con botones muy estilizados.

Si has hecho workarounds en CSS para estos tres puntos, retíralos tras actualizar.

Bloque Imagen: aspectRatio y scale preservados al cambiar alineación

Al cambiar la alineación a wide o full, los valores de aspectRatio y scale ahora se preservan. Antes se reseteaban, lo que provocaba cambios de layout inesperados al mover una imagen entre alineaciones. Si tienes documentación, guías o vídeos enseñando «no toques la alineación después de ajustar el ratio», quedan obsoletos.

Bloque Búsqueda: dos correcciones que importan

Dos fixes en el bloque Búsqueda que merece la pena anotar:

• La configuración de color se aplica correctamente al input cuando el botón está deshabilitado.
• Se resuelve el conflicto entre estilos globales definidos vía theme.json y los controles locales del inspector para bordes y colores.

Si has tenido reportes de «el borde no se aplica», «el color del placeholder se ignora» o «se sobrescribe lo del Personalizador», probablemente este era el bug.

Bloque Cover con vídeo de fondo

core/cover ahora acepta vídeo como fondo, no solo imagen. Antes había que apilar bloques o usar un plugin de tercero. Patrón importante para landings con hero animado. Si has metido vídeos de fondo con core/video + posicionamiento absoluto + capa de oscurecido manual, retira el apaño.

Bloque Gallery con lightbox y slideshow

Soporte de lightbox con opción de slideshow integrado. El visitante hace clic en una imagen y pasa entre ellas sin salir de la página. Antes esto requería un plugin externo, con sus conflictos de inicialización, dependencias de scripts y problemas de compatibilidad con bloques iframed. Ahora viene de fábrica.

Nuevos bloques: Breadcrumbs, Icons, Headings unificado

Tres entradas al catálogo core:

• Breadcrumbs. Refleja la jerarquía de navegación automáticamente, con filtros developer para personalizar separador y lógica.
• Icons. Catálogo de iconos SVG nativos, sin depender de fuentes de icono externas o plugins.
• Headings unificado. Ya no hay un bloque por cada nivel jerárquico. Es un solo bloque Headings con variaciones y selector rápido en la sidebar para cambiar entre h1-h6. Reduce el ruido del inserter.

Si tu plugin proveía Breadcrumbs o Icons, evalúa si lo retiras y dependes del core o si tu valor añadido justifica mantenerlo.

REST API: campo de fecha en Templates y Template Parts

Los endpoints REST de Templates y Template Parts incluyen ahora un campo de fecha que permite ordenar y filtrar por fecha de creación o modificación. Útil para vistas administrativas custom, auditoría de cambios en estructura del sitio o sincronización con sistemas externos.

Otras correcciones menores que conviene saber

• Estilos globales con pseudo selectores (:hover, :focus, etc.) en el editor estaban rotos cuando se aplicaban vía Estilos Globales. Arreglado.
• Site Identity en panel de Diseño. El bloque aparece directamente en el panel de Diseño del editor de sitio, evitando un salto al Personalizador o a Ajustes Generales.
• Acordeón con controles de dimensión. Acerca el bloque a la paridad con core/group, aunque sigue sin tener todos los supports.

Resumen accionable

1. Migra los estados hover/focus/active de tus botones de CSS custom a theme.json.
2. Revisa selectores CSS que dependían de las clases is-layout-* en el padre. Ajusta a la nueva ubicación en el wrapper interno.
3. Retira workarounds CSS en Tabs, Búsqueda e Imagen relacionados con los bugs arreglados.
4. Evalúa si tus plugins de breadcrumbs o iconos siguen aportando valor frente a los bloques core.

En el último post de la serie cerramos con Notes a nivel de bloque —el sistema editorial que sí ha entrado—, el estado del experimento Content Types, lo que se quedó fuera (RTC, bloque Playlist), y la reflexión sobre qué frentes nos tocan más directamente desde Flowtitude.