Dans un design system, les éléments peuvent comporter plusieurs déclinaisons de styles. Dans WordPress, on les appelle les variations de styles de blocs. Elles sont faciles à déclarer et nous permettent d’obtenir par exemple plusieurs versions d’un bouton.
Sommaire du cours
Les variations de styles de blocs dans WordPress vont vous permettre de personnaliser l’apparence d’un bloc en toute simplicité.
Mieux encore, elles permettent à votre utilisateur de choisir, à partir de Gutenberg, la variation appliquer en un clic.
Ces variations seront utiles par exemple pour proposer plusieurs types de boutons différents, comme c’est souvent le cas dans les chartes graphiques.
Vous pouvez voir et sélectionner les variations disponibles dans l’onglet styles d’un bloc sélectionné :
On peut imaginer plein de manières d’utiliser ces variations de styles :
- Personnaliser les listes à puces pour en faire des check-listes ;
- Proposer sur les groupes de section des formes de séparation originales ;
- Grossir un paragraphe pour en faire un texte d’introduction ;
- Permettre aux images d’avoir des bords arrondis ;
- Et bien plus encore…
Dans ce cours, on va justement voir comment les déclarer en toute simplicité, et comment en tirer parti dans nos thèmes.
La puissance et la simplicité des variations
Avant de voir comment déclarer des variations, je propose de faire un petit point stratégique.
L’objectif des variations de styles de blocs est de permettre à l’utiliser de changer l’apparence d’un bloc sans avoir à le configurer à chaque fois manuellement dans les moindres détails via l’éditeur.
C’est un gros gain de temps pour l’utilisateur, et ça lui évite surtout les inconsistances.
C’est justement un gros avantage par rapport à l’approche Elementor, où l’on design au fur et à mesure, alors qu’ici on va tout préparer en amont : l’utilisateur final ne fera pas de design, simplement de la sélection.
Si je reprends mon graphiques des 5 étapes, on peut voir que les variations sont la seconde étape de réalisation, juste après la configuration du theme.json.
C’est logique puisqu’on risque d’avoir besoin de nos variables CSS déclarées dans le theme.json pour configurer nos variations.
Mais c’est également la seconde étape car c’est la manière la plus simple de rajouter de l’interactivité sans effort.
On l’avait vu dans le cours sur les 5 étapes du FSE :
La déclaration des variations de styles de blocs est l’étape qui à la fois prend le moins de temps et qui est la plus simple à mettre en place.
Et pour couronner le tout, c’est probablement une des étapes qui aura le plus d’impact sur le site. Que des avantages donc !
Allez, assez tergiversé, maintenant je vous montre comment faire.
Le saviez-vous ?
Il existe aussi des variations de blocs : comme par exemple la rangée qui est une variation du groupe. C’est une variation fonctionnelle, ce n’est donc pas la même chose.
Il ne faudra pas confondre les 2 concepts. Ici on parle bien de variations de styles, qui modifient simplement l’apparence et le CSS d’un bloc.
Déclarer des variations de styles pour les blocs en JSON
Pour déclarer des variations de blocs, on va créer des fichiers JSON que l’on va mettre dans le dossier /styles de notre thème.
Ce sera exactement le même principe que de créer des variations de thème au final.
Et afin de ne pas se mélanger les pinceaux entre les deux, je vous propose qu’on mette les variations de styles de blocs dans des sous-dossiers pour chaque bloc, ce qui donnerait :
Ce n’est pas une obligation bien sûr, mais si vous avez des variations de style de thème, ça pourrait être bien de les séparer des variations de styles de blocs afin d’éviter les confusions futures, surtout si vous avez beaucoup de variations.
Je vais créer une première variation que je vais appeler /styles/button/alt.json :
Dans ce fichier, il faut déclarer :
title: le titre de la variation qui apparaitra dans l’interface de Gutenberg ;slug: le nom unique de la variation, sans caractères spéciaux ;blockTypes: le ou les blocs concernés par cette variation ;styles: les styles à appliquer au bloc et aux enfants pour cette variation.
Notez bien que blockTypes est toujours un tableau, et non pas une chaine de caractères. Cela veut dire que vous pouvez déclarer une variation pour plusieurs blocs en même temps, par exemple le groupe et les colonnes qui sont deux blocs structurels.
Vous devriez voir votre variation apparaitre dans l’interface de Gutenberg, et vous pouvez en appliquer d’un seul clic à chacun de vos boutons :
Pour l’instant, on voit encore les 2 variations proposées par WordPress par défaut. On verra justement dans les prochains cours comment retirer ces variations de styles.
Pour la déclinaison « Douce » ce sera exactement le même principe, simplement avec d’autres couleurs. Et enfin, pour la déclinaison « Transparente », il y a une petite subtilité due aux bordures :
Le fait d’ajouter une bordure de 2px va agrandir notre bouton en hauteur de 4px. Ce ne sera pas très élégant si on le met à côté d’autres boutons.
Du coup, pour compenser ça, j’applique un calcul à mes marges internes verticales de mon espacement XS – 2px.
Notez aussi que j’applique la propriété CSS currentColor à la bordure afin qu’elle ait la même couleur que le texte.
Le saviez-vous ?
Avec cette approche de CSS dans le JSON, on n’écrit pas directement de CSS, et on n’a pas à gérer les sélecteurs : on laisse faire WordPress.
C’est d’autant plus important que WordPress peut à tout moment changer ses sélecteurs CSS lors d’une future mise à jour.
Du coup, c’est une responsabilité en moins pour nous.
Surcharger les styles des enfants avec les variations
Par défaut, une variation a un impact direct avec le bloc concerné. Mais il est également possible d’influencer les enfants de ce bloc, que ce soient des éléments, ou des blocs.
De cette manière, une simple variation sur un bloc parent pourra avoir des implications de styles sur les blocs enfants.
On va justement voir 2 exemples qui mettent ceci en pratique.
Exemple 1 : un groupe sombres et les textes clairs
Imaginons maintenant que nous fassions une variation pour un groupe, en vue de faire une section au fond coloré :
Je vais déclarer un fichier /styles/group/primary.json dans mon thème :
Comme j’ai appliqué une couleur foncée en fond, je peux indiquer que les textes seront blancs. De cette manière, je n’aurais pas à faire ce réglage manuellement pour chaque groupe.
Mais on peut aller plus loin, et cibler les enfants, que ce soit des éléments, ou des blocs, comme on l’a vu dans le cours sur les styles globaux du theme.json.
On peut très bien dire que les titres à l’intérieur de cette variations doivent avoir une couleur spécifique :
Dans styles > elements, j’indique que je veux que tous les titres aient une couleur vert clair. Si je rafraichis ma page, j’aurais bien la modification appliquée automatiquement :
Exemple 2 : des images arrondies dans les galeries
Imaginez que vous ajoutiez une variation pour les images, afin de leur donner un aspect arrondi. La variation « rounded » existe déjà par défaut dans WordPress, mais on va la surcharger en créant la notre :
Ici on indique que l’on souhaite pouvoir appliquer un arrondi sur nos images lorsqu’on sélectionne la variation « Arrondi ». Jusque là tout va bien.
Mais lorsqu’on va insérer une galerie, on va devoir appliquer ce réglage manuellement sur toutes les images de la galerie. Ça peut être long et frustrant.
Heureusement pour nous, grâce à la solution vue précédemment, on va pouvoir appliquer l’arrondi sur nos images à partir de la galerie directement. Et pour cela, je créé une nouvelle variation dédiée cette fois à la galerie :
Cette fois, je vise styles > blocks > core/image. Cette variation n’a donc aucun effet directement sur la galerie, mais directement sur les images enfant.
Déclarer des variations en PHP et CSS
Il existe une autre méthode pour déclarer des variations en passant par un hook PHP et un peu de CSS.
C’était la version officielle avant l’arrivée de WordPress 6.6 en 2024, qui a ensuite laissé sa place à l’approche purement JSON comme on vient de le voir.
Cela dit, j’aime encore beaucoup cette approche car elle me permet de manipuler du CSS directement, plutôt que du JSON.
Du coup, vous pouvez déclarer votre variation en PHP directement dans le fichierfunctions.php :
C’est la fonction register_block_style() qui va nous permettre la déclaration de la variation.
Le premier paramètre permet d’indiquer quel bloc sera concerné par la variation.
Vient ensuite un tableau dans lequel vous indiquez le slug de la variation, qui sera utilisé pour générer la classe CSS, puis le libellé à afficher dans l’interface de Gutenberg.
Maintenant, on va déclarer une feuille de styles CSS liée au bloc. Pour cela je vais créer un fichier button.css dans le dossier /assets/css de mon thème.
Notez qu’on utilise ici la fonction wp_enqueue_block_style() et pas la fonction classique wp_enqueue_style(), ce qui nous permet de charger le fichier CSS seulement si le bloc est utilisé dans la page.
En utilisant les bonnes fonctions, on s’assure que WordPress est optimal en terme de performances.
Le saviez-vous ?
Vous pouvez tout à fait déclarer la variation en JSON (au lieu de le faire en PHP) et tout de même appeler une feuille de style CSS via PHP.
Dans le CSS, je vais maintenant ajouter mon arrondi grâce à la variable CSS déclarée dans les valeurs personnalisées du theme.json.
Concernant le sélecteur CSS, j’indique :
- La classe du bloc
.wp-block-<block>avec le nom du bloc ; - Ainsi que le nom de la variation
.is-style-<slug>avec le slug défini plus tôt.
Notez que ces classes sont générées automatiquement par WordPress et ne peuvent pas être changées.
Voilà pour les bases ! Je vais maintenant vous montrer quelques petites astuces sympathiques concernant cette fonction :
Déclarer une variation pour plusieurs blocs simultanément
Vous pouvez d’ailleurs déclarer plusieurs blocs en même temps en utilisant un tableau plutôt qu’une chaine de caractères, comme avec le JSON :
Déclarer les styles directement dans le PHP
Au lieu de déclarer un fichier CSS pour chaque variation, vous pourriez déclarer les styles directement dans la fonction, grâce au paramètre style_data :
On se retrouve au final dans une configuration équivalente à celle du JSON, avec les mêmes avantages.
Vous pouvez ainsi surcharger facilement les styles des blocs enfants, et des éléments primitifs comme les liens, sans avoir à trouver les sélecteurs CSS correspondants.
Déclarer plusieurs variations en PHP
Si vous désirez déclarer plusieurs variations, vous pourrez utiliser la fonction register_block_style() autant de fois que nécessaire, toujours au sein de la même fonction :
Dans la mesure du possible, privilégiez l’approche en pur JSON plutôt que l’approche PHP.
Les variations de styles de blocs sont une manière simple et élégante de rajouter de l’interactivité dans l’éditeur sans fournir un gros effort.
C’est donc un outil très pratique qu’il faudra user et abuser lorsque vous ferez des sites en FSE.
Dans le prochain cours réservé aux membres premium, on va voir comment faire des formes de séparation à la « Elementor », grâce aux variations de styles de blocs, en toute simplicité :
Dans le prochain chapitre, nous passeront à la création de compositions réutilisables, un autre gros pilier de la création de sites avec le Full Site Editing de WordPress.
0
Questions, réponses et commentaires