# theme.json avancé : maîtriser styles, presets et filtres duotone

> Palettes personnalisées, presets d'espacement, styles par bloc, filtres duotone sur les images : tout ce que theme.json permet en 2022.

- Auteur : Clément Hadrot
- Publié le : 2022-05-11
- Mis à jour le : 2022-05-11
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/theme-json-avance-styles-presets-duotone/

## L’essentiel

- settings définit les options disponibles, styles applique des valeurs
- Les presets génèrent automatiquement variables CSS et classes utilitaires
- Le duotone s'applique par défaut ou par bloc individuel

Depuis que j'accompagne des clients sur leurs premiers thèmes blocs, la question qui revient le plus souvent porte sur `theme.json` : à quoi sert vraiment la distinction entre `settings` et `styles` ? Beaucoup de développeurs mélangent les deux la première fois, et le résultat produit des comportements inattendus dans l'éditeur.

Ce fichier est devenu, en quelques mois, le centre névralgique de tout thème bloc moderne. Il ne se contente plus de définir une palette de couleurs : il pilote la typographie, les espacements, les bordures, et même des effets visuels comme le duotone sur les images. Voyons en détail comment l'exploiter au maximum.

## settings contre styles : la distinction fondamentale

La clé `settings` définit ce qui est **disponible** pour l'utilisateur dans l'éditeur : quelles couleurs il peut choisir, quelles tailles de police existent, si les espacements personnalisés sont autorisés. La clé `styles`, elle, applique des valeurs par défaut concrètes sur le site, indépendamment de ce que l'utilisateur pourra ensuite modifier.

Autrement dit : `settings` construit la palette d'outils, `styles` peint le mur avec certains de ces outils. On peut très bien autoriser une couleur dans `settings` sans jamais l'utiliser par défaut dans `styles`.

## Construire une palette de couleurs personnalisée

Chaque couleur déclarée dans `settings.color.palette` génère automatiquement une classe utilitaire CSS et une variable custom property, réutilisables partout dans le thème et dans l'éditeur.

> L'essentiel à retenir : settings définit les options disponibles, styles applique des valeurs ; Les presets génèrent automatiquement variables CSS et classes utilitaires ; Le duotone s'applique par défaut ou par bloc individuel

```
{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primaire", "color": "#1e3a5f", "name": "Bleu primaire" },
        { "slug": "accent", "color": "#e07a3f", "name": "Orange accent" },
        { "slug": "sombre", "color": "#1a1a1a", "name": "Presque noir" }
      ],
      "custom": false
    }
  }
}
```

Ce fragment génère par exemple la classe `.has-primaire-color` et la variable `--wp--preset--color--primaire`, utilisable directement dans une feuille de style personnalisée. Passer `custom` à `false` empêche l'utilisateur de sortir de cette palette avec le sélecteur de couleur libre, ce qui garantit la cohérence visuelle du site.

## Presets d'espacement, un gain de temps réel

Les presets d'espacement fonctionnent sur le même principe que les couleurs : on déclare une échelle, et WordPress génère les classes et variables correspondantes, réutilisables dans les blocs qui supportent le padding ou le margin par preset.

```
{
  "settings": {
    "spacing": {
      "spacingScale": {
        "steps": 0
      },
      "spacingSizes": [
        { "slug": "petit", "size": "0.5rem", "name": "Petit" },
        { "slug": "moyen", "size": "1.5rem", "name": "Moyen" },
        { "slug": "grand", "size": "3rem", "name": "Grand" }
      ],
      "units": [ "px", "em", "rem", "%" ]
    }
  }
}
```

Passer `spacingScale.steps` à `0` désactive la génération automatique de l'échelle par défaut de WordPress, pour ne garder que les valeurs définies manuellement dans `spacingSizes`. J'utilise systématiquement cette approche sur les projets clients, où une échelle sur mesure de trois à cinq valeurs suffit largement et reste bien plus lisible qu'une échelle générique.

## Styles par bloc : la granularité qui change tout

La clé `styles` ne se limite pas au niveau global du site. On peut cibler un bloc précis via `styles.blocks`, et même un élément particulier comme les liens ou les titres à l'intérieur de ce bloc.

```
{
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": "2px"
        },
        "color": {
          "background": "var(--wp--preset--color--accent)"
        }
      },
      "core/quote": {
        "typography": {
          "fontStyle": "italic"
        },
        "border": {
          "left": {
            "color": "var(--wp--preset--color--primaire)",
            "width": "4px"
          }
        }
      }
    }
  }
}
```

Cette granularité permet de styliser chaque bloc natif sans écrire une seule ligne de CSS additionnelle, directement depuis `theme.json`. C'est particulièrement utile pour les citations, les boutons et les séparateurs, des blocs où le rendu par défaut est rarement satisfaisant tel quel.

## Le filtre duotone sur les images

Le duotone applique un dégradé de deux couleurs sur une image en niveaux de gris, un effet très tendance actuellement en direction artistique web. On le déclare comme un preset au même titre que les couleurs :

```
{
  "settings": {
    "color": {
      "duotone": [
        {
          "slug": "bleu-orange",
          "colors": [ "#1e3a5f", "#e07a3f" ],
          "name": "Bleu vers orange"
        }
      ]
    }
  }
}
```

Une fois déclaré, ce filtre apparaît dans le panneau des réglages du bloc `core/image`, et l'utilisateur peut l'appliquer en un clic. On peut aussi l'imposer par défaut à toutes les images d'un template via `styles.blocks.core/image.filter.duotone`, une pratique intéressante pour donner une identité visuelle forte sans intervention manuelle systématique.

- Le duotone se calcule côté navigateur via un filtre SVG généré automatiquement
- Il reste modifiable ou désactivable par l'utilisateur dans l'éditeur, sauf si l'accès est restreint via `settings`
- Il fonctionne aussi sur les images de couverture (`core/cover`)

> Mon conseil : ne surchargez jamais `theme.json` avec toutes les options possibles dès le départ. Commencez par la palette de couleurs et la typographie, testez dans l'éditeur, puis ajoutez les presets d'espacement et le duotone une fois que la base visuelle est validée par le client.

## En résumé

theme.json est devenu bien plus qu'un fichier de configuration de couleurs : c'est un véritable langage déclaratif pour piloter l'identité visuelle d'un thème bloc, du réglage global jusqu'au style d'un élément précis à l'intérieur d'un bloc donné. Maîtriser la distinction entre `settings` et `styles`, et exploiter les presets plutôt que le CSS à la main, permet de construire des thèmes plus cohérents et beaucoup plus faciles à maintenir sur la durée.