# Un bloc Groupe qui expose son propre blockGap au design system

> Un client avait des espacements propres, non couverts par l'échelle native. Voici comment un bloc dérivé du Groupe expose son propre support spacing.blockGap.

- Auteur : Clément Hadrot
- Publié le : 2026-04-21
- Mis à jour le : 2026-04-21
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/bloc-groupe-blockgap-design-system/

## L’essentiel

- spacing.blockGap active la propriété d'espacement entre enfants
- Un bloc dérivé peut restreindre l'échelle sans toucher au thème global
- Les variables CSS générées restent inspectables dans le panneau des styles

Le studio de design retenu par les Éditions Faucon pour la charte visuelle de leur nouveau site avait défini une échelle d'espacement propre à la marque, cinq paliers précis, différente de l'échelle par défaut fournie par le thème de base utilisé pour le projet. Modifier l'échelle globale de `theme.json` aurait affecté tous les blocs du site, y compris ceux où l'échelle native convenait très bien. Le besoin réel ne concernait qu'un seul bloc : une variante du bloc Groupe utilisée spécifiquement pour empiler les sections d'articles.

## Rappel : blockGap et le bloc Groupe natif

Le bloc Groupe (`core/group`) supporte nativement `spacing.blockGap`, qui contrôle l'espacement entre ses blocs enfants directs via une variable CSS générée automatiquement, `--wp--style--block-gap`. Par défaut, ce contrôle propose les paliers définis dans la `spacing.spacingSizes` globale de `theme.json`, ce qui est exactement ce qu'il fallait éviter de toucher pour ce projet.

## Créer un bloc dérivé plutôt que de modifier le Groupe natif

Plutôt que de filtrer le comportement du bloc Groupe natif pour tout le site (ce qui aurait affecté d'autres usages légitimes de l'échelle globale), l'équipe a créé un bloc dérivé, `faucon/section-article`, construit à partir du même mécanisme `InnerBlocks` mais avec son propre `block.json` :

```
{
  "apiVersion": 3,
  "name": "faucon/section-article",
  "title": "Section d'article",
  "parent": ["core/post-content"],
  "supports": {
    "spacing": {
      "blockGap": true,
      "__experimentalDefaultControls": {
        "blockGap": true
      }
    }
  }
}
```

> L'essentiel à retenir : spacing.blockGap active la propriété d'espacement entre enfants ; Un bloc dérivé peut restreindre l'échelle sans toucher au thème global ; Les variables CSS générées restent inspectables dans le panneau des styles

## Restreindre l'échelle de valeurs proposées

Le contrôle d'espacement généré automatiquement par `supports.spacing.blockGap` propose par défaut l'échelle globale du thème. Pour proposer les cinq paliers propres au client sans toucher à l'échelle globale, l'équipe a défini une échelle de `spacingSizes` spécifique dans une section `styles` ciblée du `theme.json`, appliquée uniquement au sélecteur généré par ce bloc précis, via la clé `selectors` introduite pour les blocs personnalisés :

```
{
  "styles": {
    "blocks": {
      "faucon/section-article": {
        "spacing": {
          "blockGap": "var(--faucon--espacement--section)"
        }
      }
    }
  },
  "settings": {
    "blocks": {
      "faucon/section-article": {
        "spacing": {
          "spacingSizes": [
            { "name": "Serré", "slug": "serre", "size": "0.5rem" },
            { "name": "Standard", "slug": "standard", "size": "1.5rem" },
            { "name": "Aéré", "slug": "aere", "size": "3rem" },
            { "name": "Large", "slug": "large", "size": "5rem" },
            { "name": "Section", "slug": "section", "size": "8rem" }
          ]
        }
      }
    }
  }
}
```

La clé `settings.blocks.<nom-du-bloc>` de `theme.json` permet précisément ce ciblage : une échelle de valeurs propre à un bloc donné, sans écraser l'échelle globale utilisée par tous les autres blocs du site qui supportent `blockGap`.

## Vérifier le résultat dans le panneau des styles

Une fois ce réglage en place, le panneau de styles du bloc `faucon/section-article` propose exactement les cinq paliers définis, sous leurs libellés français, tandis que le bloc Groupe natif conserve son échelle globale inchangée partout ailleurs sur le site. La variable CSS générée reste inspectable directement dans les outils de développement du navigateur, ce qui facilite la vérification visuelle par l'équipe de design.

- Créer un bloc dérivé plutôt que de modifier le comportement global d'un bloc natif très utilisé.
- Cibler l'échelle de valeurs avec `settings.blocks.<nom-du-bloc>` plutôt que la clé globale `settings.spacing.spacingSizes`.
- Vérifier que les autres blocs du site n'héritent pas accidentellement de cette échelle restreinte.

> Une échelle de design propre à un besoin ponctuel n'a pas vocation à devenir la règle générale du thème entier.

## Ce que ce cas ne couvre pas

La configuration de l'échelle d'espacement globale du thème, celle qui s'applique par défaut à l'ensemble des blocs qui supportent `spacing`, relève d'une configuration différente déjà traitée côté thèmes. Ce cas concerne exclusivement l'exposition d'un support personnalisé sur un bloc dérivé, isolé du reste du design system.

## En résumé

En dérivant un bloc plutôt qu'en modifiant l'échelle globale, les Éditions Faucon ont conservé une cohérence de design système sur l'ensemble du site tout en offrant à leur équipe éditoriale exactement les cinq paliers d'espacement voulus par leur studio de design, sans risque de collision avec l'échelle native.