---
title: "WordPress 6.9 por fin mima a los formularios: así cambia el juego con theme.json"
description: "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..."
url: https://wpdirecto.com/wordpress-6-9-por-fin-mima-a-los-formularios-asi-cambia-el-juego-con-theme-json/
date: 2025-11-22
modified: 2025-11-18
author: "Editor WPDirecto"
image: https://wpdirecto.com/wp-content/uploads/2024/08/desarrolladores-colaborando-codigo.jpeg
categories: ["Actualidad"]
tags: ["desarrollo", "json"]
type: post
lang: es
---

# WordPress 6.9 por fin mima a los formularios: así cambia el juego con theme.json

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 \`\`.
- `textInput`: agrupa:
  - \`\`
  - \`\`

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:

| Aspecto | ¿Se puede con `theme.json` en 6.9? | Notas |
| --- | --- | --- |
| Bordes (color, radio, ancho) | ✅ Sí | En `styles.elements.select` y `textInput.border` |
| Colores de fondo y texto | ✅ Sí | `color.background` y `color.text` |
| Espaciado / padding | ✅ Sí | `spacing.padding` |
| Sombras (`shadow`) | ✅ Sí | Soporta valores de sombra estándar |
| Outline básico (no estado) | ✅ Sí | `outline.color`, `outline.width`, etc. |
| Estados `:focus`, `:hover` | ❌ No | Requiere CSS manual |
| Caret (color del cursor) | ❌ No | Sólo con CSS (`caret-color`) |
| `label`, `checkbox`, `radio` | ❌ No | Siguen dependiendo de CSS |
| `::placeholder` | ❌ No | Hay propuesta abierta en GitHub para añadirlo |

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 \`\` 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 desplegablepara 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](https://developer.wordpress.org/news/2025/11/how-wordpress-6-9-gives-forms-a-theme-json-makeover/)