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.
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,blockGappour l’espacement entre blocs enfants d’un conteneur.typography:fontSize,lineHeight, et sur les blocs les plus récentsfontFamilyet 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.
