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
}
}
}
}
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é globalesettings.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.
