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

Estilos globales y tokens de diseño en WordPress Themes

Define un sistema visual estable con theme.json para mantener consistencia entre editor, frontend y futuras iteraciones del tema.

Sin una capa global de estilos, cada plantilla termina resolviendo colores, espaciados y tipografía por su cuenta, y eso degrada la coherencia del sitio en pocas semanas.

En WordPress moderno, theme.json funciona como contrato de diseño: declara qué decisiones visuales son oficiales y cómo se aplican en bloques y editor.

Un buen set de tokens no solo mejora estética; reduce tiempo de mantenimiento y evita regresiones cuando cambian contenidos o equipos.

Esta lección te enseña a estructurar paleta, tipografía y spacing con criterio de sistema, no como suma de parches CSS.

  • Si cada bloque define estilos por separado, la deuda visual es inevitable.
  • Con theme.json puedes definir presets de color, tipografía y espaciado reutilizables por todo el sistema de bloques.
  • Además, lo que ve el editor se alinea mejor con lo que verá el usuario final en frontend, reduciendo sorpresas en QA.
  • La clave está en declarar pocos tokens bien elegidos y prohibir variaciones arbitrarias que rompan la identidad visual.
  • Centraliza decisiones visuales en un solo archivo.

Por qué theme.json debe ser tu fuente de verdad

Si cada bloque define estilos por separado, la deuda visual es inevitable.

Con theme.json puedes definir presets de color, tipografía y espaciado reutilizables por todo el sistema de bloques.

Además, lo que ve el editor se alinea mejor con lo que verá el usuario final en frontend, reduciendo sorpresas en QA.

La clave está en declarar pocos tokens bien elegidos y prohibir variaciones arbitrarias que rompan la identidad visual.

  • Centraliza decisiones visuales en un solo archivo.
  • Mejora coherencia entre Site Editor y frontend.
  • Reduce necesidad de CSS correctivo por plantilla.
  • Facilita onboarding de nuevos desarrolladores o diseñadores.

Diseño de tokens: paleta, tipografía y spacing

Un tema profesional no necesita 30 colores ni 20 tamaños de texto.

Empieza con una paleta corta: primario, secundario, fondo, superficie y texto.

Define escala tipográfica con saltos consistentes para headings y texto base.

Para spacing, usa una escala modular que permita componer layouts sin hardcodear valores ad hoc en cada bloque.

Gobernanza de estilos en equipos

Sin reglas de uso, los tokens acaban ignorados y vuelves al caos inicial.

  • Documenta para qué sirve cada token y cuándo no usarlo.
  • Evita estilos inline en bloques salvo casos excepcionales justificados.
  • Revisa PRs visuales con checklist de coherencia global.
  • Versiona cambios de diseño en changelog para trazabilidad.
WordPress Themes Pro
06

Estilos globales y tokens de diseño en WordPress Themes

Define un sistema visual estable con theme.json para mantener consistencia entre editor, frontend y futuras iteraciones del tema.

¿Cuánto sabes de WordPress Themes Pro?

Código del tema: settings.typography.fontSizes

📘 Teoría

Por qué theme.json debe ser tu fuente de verdad

Si cada bloque define estilos por separado, la deuda visual es inevitable.

Con theme.json puedes definir presets de color, tipografía y espaciado reutilizables por todo el sistema de bloques.

Además, lo que ve el editor se alinea mejor con lo que verá el usuario final en frontend, reduciendo sorpresas en QA.

La clave está en declarar pocos tokens bien elegidos y prohibir variaciones arbitrarias que rompan la identidad visual.

  • Centraliza decisiones visuales en un solo archivo.
  • Mejora coherencia entre Site Editor y frontend.
  • Reduce necesidad de CSS correctivo por plantilla.
  • Facilita onboarding de nuevos desarrolladores o diseñadores.

Diseño de tokens: paleta, tipografía y spacing

Un tema profesional no necesita 30 colores ni 20 tamaños de texto.

1

Empieza con una paleta corta: primario, secundario, fondo, superficie y texto.

2

Define escala tipográfica con saltos consistentes para headings y texto base.

3

Para spacing, usa una escala modular que permita componer layouts sin hardcodear valores ad hoc en cada bloque.

Ejemplo simplificado de configuración global
Revisar
{
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#2563eb", "name": "Primary" },
        { "slug": "surface", "color": "#f8fafc", "name": "Surface" },
        { "slug": "text", "color": "#0f172a", "name": "Text" }
      ]
    },
    "spacing": {
      "spacingSizes": [
        { "slug": "xs", "size": "0.5rem" },
        { "slug": "md", "size": "1rem" },
        { "slug": "xl", "size": "2rem" }
      ]
    }
  }
}

Gobernanza de estilos en equipos

Sin reglas de uso, los tokens acaban ignorados y vuelves al caos inicial.

  • Documenta para qué sirve cada token y cuándo no usarlo.
  • Evita estilos inline en bloques salvo casos excepcionales justificados.
  • Revisa PRs visuales con checklist de coherencia global.
  • Versiona cambios de diseño en changelog para trazabilidad.

🧪 Aprende probando

Ejemplo Ejemplo: bloque que consume tokens globales Visualiza cómo un componente queda alineado con el sistema sin CSS local complejo.
⌄

🏁 Retos

Reto Reto: reforzar token global Completa un preset de color para texto principal en theme.json.
⌄

🧰 Recursos

Enlaces útiles

Global Settings and Styles theme.json v2 Reference Styles Overview
Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro
Recursos del curso 30
📘 Glosario 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces
‹
Lección 05
Bloques y Full Site Editing: visión técnica inicial
Lección 07
Jerarquía de plantillas: decidir qué archivo renderiza cada vista
›

¿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 .