Gutenberg nous offre la possibilité de personnaliser la barre d’outils de l’éditeur RichText afin d’ajouter ses propres boutons et fonctionnalités. Dans ce cours on va créer notre propre composant pour personnaliser l’apparence d’un bloc d’alerte.
Sommaire du cours
Notre exemple
Voici l’exemple que l’on va réaliser aujourd’hui : une boite conseil/avertissement/interdiction colorée afin d’être remarquée plus facilement dans un texte. Ce genre d’alertes sont très pratiques dans les documentations ou lorsque l’on écrit des cours :

Comme vous pouvez le voir, la Toolbar dispose de 3 boutons supplémentaires pour choisir le type d’alerte.
Vous retrouverez cet exemple dans src/9-toolbar-custom
.
Les attributs
Voici le code source de ce bloc. Comme on va le voir, on va faire appel à de nouveaux composants, librairies et concepts intéressants. On commence avec index.js
et ses attributs :
Valeur par défaut des attributs
Notez que j’ai ajouté également un nouvel attribut nommé type
, destiné à stocker le type d’alerte que l’on veut. Les valeurs pourront être advice, warning ou avoid.
Je vais considérer que l’alerte conseil en vert est l’alerte par défaut. Du coup j’applique la valeur default: 'advice'
dans l’attribut.
Cet attribut va nous permettre au final de définir la classe CSS à appliquer.
Du côté du CSS
Regardons maintenant du côté du CSS, à commencer par le fichier editor.scss
:
J’ai crée 3 classes spécifiques pour appliquer les couleurs vert, jaune, rouge sur mes Dashicons dans la Toolbar. Par défaut toutes les icônes de la barre d’outils sont noires.
Comme ce sont les mêmes couleurs que je vais appliquer au bloc, je les ai mises sous forme de variables et en commun via un fichier vars.scss
stocké dans le dossier du bloc.
J’utilise la commande Sass @import
pour intégrer les styles de mon fichier vars.scss
. Les styles de ce fichier seront donc inclus dans le CSS final généré par Webpack.
Je fais de même pour style.scss
:
Je crée 3 classes is-advice
, is-warning
et is-avoid
qui vont me permettre d’appliquer la couleur à mon bloc. Ce sont les mêmes noms que mes valeurs possibles d’attributs.
La commande Sass darken()
me permet, à partir d’une couleur, d’obtenir une version plus sombre que j’utilise pour la bordure gauche. Il existe également son inverse lighten()
.
Les boutons de la Toolbar
Dans edit.js
, on charge de nouveaux éléments en provenance de @wordpress/components
. Pour rappel cet objet de WordPress vous fournit des composants utiles et réutilisables. On va se servir de :
- ToolbarGroup : un nouvel espace dans la barre d’outils (avec bordures sur les côtés) ;
- ToolbarButton : un bouton cliquable avec le style de WP accompagné d’une icône ;
Voici ce que cela donne visuellement :

Et voici le code correspondant :
Ce que j’appelle la Toolbar est représentée par l’élément BlockControls.
À chaque fois que vous voulez ajouter un séparateur entre des boutons, fermez et rouvrez la balise <ToolbarGroup>
.
À l’intérieur, on y place des ToolbarButton à qui on va pouvoir définir une icône, un titre qui apparaîtra au survol dans une infobulle (tooltip), un événement JS pour lorsque l’on va cliquer sur le bouton, et l’état isPressed qui permet d’indiquer si le bouton doit apparaître normalement ou comme cliqué.
On applique également une classe CSS personnalisée via className afin de donner leur couleur aux boutons, afin de mieux les distinguer.
Enregistrer l’attribut au clic sur un bouton
Pour enregistrer l’attribut, on utilise la technique habituelle sur le onClick()
du bouton de la barre d’outils. Mais cette fois j’applique directement et à la main la valeur voulue :
Et enfin j’adapte la valeur à appliquer pour chacun des 3 boutons : advice, warning et avoid.
Appliquer le style à notre bloc via les blockProps
Et pour terminer, il va falloir appliquer la classe qui définit la couleur du bloc sur celui-ci. Le souci c’est qu’on utilise blockProps
qui fournit directement les attributs de la div
qui contient le bloc.
Mais on va pouvoir modifier sa valeur. Si vous faites un console.log(blockProps)
, vous verrez qu’il possède une propriété className
. C’est elle qu’on va modifier.
On va simplement, en amont du return()
, ajouter aux props notre classe is-quelque chose, et le tour est joué.
Il faudra bien sûr faire la même chose dans edit.js
ainsi que save.js
.
Désormais, votre bloc s’adapte en temps réel quand vous changez son style entre advice, warning et avoid. Vous pourriez d’ailleurs rajouter autant de styles que vous le souhaitez.
On a appris pas mal de choses dans ce cours : la valeur d’attribut par défaut, les composants WordPress comme les Tooltip et boutons, et comment appliquer plusieurs classes dynamiquement.
Ce sont des concepts que l’on va réutiliser régulièrement à l’avenir donc retenez-les bien !
Dans le prochain cours on va voir le composant URL, très pratique et prêt-à-l’emploi.
0
Questions, réponses et commentaires