theme.json básico para Full Site Editing

El archivo theme.json es el sistema de configuración central de los temas modernos de WordPress con Full Site Editing. Define la paleta de colores, tipografías y tamaños de layout de forma global, sin necesidad de CSS personalizado.

Casos de uso: temas con FSE (Block Themes), definir la guía de estilo del sitio de forma centralizada, limitar las opciones del editor para los clientes, consistencia visual entre todos los bloques.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "name": "Primario",   "slug": "primary",    "color": "#e94560" },
                { "name": "Secundario", "slug": "secondary",  "color": "#1a1a2e" },
                { "name": "Fondo",      "slug": "background", "color": "#ffffff" },
                { "name": "Texto",      "slug": "text",       "color": "#333333" }
            ]
        },
        "typography": {
            "fontSizes": [
                { "name": "Pequeño", "slug": "small",   "size": "14px" },
                { "name": "Normal",  "slug": "normal",  "size": "16px" },
                { "name": "Grande",  "slug": "large",   "size": "24px" },
                { "name": "XL",      "slug": "x-large", "size": "36px" }
            ]
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

• $schema — Habilita el autocompletado y validación en editores como VS Code.
• color.palette — Define los colores disponibles en el selector de colores del editor de bloques. El slug genera la clase CSS has-primary-color automáticamente.
• typography.fontSizes — Tamaños de fuente disponibles en el editor. Generan clases como has-large-font-size.
• layout.contentSize / wideSize — Ancho máximo del contenido normal y del contenido en modo «ancho».