Un cabinet d’architecture m’a demandé un thème bloc où chaque bloc Image affiche un liseré fin et net, sans jamais dériver vers un style incohérent d’une page à l’autre. Contrairement aux ombres, gérées par un système de préréglages nommés, les bordures dans theme.json fonctionnent par activation granulaire de sous-réglages distincts : largeur, style, couleur et rayon ne sont pas un bloc monolithique mais quatre leviers séparés à structurer soigneusement.
Cet article détaille comment configurer settings.border pour un thème bloc, sans aborder les ombres, traitées séparément dans un autre article dédié à ce sujet précis.
La structure de settings.border
La clé settings.border regroupe quatre sous-réglages booléens indépendants, chacun contrôlant l’apparition d’un contrôle spécifique dans l’inspecteur de blocs : color, radius, style et width. Activer l’un sans les autres est parfaitement possible et souvent souhaitable pour limiter les choix offerts à l’utilisateur final.
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": false,
"width": true
}
}
}
Sur le projet du cabinet d’architecture, le style de trait (plein, pointillé, tireté) a été volontairement désactivé : seule une bordure pleine correspondait à l’identité graphique voulue, et laisser ce choix ouvert aurait multiplié les risques d’incohérence entre les pages gérées par différents collaborateurs du cabinet.
Fixer une couleur et une largeur par défaut au niveau global
Au-delà de l’activation des contrôles, la section styles.border permet de définir une valeur par défaut appliquée globalement, que l’utilisateur peut ensuite ajuster bloc par bloc grâce aux contrôles activés dans settings.
{
"styles": {
"border": {
"color": "#c9c2b3",
"width": "1px",
"radius": "0px"
}
}
}
Ce réglage global donne une valeur de repli cohérente pour tout bloc supportant la bordure, sans qu’un utilisateur n’ait besoin de la redéfinir manuellement à chaque insertion de bloc. Sur ce projet, la couleur beige clair correspondait à la teinte de trait utilisée dans les plans d’architecture fournis par le client, un clin d’œil discret à son métier.
Les blocs qui exposent réellement ces contrôles
Tous les blocs ne supportent pas la bordure de la même façon, et cette prise en charge dépend de la déclaration supports.__experimentalBorder ou supports.border (selon la version) dans le fichier block.json de chaque bloc. Le bloc Image et le bloc Groupe la supportent nativement depuis longtemps ; le bloc Bouton la propose également, mais avec un rayon souvent déjà géré par un contrôle dédié historique, ce qui peut créer une redondance apparente dans l’inspecteur.
- Bloc Image : couleur, largeur et rayon pleinement exposés dans l’inspecteur.
- Bloc Groupe : les quatre sous-réglages disponibles, utile pour encadrer une section entière.
- Bloc Bouton : rayon parfois doublé entre un contrôle historique et le contrôle générique de bordure, à vérifier selon la version de WordPress utilisée.
- Bloc Paragraphe : aucun support de bordure par défaut dans le cœur, sauf ajout via un bloc personnalisé.
Bordures différenciées par côté
Pour certains blocs, l’inspecteur propose également un mode de bordure différencié par côté (haut, droite, bas, gauche), utile quand le client souhaite par exemple un simple filet inférieur sous chaque section plutôt qu’un encadrement complet. Ce mode dépend de la même clé settings.border, sans configuration supplémentaire à ajouter dans theme.json : c’est le bloc lui-même qui expose cette option avancée dès que les contrôles de base sont activés.
Piège rencontré : rayon activé mais couleur désactivée
Une configuration incohérente fréquente consiste à activer radius sans activer color : l’utilisateur peut alors arrondir les angles d’un bloc, mais la couleur de bordure reste figée à la valeur globale sans possibilité d’ajustement local. Sur ce projet, ce choix était en réalité volontaire pour verrouiller la charte graphique, mais je recommande de documenter explicitement ce genre de restriction dans les notes internes du thème, pour qu’un futur intervenant ne le prenne pas pour un oubli.
{
"settings": {
"border": {
"color": false,
"radius": true,
"width": false,
"style": false
}
}
}
En résumé
Contrairement aux ombres qui reposent sur des préréglages nommés, les bordures dans theme.json se pilotent par activation sélective de quatre sous-réglages indépendants, complétés par des valeurs par défaut définies au niveau global. Bien doser cette granularité, en fonction de ce que le client doit réellement pouvoir ajuster, évite à la fois la rigidité excessive et l’incohérence visuelle d’un thème bloc laissé trop ouvert.
