¿Dónde debe definirse la paleta global de un tema de bloques?

La paleta global del sistema de bloques se define en theme.json para que editor y frontend compartan los mismos tokens.

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.

¿Cuánto sabes de WordPress Themes Pro?

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

theme.json inicial

Revisar

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "custom": false,
      "palette": [
        { "slug": "primary", "name": "Primary", "color": "#2563eb" },
        { "slug": "ink", "name": "Ink", "color": "#0f172a" },
        { "slug": "surface", "name": "Surface", "color": "#f8fafc" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "sm", "size": "14px", "name": "Small" },
        { "slug": "base", "size": "16px", "name": "Base" },
        { "slug": "xl", "size": "32px", "name": "XL" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var:preset|color|surface",
      "text": "var:preset|color|ink"
    },
    "typography": {
      "fontSize": "var:preset|font-size|base",
      "lineHeight": "1.6"
    }
  }
}

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.

Control de spacing y unidades

Revisar

{
  "settings": {
    "spacing": {
      "units": ["px", "rem"],
      "spacingScale": {
        "operator": "*",
        "increment": 1.5,
        "steps": 6,
        "mediumStep": 1
      }
    }
  }
}