El archivo theme.json en WordPress ha revolucionado el desarrollo de temas al permitir una configuración centralizada del diseño sin depender de PHP y CSS tradicionales. Una de las grandes ventajas de theme.json es la posibilidad de utilizar propiedades personalizadas de CSS, lo que facilita la creación de temas más flexibles y personalizables.

¿Cómo funciona theme.json en WordPress?

Introducido en WordPress 5.8, theme.json es un archivo de configuración en formato JSON que permite definir estilos globales y configuraciones del tema sin necesidad de editar archivos CSS o PHP. WordPress lo interpreta y aplica los estilos y configuraciones de manera dinámica, integrándolos con el Editor de Sitios (FSE – Full Site Editing).

Beneficios clave:

• Configuración centralizada: Define estilos en un solo lugar.
• Menos dependencia de CSS personalizado: Reduce la necesidad de escribir código manualmente.
• Compatibilidad con el futuro de WordPress: Facilita la adaptación a nuevas versiones y tendencias.
• Mayor control sobre el diseño global: Facilita la creación de paletas de colores, tipografía y diseño sin código adicional.

Comprendiendo las Propiedades Personalizadas de CSS

Las propiedades personalizadas de CSS (tambien llamadas CSS Variables) son valores reutilizables dentro de una hoja de estilos. Permiten modificar estilos de forma dinámica y mantener una mayor consistencia en el diseño.

Ejemplo de una propiedad personalizada en CSS tradicional:

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
}

En WordPress, estas propiedades pueden definirse directamente en theme.json, permitiendo una administración centralizada de los estilos sin modificar archivos CSS.

Definiendo Propiedades Personalizadas en theme.json

Dentro de theme.json, las propiedades personalizadas pueden declararse dentro de la sección settings.custom y luego utilizarse en los estilos del tema.

Ejemplo de configuración en theme.json:

{
  "settings": {
    "custom": {
      "spacing": {
        "small": "1rem",
        "medium": "2rem",
        "large": "3rem"
      }
    }
  },
  "styles": {
    "spacing": {
      "blockGap": "var(--wp--custom--spacing--medium)"
    }
  }
}

En este caso, estamos definiendo variables de espaciado reutilizables dentro del tema. WordPress las convertirá en:

--wp--custom--spacing--small: 1rem;
--wp--custom--spacing--medium: 2rem;
--wp--custom--spacing--large: 3rem;

Y posteriormente podrán aplicarse a diferentes elementos del diseño.

Diferencias entre Presets y Propiedades Personalizadas

Presets en theme.json

Los presets en theme.json son valores predefinidos que WordPress ofrece para elementos como colores y tamaños de fuente. Se almacenan en settings.color.palette o settings.typography.fontSizes.

Ejemplo de preset de colores:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#007bff",
          "name": "Primary"
        }
      ]
    }
  }
}

Esto genera la variable:

--wp--preset--color--primary: #007bff;

Propiedades personalizadas

En contraste, las propiedades personalizadas permiten definir cualquier tipo de valor, no solo los que WordPress maneja por defecto.

Ejemplo:

{
  "settings": {
    "custom": {
      "fontFamily": {
        "body": "Arial, sans-serif",
        "heading": "'Helvetica Neue', Helvetica, Arial, sans-serif"
      }
    }
  }
}

Esto se traduce en CSS:

--wp--custom--font-family--body: Arial, sans-serif;
--wp--custom--font-family--heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Ventajas de Utilizar Propiedades Personalizadas en WordPress

• Mejora la modularidad: Permite reutilizar estilos en todo el sitio sin duplicar código.
• Facilita la actualización: Un solo cambio en theme.json afecta a todo el diseño.
• Mayor compatibilidad con FSE: Permite gestionar estilos directamente desde el Editor de Sitios.
• Mejor rendimiento: Reduce la cantidad de código CSS necesario.
• Facilita la personalización: Los usuarios pueden modificar variables desde el panel de edición de WordPress.

Uso Avanzado: Aplicando CSS Personalizado con theme.json

Además de definir propiedades personalizadas, theme.json permite aplicar reglas CSS específicas para bloques individuales. Esto se hace dentro de styles.blocks.

Ejemplo de aplicación de estilos personalizados a un bloque de título:

{
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": {
          "lineHeight": "var(--wp--custom--line-height--heading)"
        }
      }
    }
  }
}

Conclusión

El uso de propiedades personalizadas en theme.json marca una evolución en la creación de temas para WordPress, permitiendo un control total sobre el diseño sin necesidad de archivos CSS adicionales. Gracias a esta integración, los desarrolladores pueden mejorar su flujo de trabajo y los usuarios pueden personalizar sus temas con mayor facilidad.

Al implementar propiedades personalizadas, los desarrolladores pueden hacer que sus temas sean más dinámicos, flexibles y eficientes, alineándose con el futuro del desarrollo en WordPress.