Tema de bloques 01: theme.json como contrato del diseño

Aprende a usar theme.json para definir tokens globales, limitar decisiones editoriales y mantener consistencia en todo el sitio.

En temas de bloques, theme.json es el archivo que define cómo se comporta el diseño en todo el proyecto.

Si lo tratas como un archivo secundario, acabas con estilos inconsistentes entre editor y frontend.

La práctica profesional es convertirlo en un contrato de diseño: colores, tipografía, espaciado y límites editoriales claros.

Esto mejora la experiencia de edición, reduce CSS ad hoc y evita que cada página termine con decisiones visuales distintas.

  • No es solo configuración: es una capa de gobierno visual del tema.
  • Centraliza tokens de diseño para que bloques core y patrones compartan la misma paleta, escala tipográfica y espaciados.
  • Permite activar o desactivar opciones del editor para evitar que cada usuario cree variantes visuales fuera del sistema.
  • Sin esta capa, terminas corrigiendo inconsistencias con CSS puntual en cada plantilla o entrada.
  • Consistencia entre editor del sitio y frontend.

Qué resuelve realmente theme.json

No es solo configuración: es una capa de gobierno visual del tema.

Centraliza tokens de diseño para que bloques core y patrones compartan la misma paleta, escala tipográfica y espaciados.

Permite activar o desactivar opciones del editor para evitar que cada usuario cree variantes visuales fuera del sistema.

Sin esta capa, terminas corrigiendo inconsistencias con CSS puntual en cada plantilla o entrada.

  • Consistencia entre editor del sitio y frontend.
  • Menos overrides CSS en cascada.
  • Mejor control de branding en equipos grandes.
  • Base clara para mantenimiento a largo plazo.

Estructura mínima recomendada

Empieza simple: settings para decisiones globales y styles para defaults visuales.

Limitar opciones para proteger el sistema

Dar libertad total en el editor suele romper consistencia del tema en pocas semanas.

Desactiva color personalizado y controla unidades de spacing cuando el proyecto requiere guía estricta de marca.

Define presets útiles, no infinitos: demasiadas opciones en editor producen ruido y decisiones inconsistentes.

Alinea estas restricciones con diseño y contenido para que el equipo entienda el porqué de cada límite.

WordPress Themes Pro
21

Tema de bloques 01: theme.json como contrato del diseño

Aprende a usar theme.json para definir tokens globales, limitar decisiones editoriales y mantener consistencia en todo el sitio.

Código del tema: settings.color.palette

📘 Teoría

Qué resuelve realmente theme.json

No es solo configuración: es una capa de gobierno visual del tema.

Centraliza tokens de diseño para que bloques core y patrones compartan la misma paleta, escala tipográfica y espaciados.

Permite activar o desactivar opciones del editor para evitar que cada usuario cree variantes visuales fuera del sistema.

Sin esta capa, terminas corrigiendo inconsistencias con CSS puntual en cada plantilla o entrada.

  • Consistencia entre editor del sitio y frontend.
  • Menos overrides CSS en cascada.
  • Mejor control de branding en equipos grandes.
  • Base clara para mantenimiento a largo plazo.

Estructura mínima recomendada

Empieza simple: settings para decisiones globales y styles para defaults visuales.

Limitar opciones para proteger el sistema

Dar libertad total en el editor suele romper consistencia del tema en pocas semanas.

1

Desactiva color personalizado y controla unidades de spacing cuando el proyecto requiere guía estricta de marca.

2

Define presets útiles, no infinitos: demasiadas opciones en editor producen ruido y decisiones inconsistentes.

3

Alinea estas restricciones con diseño y contenido para que el equipo entienda el porqué de cada límite.

🧪 Aprende probando

Ejemplo Ejemplo: paleta global reutilizable Plantilla de presets de color para evitar hex sueltos en bloques.

🏁 Retos

Reto Reto: añadir configuración de spacing Completa el objeto de settings para limitar unidades y activar escala de espaciado.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

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

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com