{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Estilos globales y theme.json

Construye un sistema visual consistente con tokens globales y reglas claras en theme.json para evitar caos de estilos en Gutenberg.

En Gutenberg, el diseño deja de ser una suma de ajustes manuales por bloque: pasa a ser un sistema gobernado por tokens globales y reglas compartidas.

El archivo <code>theme.json</code> centraliza decisiones de color, tipografía, spacing y estilos por bloque, permitiendo consistencia en todo el sitio.

La ruta de operación diaria suele combinar <code>Apariencia > Editor > Estilos</code> para ajustes visuales y repositorio de tema para mantener reglas en <code>theme.json</code>.

Sin sistema global aparecen overrides ad hoc, inconsistencias entre páginas y dificultad para mantener marca y accesibilidad a medida que crece el contenido.

  • El objetivo no es “dejarlo bonito”, sino construir un sistema de estilos que el equipo pueda aplicar sin romper coherencia.
  • Empieza por definir tokens base: paleta, escala tipográfica, espaciados y radios. Estos tokens deben responder a decisiones de marca y legibilidad.
  • Después establece qué puede modificar el editor en contenido y qué queda bloqueado para proteger consistencia. Esta frontera reduce errores en producción.
  • Valida siempre contraste y legibilidad en varios dispositivos; un sistema visual correcto en desktop puede fallar en móvil si no se prueba con criterio.
  • Ruta visual: <code>Apariencia > Editor > Estilos</code>

Fundamentos de diseño sistémico en WordPress

El objetivo no es “dejarlo bonito”, sino construir un sistema de estilos que el equipo pueda aplicar sin romper coherencia.

Empieza por definir tokens base: paleta, escala tipográfica, espaciados y radios. Estos tokens deben responder a decisiones de marca y legibilidad.

Después establece qué puede modificar el editor en contenido y qué queda bloqueado para proteger consistencia. Esta frontera reduce errores en producción.

Valida siempre contraste y legibilidad en varios dispositivos; un sistema visual correcto en desktop puede fallar en móvil si no se prueba con criterio.

  • Ruta visual: <code>Apariencia > Editor > Estilos</code>
  • Base técnica: <code>theme.json</code>
  • Tokens mínimos: color, tipografía, spacing, border radius
  • Regla clave: menos overrides locales, más sistema global

Claves teóricas para gobernar estilos

Estas decisiones evitan deuda visual y facilitan mantener calidad cuando participan varios editores.

Aplicación práctica en un sistema real

Este flujo te permite pasar de ajustes manuales dispersos a un diseño gobernado por reglas globales.

<strong>Paso 1</strong>: define paleta y tipografía base en <code>theme.json</code> según objetivos de marca y legibilidad.

<strong>Paso 2</strong>: configura spacing y estilos por bloque, limitando personalizaciones de alto riesgo que generan inconsistencia.

<strong>Paso 3</strong>: valida en <code>Apariencia > Editor > Estilos</code> con contenido real, revisando contraste, jerarquía visual y comportamiento responsive.

  • Definir tokens globales del sistema
  • Aplicar reglas por bloque con criterio
  • Restringir opciones que rompen consistencia
  • Validar accesibilidad y legibilidad final

Validación y control de calidad

No cierres esta lección hasta demostrar que el sistema visual funciona de forma consistente en todo el sitio.

Comprueba varias páginas y tipos de contenido para verificar que los estilos globales se aplican de forma homogénea sin parches locales.

Analiza contraste, jerarquía tipográfica y espaciado en móvil y desktop; si hay diferencias erráticas, revisa tokens y overrides.

Documenta decisiones críticas del sistema para que futuras iteraciones no rompan coherencia de marca ni accesibilidad.

  • Tokens globales coherentes y aplicados
  • Sin overrides caóticos en contenido
  • Contraste y legibilidad validados
  • Cambios del sistema documentados
WordPress
17

Estilos globales y theme.json

Construye un sistema visual consistente con tokens globales y reglas claras en theme.json para evitar caos de estilos en Gutenberg.

¿Cuánto sabes de WordPress?

Código del tema: theme.json

📘 Teoría

Fundamentos de diseño sistémico en WordPress

El objetivo no es “dejarlo bonito”, sino construir un sistema de estilos que el equipo pueda aplicar sin romper coherencia.

Empieza por definir tokens base: paleta, escala tipográfica, espaciados y radios. Estos tokens deben responder a decisiones de marca y legibilidad.

Después establece qué puede modificar el editor en contenido y qué queda bloqueado para proteger consistencia. Esta frontera reduce errores en producción.

Valida siempre contraste y legibilidad en varios dispositivos; un sistema visual correcto en desktop puede fallar en móvil si no se prueba con criterio.

  • Ruta visual: Apariencia > Editor > Estilos
  • Base técnica: theme.json
  • Tokens mínimos: color, tipografía, spacing, border radius
  • Regla clave: menos overrides locales, más sistema global

Claves teóricas para gobernar estilos

Estas decisiones evitan deuda visual y facilitan mantener calidad cuando participan varios editores.

1

1) Tokens y semántica visual

Un token debe representar intención (primario, secundario, énfasis), no solo un color suelto.

  • Nombra tokens por función, no por apariencia (por ejemplo, primary en lugar de azul-1).
  • Mantén una escala tipográfica limitada y coherente.
  • Evita crear variantes sin uso real en el proyecto.
2

2) Restricciones editoriales inteligentes

Dar libertad total suele degradar coherencia entre páginas.

  • Permite personalización solo donde aporte valor editorial.
  • Bloquea opciones que rompen marca o accesibilidad.
  • Documenta el porqué de cada restricción para el equipo.
3

3) Contraste y accesibilidad

Diseño consistente sin accesibilidad sigue siendo diseño defectuoso.

  • Evalúa combinaciones de texto/fondo según WCAG.
  • No uses color como único canal de información.
  • Prueba estados hover/focus en componentes interactivos.
4

4) Evolución controlada del sistema

El sistema visual cambia, pero debe hacerlo con trazabilidad.

  • Versiona cambios de theme.json con notas claras.
  • Evalúa impacto en bloques existentes antes de publicar.
  • Revisa trimestralmente si hay estilos obsoletos o duplicados.

Aplicación práctica en un sistema real

Este flujo te permite pasar de ajustes manuales dispersos a un diseño gobernado por reglas globales.

Paso 1: define paleta y tipografía base en theme.json según objetivos de marca y legibilidad.

Paso 2: configura spacing y estilos por bloque, limitando personalizaciones de alto riesgo que generan inconsistencia.

Paso 3: valida en Apariencia > Editor > Estilos con contenido real, revisando contraste, jerarquía visual y comportamiento responsive.

  • Definir tokens globales del sistema
  • Aplicar reglas por bloque con criterio
  • Restringir opciones que rompen consistencia
  • Validar accesibilidad y legibilidad final

Validación y control de calidad

No cierres esta lección hasta demostrar que el sistema visual funciona de forma consistente en todo el sitio.

Comprueba varias páginas y tipos de contenido para verificar que los estilos globales se aplican de forma homogénea sin parches locales.

Analiza contraste, jerarquía tipográfica y espaciado en móvil y desktop; si hay diferencias erráticas, revisa tokens y overrides.

Documenta decisiones críticas del sistema para que futuras iteraciones no rompan coherencia de marca ni accesibilidad.

  • Tokens globales coherentes y aplicados
  • Sin overrides caóticos en contenido
  • Contraste y legibilidad validados
  • Cambios del sistema documentados

🧰 Recursos

Enlaces útiles

Theme.json Reference Global Settings & Styles (developer) Site Editor Styles WCAG Contrast Minimum
Test

Comprueba tus conocimientos con un test sobre WordPress.

Test de WordPress
Recursos del curso 34
📘 Glosario 🎧 Audios 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards
‹
Lección 16
Plantillas y partes de plantilla
Lección 18
SEO y accesibilidad con bloques
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .