Antipatterns : cinq presets de bordure redéfinis plutôt qu’un réglage partagé

Cinq entrées différentes dans theme.json, cinq valeurs de rayon de bordure quasi identiques (2px d’écart entre certaines), chacune attachée à un bloc précis plutôt qu’à un préréglage commun. C’est le schéma qui revient le plus souvent lors d’un audit de thème à blocs construit progressivement, bloc après bloc, sans retour en arrière sur les réglages déjà posés.

Ce qu’on voit concrètement

Le cas typique ressemble à ceci dans un fichier theme.json audité :

{
  "styles": {
    "blocks": {
      "core/button": { "border": { "radius": "6px" } },
      "core/image":  { "border": { "radius": "8px" } },
      "core/group":  { "border": { "radius": "4px" } },
      "core/table":  { "border": { "radius": "6px" } },
      "core/cover":  { "border": { "radius": "10px" } }
    }
  }
}

Chaque valeur a probablement été ajoutée à un moment différent du projet, par la même personne ou par des personnes différentes, sans qu’aucune ne revienne consulter ce qui existait déjà ailleurs dans le fichier. Le résultat visuel reste globalement cohérent tant que personne ne compare les blocs côte à côte, mais l’incohérence saute aux yeux dès qu’une mise à jour de charte graphique impose de changer ce rayon de bordure partout.

Pourquoi c’est un problème

Le vrai coût n’apparaît pas immédiatement : il apparaît au moment de la première demande de changement globale. « Rendre les angles un peu plus arrondis partout » devient alors une recherche manuelle dans cinq déclarations distinctes, avec le risque d’en oublier une, plutôt qu’une modification d’une seule valeur.

Ce schéma s’accompagne généralement de deux autres symptômes révélateurs :

• Aucune de ces valeurs de bordure n’est déclarée comme préréglage réutilisable dans la section settings du fichier — chacune est écrite en dur au niveau du style de bloc.
• Les valeurs ne suivent aucune échelle cohérente (pas de rapport simple entre 4px, 6px, 8px et 10px), ce qui suggère qu’elles ont été ajustées à l’œil, bloc par bloc, plutôt que choisies depuis une échelle définie en amont.

Comment revenir à un réglage partagé

La correction consiste à déclarer un préréglage de rayon dans settings, puis à faire pointer chaque bloc vers ce préréglage plutôt que vers une valeur figée :

{
  "settings": {
    "custom": {
      "rayon": {
        "standard": "6px"
      }
    }
  },
  "styles": {
    "blocks": {
      "core/button": { "border": { "radius": "var(--wp--custom--rayon--standard)" } },
      "core/image":  { "border": { "radius": "var(--wp--custom--rayon--standard)" } },
      "core/group":  { "border": { "radius": "var(--wp--custom--rayon--standard)" } },
      "core/table":  { "border": { "radius": "var(--wp--custom--rayon--standard)" } },
      "core/cover":  { "border": { "radius": "var(--wp--custom--rayon--standard)" } }
    }
  }
}

Un seul changement dans la section settings se répercute alors sur l’ensemble des blocs concernés, sans avoir à retrouver chaque déclaration individuelle. Les blocs qui ont légitimement besoin d’un rayon différent (un bouton plus arrondi qu’une image, par exemple) peuvent conserver une valeur spécifique, tant que ce choix est délibéré et documenté, plutôt qu’issu d’un oubli.

Quand une variation reste justifiée

Toutes les valeurs de bordure différentes ne sont pas des erreurs : un bouton d’action principale peut légitimement avoir un rayon plus prononcé qu’une image en pleine largeur, pour des raisons de hiérarchie visuelle assumée. La distinction à faire en audit porte sur l’intention : une valeur différente choisie consciemment se documente et s’assume, une valeur différente par accumulation de petits ajustements non coordonnés se corrige.

Comment repérer ce schéma rapidement

Une recherche du mot-clé radius dans le fichier theme.json, suivie d’un simple tri des valeurs trouvées, suffit à révéler ce genre de duplication en quelques minutes lors d’un audit, sans outil spécialisé. La même méthode s’applique à d’autres propriétés sujettes au même travers : les couleurs de bordure, les épaisseurs de trait, ou les ombres portées.

Sur un audit de thème, le réflexe qu’on applique : dès qu’une même propriété visuelle apparaît trois fois avec des valeurs proches mais différentes, la question à poser est toujours la même — est-ce voulu, ou est-ce l’accumulation de petites décisions isolées ?

En résumé

Multiplier les presets de bordure quasi identiques ne casse rien dans l’immédiat, mais transforme chaque futur ajustement de charte graphique en chasse au trésor dans le fichier theme.json. Un seul réglage partagé, référencé partout où la valeur doit être identique, ramène la maintenance à un seul point de changement.