Gutenberg propose plein de composants de réglages dont la palette de couleurs. Il est possible de la personnaliser afin de la limiter à la charte du site, via un petit hook à placer dans votre functions.php.
Sommaire du cours
La palette de couleurs
Gutenberg nous permet de réutiliser facilement les composants de l’interface visuelle, dont les différents champs de réglages comme la réglette (range), les interrupteur on/off, mais aussi la palette de couleur.
Cette dernière est très bien conçue et elle est même personnalisable. Voici la palette de couleurs par défaut :
L’idée est de définir un set de couleurs qui collent à la charte graphique du site. Voici la palette spéciale Capitaine WP :
Personnaliser la palette de couleurs
Pour cela c’est tout simple, il suffit de placer ce hook dans le fichier functions.php
de votre thème (parent ou enfant) :
Vous pouvez définir autant de couleurs que vous le souhaitez, mais résistez tout de même à l’envie d’en mettre 50.
Désactiver le choix de couleur personnalisée
Si vous ne voulez pas que votre utilisateur s’amuse à détruire toute l’harmonie de votre charte, vous pouvez désactiver le dernier cercle « couleur personnalisée » afin de limiter la sélection aux couleurs définies juste avant.
Pour cela il suffit d’ajouter la ligne suivante dans le même hook :
Récupérer les couleurs du Customizer
Pour terminer, il est possible de récupérer les couleurs définies dans le Customizer WordPress (Apparence > Personnaliser).
Merci à Thomas Villain pour l’astuce !
Ces fonctions sont très pratiques pour personnaliser la charte et limiter les possibilités de vos utilisateurs !
Timothée Moulin
Le 30 juin 2020
Un petit tips utile pour désactiver l’utilisation des dégradés sur les boutons, il suffit d’ajouter les deux lignes dans le hook after_setup_theme (avec les autres).
add_theme_support( ‘editor-gradient-presets’, [] );
add_theme_support( ‘disable-custom-gradients’ );
Pour la couleur par défaut des boutons dans l’admin, je gère ça en CSS faute de mieux.
div[data-type= »core/buttons »] {
div.wp-block-button {
&:not(.has-background) {
& > div {
background-color: transparent;
border: 1px solid black;
}
}
&:not(.has-text-color) {
& > div {
color: black;
}
}
}
}
+
tim