Trabajar con propiedades y pares clave-valor en theme.json

Comprender la estructura y las propiedades del archivo theme.json es fundamental para el desarrollo de temas de bloques. Este archivo sirve como eje principal de configuración para todos los temas basados en bloques.

Tanto si estás construyendo un tema desde cero, personalizando uno existente, desarrollando una variación de estilo o trabajando en un tema hijo, comprender cómo trabajar con theme.json es esencial.

Afortunadamente, JSON (JavaScript Object Notation) es un formato legible por humanos con una estructura jerárquica que organiza la información de propiedades generales a específicas. En el contexto de theme.json, la familiaridad con las Hojas de Estilo en Cascada (CSS, Cascading Style Sheets) es más relevante que un conocimiento profundo de JavaScript.

Este artículo pretende desglosar las propiedades primarias y secundarias (anidadas) de un archivo theme.json, centrándose en las propiedades clave de configuración y estilos. Estos son los elementos centrales del archivo, y proporcionaremos explicaciones detalladas y ejemplos de código para cada uno de ellos.

Nos basaremos en los cimientos establecidos en nuestro artículo anterior, Libera el poder de theme.json: Personaliza tu tema de WordPress como un profesional especialmente en la sección Trabajar con las propiedades del archivo theme.json.

Cómo se muestran los estilos en un tema de bloques

WordPress utiliza un proceso en cascada integrado para mostrar los estilos de un sitio. Cuando varias fuentes definen el mismo ajuste o estilo, WordPress debe determinar cuál tiene prioridad. A continuación se muestra el orden de preferencia que sigue WordPress para decidir qué estilos se aplican:

1. Core de WordPress — El archivo fallback theme.json está en el directorio wp-includes. Este archivo se actualiza con las principales versiones de WordPress y no debe editarse.
2. Tema — El archivo principal theme.json utilizado por los desarrolladores de temas para definir la configuración, los estilos y otras propiedades del tema.
3. Variaciones de estilo — Si un tema incluye variaciones de estilo, cada una tiene su propio archivo theme.json almacenado en el subdirectorio styles del tema.
4. Tema hijo — Al igual que con los temas clásicos, un tema hijo puede modificar un tema padre sin alterar sus archivos (opcional).
5. Variaciones de estilo del tema hijo — De forma similar a las variaciones de estilo normales, un tema hijo puede tener su propio archivo theme.json en su subdirectorio de estilos (opcional).
6. Estilos creados por el usuario — Son estilos personalizados añadidos a través de los editores de WordPress (para páginas, entradas o el sitio en su conjunto) y almacenados en la base de datos.

El orden en cascada garantiza que los estilos de las fuentes de mayor prioridad anulen a los de menor prioridad. Por ejemplo, los ajustes del archivo theme.json del tema prevalecerán sobre los del core de WordPress theme.json. Del mismo modo, la variación de estilo de un tema hijo precederá a la variación de estilo del tema padre.

Los estilos creados por el usuario (6) tienen la máxima prioridad, anulando todos los demás estilos de la cascada.

En este artículo, nos centraremos en el archivo theme.json situado en el directorio raíz de cualquier tema de bloques de WordPress.

Una referencia para las propiedades primarias y sus clave-valor

Exploremos los siete objetos de nivel superior de theme.json, que hemos agrupado en tres secciones para facilitar la comprensión de la información.

Algunas definiciones antes de entrar en materia

Cuando trabajes con theme.json, es probable que encuentres distintas definiciones para componentes importantes. Para mayor claridad, así es como los definimos en este artículo:

1. Secciones — Agrupaciones de opciones de nivel superior (también denominadas «objetos de nivel superior» en algunos artículos).
2. Objetos — Los elementos principales del archivo theme.json, como settings y styles.
3. Propiedades — Los componentes dentro de los objetos. Por ejemplo, el objeto settings contiene 12 propiedades diferentes.
4. Pares clave-valor — Las propiedades están formadas por pares clave-valor. Una «clave» representa un atributo de la propiedad y va entre comillas. Un «valor» puede ser un booleano, una cadena o un array.

Cuando mencionamos «por defecto», nos referimos a las configuraciones por defecto del archivo del core theme.json, ubicado en wp-includes/theme.json.

Por último, «usuarios» se refiere a cualquiera que utilice el Admin de WordPress y pueda modificar la configuración en los editores de sitios, páginas o entradas.

Resumen de la sintaxis

1. Los booleanos no van entre comillas.
2. Las cadenas van entre comillas dobles.
3. Los arrays van entre corchetes [].
4. Los objetos se encierran entre llaves {}, que contienen múltiples propiedades u objetos anidados.
5. Las comas se utilizan para separar varios pares clave-valor dentro de un objeto.

Aquí tienes un ejemplo de sintaxis típica:

{
    "house": {
        "rooms": "kitchen"
    }
}

Agrupar las propiedades

Hemos organizado las propiedades en tres secciones para facilitar la navegación:

1. Propiedades básicas
2. Propiedades de ajustes y estilos
3. Propiedades de plantillas y patrones

Para simplificar los ejemplos, a veces hemos omitido las envolturas externas de los objetos. En lugar de mostrar toda la estructura:

{
    "settings": {
        "appearanceTools": false,
        "background": {
            "backgroundImage": true
        }
    }
}

Podríamos acortarla a:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

.

Propiedades básicas

Al principio de un archivo theme.json, encontrarás normalmente dos propiedades clave: $schema y version. Estas propiedades suelen colocarse al principio del archivo. La versión actual del schema es la 3, introducida con WordPress 6.6.

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Propiedades de configuración y estilos

Si estás familiarizado con los temas clásicos, considera las propiedades de configuración como características y funcionalidades que generalmente se establecerían en el archivo functions.php y expuestas en la sección Apariencia > Personalizada del admin de WordPress.

Los estilos, por otro lado, son similares a las propiedades CSS que solían residir en el archivo styles.css, controlando la disposición y el diseño del tema.

Configuración

Excepto las propiedades block y elements, todos los demás ajustes son globales. Como muchos de estos ajustes son booleanos, actúan como conmutadores para activar o desactivar una función de la interfaz de usuario.

Es importante tener en cuenta que no todas las propiedades se aplican en todos los contextos. Por ejemplo, no es posible permitir a los usuarios establecer una altura mínima para un bloque de párrafo.

Herramientas de apariencia

Estos ajustes pueden activarse colectiva o individualmente utilizando "appearanceTools": true.

Activar esta función expone varias opciones de interfaz de usuario en el editor de WordPress, ahorrando tiempo a los desarrolladores. Por defecto, estas herramientas están desactivadas ("appearanceTools": false).

Las claves dentro de appearanceTools incluyen:

• background
  • backgroundImage — Permite al usuario añadir una imagen de fondo a los bloques.
  • backgroundSize — Define cómo se escala la imagen de fondo (cubrir, contener, etc.).
• border
  • color — Permite seleccionar el color de los bordes.
  • style — Permite al usuario elegir el estilo del borde (sólido, discontinuo, punteado, etc.).
  • width — Controla el grosor del borde.
  • radius — Permite al usuario establecer esquinas redondeadas ajustando el radio del borde.
• color
  • link — Permite establecer un color para los enlaces dentro del contenido.
  • heading — Permite a los usuarios definir colores para las etiquetas de encabezado (<h1>, <h2>, etc.).
  • button — Controla el color de los botones del tema.
  • caption — Permite establecer un color personalizado para los pies de foto.
• dimensions
  • aspectRatio — Permite a los usuarios controlar la relación anchura-altura de los bloques.
  • minHeight — Permite establecer una altura mínima para los bloques.
• position
  • sticky — Permite al usuario hacer que un bloque sea pegajoso, es decir, que permanezca fijo en su sitio mientras se desplaza.
• spacing
  • blockGap — Controla el espaciado entre bloques.
  • margin — Permite al usuario ajustar los márgenes alrededor de un bloque.
  • padding — Controla el relleno dentro de un bloque, definiendo el espacio entre su contenido y su borde.
• typography
  • lineHeight – Permite a los usuarios ajustar la altura de línea (espacio entre líneas de texto) para mejorar la legibilidad.

Ejemplo: Si quieres que los usuarios añadan una imagen de fondo manteniendo desactivadas otras herramientas de apariencia, utiliza:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Bloques

La propiedad blocks permite a los usuarios habilitar ajustes por bloque, que pueden anular los ajustes globales.

Ejemplo: Si appearanceTools está configurado como false, pero aún así quieres exponer controles de borde para un bloque, utiliza:

"border": {
    "color": true,
    "style": true,
    "width": true,
    "radius": true
}

Color

Esta propiedad permite a los usuarios establecer opciones de color, como el color de fondo, el color del texto o los degradados.

Claves dentro de la propiedad color:

• background — Controla el color de fondo de los bloques o elementos.
• custom — Activa o desactiva la posibilidad de que los usuarios seleccionen colores personalizados.
• customDuotone — Permite a los usuarios aplicar filtros duotono personalizados a las imágenes.
• customGradient — Habilita opciones de degradado personalizadas.
• defaultDuotone — Proporciona opciones predeterminadas de filtro duotono para imágenes.
• defaultGradient — Define las opciones de degradado por defecto disponibles para los usuarios.
• defaultPalette — Controla la paleta de colores por defecto del tema.
• duotone — Permite filtros duotono en imágenes.
• gradient — Habilita opciones de degradado para fondos u otros elementos.
• link — Define el color de los enlaces en el tema.
• text — Controla las opciones de color del texto.
• heading — Establece colores para los encabezados (por ejemplo, h1, h2, etc.).
• button — Controla las opciones de color de los botones.
• caption — Establece el color del pie de foto para los elementos multimedia.

Veamos algunos ejemplos:

Ejemplo 1: Si quieres desactivar el selector de color para los usuarios, puedes utilizar lo siguiente:

"color": {
    "custom": false
}

Ejemplo 2: Para establecer colores de tema primario y secundario personalizados, puedes utilizar esta configuración:

"color": {
   "palette": [
       { "slug": "primary", "color": "#0000ff", "name": "Primary" },
       { "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
   ]
}

Dimensions (Dimensiones)

Esta propiedad proporciona opciones para controlar las dimensiones del bloque, como la anchura, la altura y la relación de aspecto.

Claves dentro de la propiedad dimensions:

• aspectRatio — Permite a los usuarios establecer o bloquear la relación de aspecto de un bloque (por ejemplo, 16:9, 4:3).
• defaultAspectRatios — Define relaciones de aspecto por defecto para los bloques.
• minHeight — Permite establecer una altura mínima para los bloques.

Por ejemplo, para permitir a los usuarios establecer una altura mínima para los bloques admitidos, utiliza lo siguiente:

"dimensions": {
    "minHeight": true
}

Layout (Diseño)

La propiedad layout permite a los usuarios establecer opciones relacionadas con el diseño, como la anchura del contenido y si los usuarios pueden personalizar el diseño. Esto permite a los usuarios establecer opciones de diseño con estas claves:

• contentSize — Define la anchura por defecto de los bloques.
• wideSize — Define la anchura de los bloques cuando se selecciona la opción de alineación ancha.
• allowEditing — Determina si los usuarios pueden editar las opciones de diseño.
• allowCustomContentAndWideSize — Permite la personalización de contentSize y wideSize.

Ejemplo: Configurar las opciones de maquetación con anchos de bloque por defecto y ancho:

"layout": {
    "contentSize": "620px",
    "wideSize": "1000px"
}

Lightbox (Caja de luz)

La propiedad lightbox permite a los usuarios activar la función «Expandir al hacer clic» para las imágenes, abriéndolas en una vista más grande al hacer clic.

Claves dentro de la propiedad lightbox:

• enabled — Activa o desactiva la función lightbox.
• allowEditing — Permite a los usuarios cambiar la configuración de la caja de luz.

Ejemplo: Para permitir a los usuarios alternar la función de lightbox para las imágenes, utiliza esta configuración:

"blocks": {
    "core/image": {
        "lightbox": {
            "allowEditing": true
        }
    }
}

Position (Posición)

La propiedad position permite a los usuarios controlar la posición de los bloques, como por ejemplo hacer que un bloque sea pegajoso (sticky) en la página.

Ejemplo: Hacer que un bloque sea pegajoso:

"position": {
    "sticky": true
}

Shadow (Sombra)

Esta propiedad permite a los usuarios aplicar efectos de sombra a los bloques, ya sea utilizando preajustes predefinidos o sombras definidas por el usuario.

Claves dentro de la propiedad shadow:

• defaultPresets — Activa o desactiva los preajustes de sombra predefinidos.
• presets — Permite a los usuarios definir preajustes de sombra personalizados.

Aquí tienes un ejemplo en el que se desactivan las sombras por defecto y se define una sombra personalizada llamada «Natural»:

"shadow": {
    "defaultPresets": false,
    "presets": [
        { "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
    ]
}

Los números indican los clics realizados en el editor del sitio para mostrar la interfaz de usuario. El último paso muestra la sombra «Natural».

Spacing (Espaciado)

Esta propiedad define cómo se controla el espaciado (relleno, margen, hueco) en el editor.

Claves dentro de la propiedad spacing:

• blockGap — Controla el espacio entre bloques.
• margin — Permite establecer márgenes alrededor de los bloques.
• padding — Proporciona opciones para establecer el relleno dentro de los bloques.
• units — Define las unidades disponibles para el espaciado (por ejemplo, px, rem).
• customSpacingSize — Permite a los usuarios establecer tamaños de espaciado personalizados.
• spacingSizes — Define un rango de tamaños de espaciado preestablecidos.
• spacingScale — Permite escalar las unidades de espaciado.

Ejemplo: Para limitar a los usuarios a dos unidades de medida (píxeles y rem) para el relleno, los márgenes, las anchuras y las alturas, y para exponer los controles de espaciado en el editor del sitio, establece appearanceTools en true y configúralo así:

"spacing": {
    "units": ["px", "rem"]
}

Typography (Tipografía)

Esta propiedad controla los ajustes relacionados con el texto de tu tema, como el tamaño de la fuente, el peso y la altura de línea.

Claves dentro de la propiedad typography:

• defaultFontSizes — Define los tamaños de fuente por defecto disponibles para los usuarios.
• customFontSize — Activa o desactiva la posibilidad de establecer tamaños de fuente personalizados.
• fontStyle — Controla el estilo de la fuente (por ejemplo, normal, cursiva).
• fontWeight — Permite a los usuarios establecer el peso de la fuente (por ejemplo, negrita, ligera).
• fluid — Permite una tipografía fluida, ajustando el tamaño de la fuente dinámicamente en función del tamaño de la pantalla.
• letterSpacing — Controla el espaciado entre letras.
• lineHeight — Establece la altura de cada línea de texto.
• textAlign — Permite controlar la alineación del texto (por ejemplo, izquierda, centro, derecha).
• textDecoration — Proporciona opciones para la decoración del texto (por ejemplo, subrayado).
• writingMode — Establece el modo de escritura del texto (por ejemplo, horizontal o vertical).

Ejemplo: Para desactivar tanto los tamaños de fuente personalizados como las opciones de letra capital (dropCap), utiliza lo siguiente:

"typography": {
    "customFontSize": false,
    "dropCap": false
}

En este caso, las dos teclas resaltadas no aparecerán en el editor.

Root padding aware alignments (Alineaciones que tienen en cuenta el padding raíz)

Cuando se establece en true, esta propiedad garantiza que las alineaciones de bloque ancho o ancho completo sean conscientes del padding aplicado al elemento raíz de la página (por ejemplo, <html> o <body>), garantizando una alineación adecuada incluso cuando se aplica padding.

Ejemplo:

"useRootPaddingAwareAlignments": true

Cuando se establece en true, también debes definir los valores de los padding superior, derecho, inferior e izquierdo de la raíz como un estilo. (Más información sobre las propiedades de estilo más adelante).

"spacing": {
    "padding": {
        "top": "0",
        "right": "100px",
        "bottom": "0",
        "left": "100px"
    }
}

Aplicando el ajuste useRootPaddingAwareAlignements y el padding derecho e izquierdo al cuerpo (como en el código anterior) se obtiene lo siguiente.

Styles (Estilos)

La propiedad styles te permite aplicar estilos CSS a la raíz (por defecto), a elementos específicos o a bloques individuales de tu tema.

Estilos de fondo

Puedes controlar las propiedades relacionadas con el fondo, como las imágenes, el posicionamiento y los adjuntos.

Claves comunes para el fondo:

• backgroundImage — Define la imagen de fondo para el bloque o elemento.
• backgroundPosition — Establece la posición de la imagen de fondo (por ejemplo, centro, arriba-derecha).
• backgroundRepeat — Especifica si la imagen de fondo se repite (por ejemplo, repetir, no repetir).
• backgroundSize — Controla el tamaño de la imagen de fondo (por ejemplo, cover (cubrir), contain (contener)).
• backgroundAttachment — Especifica si la imagen de fondo es fija o se desplaza con la página.

Por ejemplo, puedes establecer una imagen de fondo para tu tema:

"background": {
   "backgroundImage": {
       "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
   }
}

Bloquear estilos específicos

Puedes aplicar estilos específicos, como sombra, tipografía y bordes, a bloques individuales.

Claves para el borde:

• color — Define el color del borde.
• radius — Define el radio del borde para esquinas redondeadas.
• style — Especifica el estilo del borde (por ejemplo, sólido, punteado).
• width — Controla la anchura del borde.
• top, right, bottom, left — Te permite definir estilos de borde individuales para cada lado.

Por ejemplo, lo siguiente establece un borde rojo sólido de 20px alrededor de toda la página:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

También puedes asignar CSS personalizado a un bloque específico, a un elemento o a la raíz.
Por ejemplo, el siguiente código aplica un color de texto rojo a un bloque de tabla:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Estilos de color

La propiedad color te permite controlar los ajustes de fondo, degradado y color del texto.
Claves para color:

• background — Define el color de fondo del bloque o elemento.
• gradient — Define un degradado de fondo para el bloque.
• text — Controla el color del texto.

El siguiente ejemplo establece un fondo negro con texto blanco en todos los elementos de todas las páginas:

"color": {
   "background": "#000000",
   "text": "#ffffff"
}

CSS

La propiedad css te permite adjuntar estilos personalizados a clases específicas, permitiendo un control más granular sobre los estilos del tema.

Ejemplo: Aplica estilos personalizados a wp-block-template-parts y wp-block-button, y añade un efecto hover para el botón:

"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"

Como puedes ver, a las partes de la plantilla de cabecera y pie de página se les asigna background-color y padding, mientras que el estado hover para el botón tiene un fondo blanco con texto negro.

Dimensions (Dimensiones)

La propiedad dimensions te permite controlar la anchura, la altura y la relación de aspecto de los bloques.

Claves para las dimensiones:

• aspectRatios — Define relaciones de aspecto personalizadas para los elementos.
• minHeight — Define la altura mínima de los bloques.

Ejemplo: Crea una relación de aspecto personalizada de 3:7 para un bloque de imagen:

"blocks": {
   "core/image": {
       "dimensions": {
           "aspectRatio": "custom"
       }
   }
}

Sin embargo, lo anterior por sí solo no es suficiente. Debes registrar el estilo «personalizado» dentro de las secciones de configuración.

"dimensions": {
   "defaultAspectRatios": true,
   "aspectRatios": [
       {
           "name": "Custom Ratio 3:7",
           "slug": "custom",
           "ratio": "3/7"
       }
   ]
}

Aquí puedes ver que se ha añadido la opción «Proporción personalizada». Si prefieres eliminar las siete relaciones de aspecto predeterminadas, elimina "defaultAspectRatios":true de la sección de configuración.

Estilos específicos de cada elemento

La propiedad elements te permite aplicar estilos a elementos HTML específicos, como enlaces, botones o encabezados.

Por ejemplo, el siguiente código desactiva la decoración del texto (subrayado) para todos los enlaces:

"elements": {
   "link": {
       "typography": {
           "textDecoration": "none"
       }
   }
}

Filter (Filtro)

La propiedad filter te permite aplicar efectos de filtro similares a los de CSS (por ejemplo, desenfoque, brillo) a determinados bloques como las imágenes.

Ejemplo: Aplica un filtro de desenfoque y brillo a un bloque de imagen:

"blocks": {
   "core/image": {
       "filter": {
           "duotone": "blur(5px) brightness(0.8)"
       }
   }
}

Aquí se han aplicado efectos de desenfoque y brillo al bloque de imágenes. Otros valores de filtro disponibles son:

• contrast — Ajusta el contraste del elemento.
• grayscale — Convierte el elemento a escala de grises.
• invert — Invierte los colores del elemento.
• opacity — Controla la transparencia del elemento.
• saturate — Aumenta o disminuye la saturación de los colores.
• sepia — Aplica un tono sepia al elemento.

Outline (Contorno)

La propiedad outline define estilos para los contornos dibujados fuera del borde del elemento, sin afectar al espacio de diseño.

Claves para el contorno:

• color — Establece el color del contorno.
• offset — Controla el espacio entre el borde y el contorno.
• style — Especifica el estilo del contorno (por ejemplo, punteado, sólido).
• width — Establece la anchura del contorno.

Ejemplo: Aplicar un contorno punteado rojo a un botón:

"elements": {
   "button": {
       "outline": {
           "color": "#ff0000",
           "style": "dotted",
           "width": "4px"
       }
   }
}

Estilos de sombra

La propiedad shadow te permite aplicar sombras de caja a los bloques, añadiendo profundidad y énfasis a los elementos.

Ejemplo: Aplicar una sombra a todas las imágenes:

"blocks": {
   "core/image": {
       "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
   }
}

Estilos de espaciado

La propiedad spacing gestiona los estilos de relleno, margen y espacio entre bloques de tu tema.

Claves para el espaciado:

• blockGap — Controla el espacio entre bloques.
• margin — Establece los márgenes alrededor de los bloques.
• padding — Controla el relleno dentro de los bloques.

En el ejemplo siguiente se establece un padding personalizado en los lados izquierdo y derecho:

"spacing": {
   "padding": {
       "left": "min(6.5rem, 8vw)",
       "right": "min(6.5rem, 8vw)"
   }
}

Estilos de tipografía

La propiedad typography gestiona los estilos de fuente, tamaños y otros ajustes relacionados con el texto.

Claves comunes para tipografía:

• fontFamily — Define la familia de fuentes para el texto.
• fontSize — Define el tamaño de la fuente.
• fontStyle — Especifica el estilo de la fuente (por ejemplo, cursiva, normal).
• fontWeight — Controla el peso (grosor) de la fuente.
• letterSpacing — Ajusta el espaciado entre letras.
• lineHeight — Define la altura de línea (espacio entre líneas de texto).
• textAlign — Define la alineación del texto (por ejemplo, izquierda, centro, derecha).
• textColumns — Controla el número de columnas de texto.
• textDecoration — Define la decoración del texto (por ejemplo, subrayado).
• writingMode — Define el modo de escritura (por ejemplo, horizontal, vertical).
• textTransform — Controla la transformación del texto (por ejemplo, mayúsculas, minúsculas).

Por ejemplo, puedes establecer que todos los encabezados tengan un peso de fuente de 300 y un estilo cursiva:

"blocks": {
   "core/heading": {
       "typography": {
           "fontWeight": "300",
           "fontStyle": "italic"
       }
   }
}

Propiedades de plantillas y patrones

Estas tres propiedades de nivel superior se utilizan para registrar activos personalizados en tu tema.

1. Plantillas personalizadas

La propiedad templates se utiliza para registrar plantillas personalizadas para varios tipos de entradas.

• name — El nombre del archivo .html o .php ubicado en el subdirectorio templates.
• title — El título que se asignará a la plantilla para facilitar su identificación.
• postTypes — Especifica el tipo de contenido (por ejemplo, entradas, páginas) para el que se utilizará la plantilla.

2. Partes de la plantilla

La propiedad templateParts se utiliza para definir partes reutilizables de las plantillas (por ejemplo, encabezados, pies de página).

• name — El nombre del archivo .html o .php ubicado en el subdirectorio parts.
• title — El título dado a la parte de la plantilla para facilitar su identificación.
• area — Especifica a qué parte de la página se aplica la parte de plantilla (por ejemplo, header, footer, sidebar).

3. Patrones

La propiedad patterns te permite registrar una serie de patrones del directorio de patrones de WordPress, para que estén disponibles en el tema.

A continuación te explicamos cómo registrar un patrón:

"patterns": [
    "my-custom-pattern-slug"
]

Tres ejemplos prácticos de trabajo con theme.json

Aquí tienes algunas cosas que podrías desear hacer para un tema que estés desarrollando.

1. Añadir un patrón

A continuación te mostramos cómo incluir dos patrones del directorio de patrones de WordPress. Aquí se muestra el patrón «Galería de imágenes de portada a pantalla completa»:

"patterns": [
   "fullscreen-cover-image-gallery",
   "hero-banner-with-overlap-images"
]

Notas:

• Los patrones extraídos del directorio de Patrones no se mostrarán en la sección de Patrones del editor del sitio. Estos patrones sólo estarán disponibles a través del Insertador.
• En este ejemplo, incluimos la propiedad de nivel superior patterns (frente a settings y styles, que omitimos en ejemplos anteriores por brevedad).

2. Añadir una fuente personalizada

Descargamos dos archivos de fuentes (Roboto-Regular.ttf y Roboto-Bold.ttf) de la biblioteca Google Fonts y los subimos al subdirectorio assets/fonts/ de nuestro tema.

El siguiente código registra ambas fuentes, haciéndolas disponibles en todo el sitio:

"settings": {
   "typography": {
       "fontFamilies": [
           {
               "fontFamily": "Roboto",
               "name": "Roboto",
               "slug": "roboto",
               "fontFace": [
                   {
                       "fontFamily": "Roboto Regular",
                       "fontWeight": "400",
                       "fontStyle": "normal",
                       "src": [
                           "file./assets/fonts/Roboto-Regular.ttf"
                       ]
                   },
                   {
                       "fontFamily": "Roboto Bold",
                       "fontWeight": "700",
                       "fontStyle": "bold",
                       "src": [
                           "file./assets/fonts/Roboto-Bold.ttf"
                       ]      
                   }  
               ]
           }
       ]
   }
}

3. Configurar tu paleta de colores

Si quieres restringir a tus usuarios a una paleta de colores específica, puedes configurarla así. (Los degradados y duotonos también pueden configurarse según tus especificaciones).

Ejemplo:

"settings": {
   "color": {
       "custom": false,
       "defaultPalette": false,
       "palette": [
           {
               "slug": "primary",
               "color": "#1e8cbe",
               "name": "Primary"
           },
           {
               "slug": "secondary",
               "color": "#21759b",
               "name": "Secondary"
           },
           {
               "slug": "tertiary",
               "color": "#",
               "name": "Tertiary"
           },
           {
               "slug": "accent",
               "color": "#464646",
               "name": "Accent"
           }
       ]
   }
}

¿Reconoces estos cuatro colores? Forman parte de la historia de colores de WordPress.

Resumen

Este artículo destaca el papel fundamental de theme.json en el desarrollo moderno de temas para WordPress. Si dominas theme.json, podrás personalizar completamente el diseño visual y la interfaz de usuario de tu tema sin necesidad de complejas modificaciones PHP o CSS.

Comprender cómo utilizar eficazmente propiedades como appearanceTools proporciona un mayor control y eficacia a la hora de crear o refinar temas de WordPress, lo que convierte a este archivo en una herramienta esencial para los desarrolladores que deseen crear temas flexibles y fáciles de usar.