# Les supports de blocs et theme.json : aligner vos blocs sur le design system

> Couleurs, espacements, typographie : les supports de block.json donnent à vos blocs personnalisés les mêmes réglages natifs que les blocs core, en phase avec theme.json.

- Auteur : Clément Hadrot
- Publié le : 2022-06-21
- Mis à jour le : 2022-06-21
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/supports-de-blocs-theme-json/

## L’essentiel

- Les supports activent des contrôles natifs sans code d'interface
- theme.json définit les préréglages que ces contrôles proposent
- Un bloc personnalisé peut s'intégrer comme un bloc core

Depuis WordPress 5.9 et l'arrivée de l'édition complète de site, `theme.json` est devenu le point central de configuration du design d'un thème : palettes de couleurs, échelles typographiques, unités d'espacement, tout y est déclaré une seule fois. Encore faut-il que vos blocs personnalisés sachent en tirer parti. C'est le rôle de la propriété `supports` de `block.json` : elle active, pour un bloc donné, les contrôles natifs de l'éditeur (couleur, typographie, espacement...) sans qu'il soit nécessaire d'écrire le moindre composant d'interface.

Avec WordPress 6.0, sorti en mai dernier, plusieurs de ces supports ont gagné en maturité, notamment sur les espacements et les bordures. Voyons comment déclarer ces supports sur un bloc personnalisé, et comment ils se connectent concrètement aux réglages définis dans `theme.json`.

## Ce que fait la propriété supports

Sans `supports`, un bloc personnalisé n'affiche aucun contrôle de mise en forme dans la barre latérale : pas de sélecteur de couleur, pas de réglage d'espacement. Chaque fonctionnalité doit être explicitement activée. Voici un exemple pour notre bloc encadré déjà croisé dans les articles précédents :

```
{
  "name": "wpmoderne/encadre-conseil",
  "supports": {
    "color": {
      "background": true,
      "text": true,
      "gradients": true
    },
    "spacing": {
      "padding": true,
      "margin": [ "top", "bottom" ]
    },
    "typography": {
      "fontSize": true,
      "lineHeight": true
    },
    "border": {
      "radius": true,
      "color": true
    }
  }
}
```

Chacun de ces réglages ajoute automatiquement le contrôle correspondant dans la barre latérale de l'éditeur, sans une seule ligne de composant React à écrire côté développeur. Les valeurs choisies par l'utilisateur sont ensuite stockées automatiquement dans l'attribut spécial `style`, que Gutenberg gère pour vous, et traduites en styles inline ou en classes utilitaires selon le réglage.

## Le lien avec theme.json

Ces contrôles natifs n'inventent pas leurs options : ils lisent les préréglages déclarés dans le `theme.json` du thème actif. Un sélecteur de couleur de fond, par exemple, proposera exactement les couleurs définies dans la section `settings.color.palette` du thème.

```
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primaire", "color": "#1e3a5f", "name": "Bleu primaire" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "spacing": {
      "spacingScale": {
        "steps": 5
      },
      "units": [ "px", "%", "rem" ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "petit", "size": "0.875rem", "name": "Petit" },
        { "slug": "grand", "size": "1.5rem", "name": "Grand" }
      ]
    }
  }
}
```

Concrètement, si votre bloc encadré déclare `"color": { "background": true }` et que l'utilisateur choisit la couleur « Accent » dans le sélecteur, WordPress applique automatiquement la classe `has-accent-background-color` au bloc, en s'appuyant sur une variable CSS générée par le thème : `--wp--preset--color--accent`. Votre bloc personnalisé se comporte alors exactement comme un bloc natif du point de vue de l'utilisateur et du design system.

> L'essentiel à retenir : Les supports activent des contrôles natifs sans code d'interface ; theme.json définit les préréglages que ces contrôles proposent ; Un bloc personnalisé peut s'intégrer comme un bloc core

## Les principaux groupes de supports

La liste des supports disponibles est large ; voici les plus utilisés en pratique sur des blocs de contenu.

- `color` : fond, texte, dégradés, avec des sous-clés pour désactiver certains sous-réglages ou forcer l'affichage même en l'absence de palette personnalisée.
- `spacing` : `padding`, `margin`, `blockGap` pour l'espacement entre blocs enfants d'un conteneur.
- `typography` : `fontSize`, `lineHeight`, et sur les blocs les plus récents `fontFamily` et le poids de la police.
- `border` : couleur, largeur, style, arrondi.
- `align` : autorise les options d'alignement (`wide`, `full`) dans la barre d'outils.
- `anchor` : ajoute un champ pour définir un identifiant HTML ancre sur le bloc.
- `html` : quand mis à `false`, empêche l'édition du bloc en mode « Éditer en HTML ».

Chaque support accepte soit un simple booléen pour tout activer, soit un objet détaillé pour n'activer que certains sous-réglages, comme illustré plus haut avec `margin: [ "top", "bottom" ]`, qui n'autorise que les marges verticales.

## Restreindre les réglages pour un bloc précis

Il est également possible de restreindre, au niveau du bloc lui-même, les valeurs proposées par `theme.json`, via la section `styles.blocks` de ce fichier, ou d'imposer un style par défaut à un bloc précis :

```
{
  "styles": {
    "blocks": {
      "wpmoderne/encadre-conseil": {
        "spacing": {
          "padding": {
            "top": "var(--wp--preset--spacing--40)",
            "bottom": "var(--wp--preset--spacing--40)"
          }
        },
        "color": {
          "background": "var(--wp--preset--color--accent)"
        }
      }
    }
  }
}
```

Cette section permet au thème de définir un style par défaut pour un bloc spécifique, y compris un bloc personnalisé développé par un plugin tiers, à condition que ce bloc ait déclaré le support correspondant dans son `block.json`. C'est un point souvent négligé : un thème peut styler vos blocs personnalisés sans jamais toucher à votre code, du moment que vous avez correctement déclaré vos `supports`.

### Récupérer les styles côté rendu du bloc

Pour un bloc dynamique, rendu côté serveur via une fonction PHP, il faut penser à répercuter ces réglages dans le balisage produit. La fonction `get_block_wrapper_attributes()` s'en charge automatiquement : elle fusionne classes et styles inline générés par les supports avec vos propres attributs HTML.

```
function wpmoderne_rendre_encadre( $attributs, $contenu ) {
    $wrapper_attributes = get_block_wrapper_attributes();
    return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $contenu );
}
```

> Conseil maison : avant d'écrire un contrôle de couleur ou d'espacement « maison » pour un bloc personnalisé, vérifiez d'abord si un support existant ne couvre pas déjà le besoin. Neuf fois sur dix, la réponse est oui, et vous économisez du code à maintenir.

## En résumé

Les supports de `block.json` forment le pont entre vos blocs personnalisés et le design system défini dans `theme.json`. En les déclarant correctement, un bloc développé pour un projet précis hérite automatiquement des palettes, échelles typographiques et unités d'espacement du thème actif, sans code d'interface supplémentaire. C'est un des changements les plus structurants de l'écosystème Gutenberg depuis l'arrivée de l'édition complète de site : il ne s'agit plus seulement de développer des blocs, mais de les intégrer proprement dans un système de design cohérent, pensé par et pour le thème.