¿Cuál es la ubicación recomendada para definir estilos globales en un tema de bloques?

La clave styles de theme.json es la fuente principal para global styles en block themes.

Tema de bloques 03: estilos globales con criterio de sistema

Implementa estilos globales en theme.json para que tipografía, colores y espaciado sean coherentes entre editor y frontend.

¿Cuánto sabes de WordPress Themes Pro?

📘 Teoría

Principios de estilos globales

Primero define reglas globales; después ajusta bloques concretos si hace falta.

Empieza por cuerpo del sitio: color de texto, fondo, tipografía base y line-height consistente.

Define escalas de tamaño y spacing pensadas para contenido real, no solo para la home.

Evita mezclar demasiados valores arbitrarios: un sistema corto y claro se mantiene mejor en equipos.

Un solo lenguaje visual para todo el tema.
Menos CSS puntual y menos deuda técnica.
Mejor coherencia editor/frontend.
Más velocidad en QA visual.

Aplicar estilos globales en theme.json

Declara estilos en la clave styles para que afecten de forma predecible a todo el sitio.

Bloque base de styles

Revisar

{
  "styles": {
    "color": {
      "background": "var:preset|color|surface",
      "text": "var:preset|color|ink"
    },
    "typography": {
      "fontFamily": "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
      "fontSize": "var:preset|font-size|base",
      "lineHeight": "1.65"
    },
    "elements": {
      "link": {
        "color": { "text": "var:preset|color|primary" },
        "typography": { "textDecoration": "none" }
      }
    }
  }
}

Ajustar estilos por bloque sin romper el sistema

Haz overrides por bloque solo cuando existe una necesidad funcional o de accesibilidad clara.

Puedes definir estilos específicos en styles.blocks para bloques como core/button o core/heading.

Mantén trazabilidad: documenta por qué un bloque rompe el estilo global y qué impacto tiene.

Si hay demasiados overrides, revisa el sistema global; quizá el problema no era el bloque, sino la base.

Ejemplo de ajuste en core/button

Revisar

{
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": "10px"
        },
        "spacing": {
          "padding": {
            "top": "0.7rem",
            "right": "1rem",
            "bottom": "0.7rem",
            "left": "1rem"
          }
        }
      }
    }
  }
}