Gutenberg propose plein de composants de réglages dont la palette de couleurs ainsi que les polices d’écritures. Il est possible de les personnaliser afin de coller parfaitement à la charte graphique de la marque.
Sommaire du cours
Depuis l’avènement du fichier theme.json à placer à la racine de son thème, beaucoup d’options sont désormais disponibles pour configurer une charte graphique dans un thème WordPress. En voici quelques unes :
WordPress s’inscrit complètement dans la démarche de Design System qui consiste à définir une charte et l’appliquer à des composants.
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 personnaliser la palette de couleur, il faudra ajouter un tableau de couleurs dans settings > color > palette dans theme.json :
Et si vous n’avez pas de theme.json, 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 de passer le paramètre custom à false dans color :
Là encore, si vous n’avez pas de theme.json, ajoutez la ligne suivante dans le même hook :
Désactiver la palette de couleur de WordPress par défaut
Une fois que vous avez imposé votre charte graphique, inutile de conserver celle que propose WordPress par défaut. Pour la désactiver, c’est très facile :
On en profite pour faire de même avec la palette de dégradés par la même occasion, et le tour est joué.
Couleurs de textes et couleurs de fonds
Dans le bloc paragraphe par exemple, il est possible de choisir la couleur du texte, mais également la couleur de fond du bloc. Vous allez peut-être vouloir limiter le contrôle qu’aura votre utilisateur sur ces couleurs.
Par exemple, si vous souhaitez laisser le choix de couleur de texte, mais retirer le choix du fond, appliquez ces paramètres :
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