WordPress 6.9 trae una mejora largamente esperada por desarrolladores de temas y maquetadores: por primera vez se pueden definir estilos de formularios directamente desde theme.json. No es una solución completa todavía —solo afecta a ciertos campos—, pero marca el inicio de un camino muy interesante hacia formularios totalmente gestionados desde estilos globales.

A continuación se explica qué se puede hacer ya, qué sigue dependiendo de CSS clásico y cómo empezar a usarlo en proyectos reales.

Qué introduce WordPress 6.9 en theme.json para formularios

La novedad clave es que theme.json ahora permite definir estilos globales para dos “elementos” especiales:

• select: afecta a las etiquetas <select>.
• textInput: agrupa:
  • <textarea>
  • <input type="email|number|password|search|text|tel|url">

Todo se configura bajo la clave:

{
  "version": 3,
  "styles": {
    "elements": {
      "select": {},
      "textInput": {}
    }
  }
}
Lenguaje del código: JSON / JSON con comentarios (json)

Desde ahí se pueden aplicar las mismas propiedades que ya se usan para otros elementos de theme.json: bordes, colores, sombras, espaciado, etc.

Ejemplo básico de estilos para <select>

{
  "styles": {
    "elements": {
      "select": {
        "border": {
          "color": "#d5dae2",
          "style": "solid",
          "width": "1px",
          "radius": "0.75rem"
        },
        "color": {
          "background": "#eceff2",
          "text": "#22272f"
        },
        "outline": {
          "color": "transparent",
          "offset": "2px",
          "style": "solid",
          "width": "2px"
        },
        "shadow": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A",
        "spacing": {
          "padding": {
            "top": "var(--wp--preset--spacing--10)",
            "bottom": "var(--wp--preset--spacing--10)",
            "left": "var(--wp--preset--spacing--30)",
            "right": "var(--wp--preset--spacing--30)"
          }
        }
      }
    }
  }
}
Lenguaje del código: JSON / JSON con comentarios (json)

Ese estilo se aplicará a cualquier <select> del sitio: desplegables de categorías, archivos, formularios de plugins, etc., siempre que dichos plugins no sobrescriban agresivamente los estilos.

Reutilizar estilos en campos de texto

Como suele ocurrir en CSS, los <select>, <input> y <textarea> comparten diseño en la mayoría de interfaces modernas. WordPress 6.9 permite reutilizar el mismo bloque de estilos también en textInput:

{
  "styles": {
    "elements": {
      "textInput": {
        "border": {
          "color": "#d5dae2",
          "style": "solid",
          "width": "1px",
          "radius": "0.75rem"
        },
        "color": {
          "background": "#eceff2",
          "text": "#22272f"
        },
        "outline": {
          "color": "transparent",
          "offset": "2px",
          "style": "solid",
          "width": "2px"
        },
        "shadow": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A",
        "spacing": {
          "padding": {
            "top": "var(--wp--preset--spacing--10)",
            "bottom": "var(--wp--preset--spacing--10)",
            "left": "var(--wp--preset--spacing--30)",
            "right": "var(--wp--preset--spacing--30)"
          }
        }
      }
    }
  }
}
Lenguaje del código: JSON / JSON con comentarios (json)

Con algo así, bloques como Formulario de comentarios, Buscar, Acceder / Salir o formularios de terceros empiezan a integrarse visualmente con el resto del tema casi sin tocar CSS.

Lo que sí se puede hacer con theme.json y lo que no (todavía)

En esta primera iteración, el soporte es potente pero incompleto. Una buena forma de verlo es en tabla:

La idea del equipo de WordPress es ir ampliando el soporte en futuras versiones (WordPress 7.0 y siguientes), añadiendo más elementos y pseudoclases gestionadas desde estilos globales.

Rellenando los huecos con CSS clásico

Hasta que el soporte sea completo, sigue siendo necesario añadir algo de CSS para:

• Mejorar la accesibilidad con estados :focus visibles.
• Personalizar detalles como el color del cursor (caret).
• Dar estilo a etiquetas <label> y a controles como checkbox o radio.

1. Color del caret (cursor de texto)

textarea,
input:where(
  [type=email],
  [type=number],
  [type=password],
  [type=search],
  [type=text],
  [type=tel],Lenguaje del código: CSS (css)

[type=url]

) { caret-color: #2770ce; }

Esto ayuda a que el cursor destaque sobre el contenido, algo muy útil en diseños con poco contraste.

2. Estado de foco accesible

Como theme.json aún no puede definir pseudoclases, el foco también va en CSS:

textarea:focus,
input:where(
  [type=email],
  [type=number],
  [type=password],
  [type=search],
  [type=text],
  [type=tel],Lenguaje del código: CSS (css)

[type=url]

):focus, select:focus { outline-color: #2770ce; }

La técnica recomendada es:

1. Definir outline.color como transparent en theme.json.
2. Cambiarlo a un color visible sólo cuando el elemento tiene :focus vía CSS.

De este modo, se mantiene la coherencia con los estilos globales sin perder accesibilidad.

3. Etiquetas <label> y casos especiales

Los formularios no son sólo campos; las etiquetas bien diseñadas mejoran usabilidad y accesibilidad. Un patrón típico:

/* Estilo general de etiquetas */
label {
  color: #526277;
  font-size: 1rem;
}

/* Restablecer estilo con checkbox y radios */
input[type="checkbox"] + label,
input[type="radio"] + label,
label:has(input[type="checkbox"], input[type="radio"]) {
  color: inherit;
  font-size: inherit;
}
Lenguaje del código: CSS (css)

Aquí se hace una distinción entre etiquetas “normales” —por ejemplo, en formularios de contacto o comentarios— y las que acompañan a checkboxes o radios, que a menudo siguen una línea visual diferente.

Qué significa esto para desarrolladores de temas y agencias

Aunque pueda parecer una mejora pequeña, el impacto para quien mantiene muchos sitios o desarrolla temas es grande:

• Menos CSS repetido: estilos de entradas de blog, formularios de búsqueda, formularios de comentarios y plugins pueden centralizarse en theme.json.
• Consistencia visual: al aplicar los mismos tokens de color, espaciados y radios de esquina, los formularios dejan de parecer “pegotes” y se integran en el diseño global.
• Mejor experiencia en bloques: el editor de bloques se acerca un poco más al ideal de “lo que ves es lo que obtienes” también en formularios.
• Camino hacia una capa de diseño más declarativa: cuantas más cosas se controlan desde theme.json, menos dependencia hay de hojas de estilo gigantes y difíciles de mantener.

Eso sí, por ahora no conviene tirar todo el CSS por la borda: seguirán siendo necesarios estilos complementarios para estados, elementos no soportados y casos especiales.

Cómo empezar a aprovechar WordPress 6.9 en tus proyectos

1. Añadir select y textInput a tu theme.json
   Empieza con estilos básicos (bordes, colores, padding) reutilizando presets (--wp--preset--*) para no “quemar” valores fijos.
2. Probar con bloques nativos
   Usa bloques como:
   • Formulario de comentarios
   • Buscar
   • Lista de categorías como desplegable
     para validar cómo se ven tus formularios en el frontend.
3. Detectar CSS duplicado
   Revisa tu tema y plugins personalizados para eliminar reglas que ya no hagan falta porque ahora las controlas desde theme.json.
4. Añadir una pequeña capa de CSS de accesibilidad
   Mantén un archivo style.css con lo mínimo: focus, caret, labels y controles especiales.
5. Seguir la evolución del feature
   Las mejoras en formularios vía theme.json se discuten y afinan en GitHub y en la documentación oficial de desarrolladores de WordPress.

Si WordPress mantiene el ritmo, las próximas versiones irán completando el puzzle: más elementos, más pseudoclases y menos dependencia de CSS imperativo. WordPress 6.9 no resuelve todo, pero por fin pone a los formularios en el mapa de theme.json y da a diseñadores y desarrolladores una base sólida sobre la que construir interfaces más consistentes y fáciles de mantener.

vía: developer.wordpress