Une chaîne de cinq salons de coiffure m’a commandé un thème classique unique, décliné visuellement selon la charte de chaque salon franchisé. Le problème est apparu dès la formation des gérantes à l’outil : livrées à elles-mêmes avec un sélecteur de couleur libre dans l’éditeur de blocs, certaines composaient des textes roses sur fond jaune, illisibles, en toute bonne foi. Le client m’a demandé de « verrouiller » les couleurs disponibles sans pour autant bloquer complètement la personnalisation.
Ce tutoriel montre comment restreindre la palette de couleurs proposée dans l’éditeur de blocs d’un thème classique, avec editor-color-palette et disable-custom-colors. L’équivalent côté theme.json pour un thème bloc suit une syntaxe différente et n’est pas traité ici.
Déclarer une palette fermée avec editor-color-palette
Le support de thème editor-color-palette définit un tableau de couleurs nommées, affichées dans le sélecteur de couleur de l’éditeur de blocs à la place (ou en complément) du sélecteur libre. Chaque entrée nécessite un nom lisible, un identifiant (« slug ») et une valeur de couleur.
add_theme_support( 'editor-color-palette', array(
array(
'name' => 'Bordeaux salon',
'slug' => 'bordeaux-salon',
'color' => '#7a1f2b',
),
array(
'name' => 'Or satiné',
'slug' => 'or-satine',
'color' => '#c9a24b',
),
array(
'name' => 'Blanc ivoire',
'slug' => 'blanc-ivoire',
'color' => '#faf6ef',
),
array(
'name' => 'Anthracite',
'slug' => 'anthracite',
'color' => '#2b2b2b',
),
) );
Une fois déclarée, cette palette apparaît systématiquement dans les contrôles de couleur de texte et d’arrière-plan des blocs compatibles (paragraphe, groupe, bouton), avec un nom lisible affiché au survol. J’ai limité la palette à huit couleurs pour ce client, un nombre qui couvre largement une charte graphique de salon sans multiplier les options inutiles.
Retirer le sélecteur libre avec disable-custom-colors
Déclarer une palette ne suffit pas à empêcher un utilisateur de choisir une couleur hors charte : par défaut, l’éditeur affiche la palette personnalisée et conserve un sélecteur de couleur libre en dessous. Pour forcer réellement le choix parmi la palette, il faut ajouter le support disable-custom-colors.
add_theme_support( 'disable-custom-colors' );
Avec ce réglage actif, le sélecteur libre disparaît complètement des contrôles de couleur des blocs : seules les couleurs déclarées dans editor-color-palette restent sélectionnables. C’est ce couple des deux supports, jamais l’un sans l’autre, qui répond réellement au besoin de verrouillage exprimé par le client.
Ce que ce réglage ne touche pas
Un point de confusion fréquent : ce mécanisme ne concerne que les couleurs manipulées dans l’éditeur de blocs, pas les contrôles du Customizer (Apparence > Personnaliser). Si le thème définit par ailleurs des contrôles de couleur personnalisés dans le Customizer, via l’API WP_Customize_Color_Control, ces derniers continuent d’afficher un sélecteur libre par défaut, indépendamment de disable-custom-colors. Il faut les restreindre séparément, par exemple en limitant leur interface à une liste déroulante de valeurs prédéfinies codées en dur dans le thème.
Adapter la palette par franchise
Chaque salon de la chaîne utilisait une variante de couleurs légèrement différente. Plutôt que de dupliquer le thème cinq fois, j’ai conditionné la déclaration de la palette à une valeur de configuration stockée en base, lue au chargement du thème.
function scc_editor_palette() {
$franchise = get_option( 'scc_franchise_slug', 'defaut' );
$palettes = scc_get_all_palettes();
$palette = isset( $palettes[ $franchise ] ) ? $palettes[ $franchise ] : $palettes['defaut'];
add_theme_support( 'editor-color-palette', $palette );
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'scc_editor_palette' );
Cette structure garde un thème unique à maintenir tout en offrant une palette différente et fermée à chaque franchise, sélectionnée une seule fois lors de l’installation du site.
Ne pas oublier la palette des dégradés
Un support voisin, editor-gradient-presets, fonctionne selon le même principe pour les dégradés proposés dans les blocs qui les acceptent, comme le bloc Couverture. Sur ce projet, j’ai désactivé les dégradés plutôt que d’en fournir une liste, avec add_theme_support( 'disable-custom-gradients' ) combiné à un tableau vide pour editor-gradient-presets, la charte graphique du client n’en faisant jamais usage.
Notre verdict
Le duo editor-color-palette et disable-custom-colors répond exactement au besoin d’une équipe non technique qui doit publier du contenu sans dérailler visuellement : une palette réduite, nommée clairement, et l’impossibilité de s’en écarter. C’est une solution native, sans plugin, qui demande simplement de ne pas oublier que le Customizer reste un territoire séparé, à restreindre par ses propres moyens si besoin.
