Au clic sur un bloc, un petit ruban d’icônes surgit juste au-dessus : c’est la barre d’outils de bloc. On y trouve en général le sélecteur de type de bloc (l’icône qui permet aussi de le transformer en un autre type), les options d’alignement du bloc et du texte, et un bouton « Options » qui ouvre un menu pour dupliquer, déplacer, copier ou supprimer le bloc. Son contenu varie selon le type de bloc : un bloc Image y ajoute le recadrage, un bloc Paragraphe la mise en forme du texte.
Fonctionnement dans WordPress
Cette barre s’appuie sur le composant BlockControls de @wordpress/block-editor, que chaque bloc peut enrichir dans sa fonction edit pour y ajouter ses propres boutons, regroupés par catégorie (groupe principal, mise en forme du texte, autres). C’est ce même mécanisme qui affiche, pour un bloc sélectionné à l’intérieur d’un autre (un bouton dans un bloc Boutons, par exemple), une mini barre contextuelle propre à ce bloc imbriqué.
Exemple
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarButton } from '@wordpress/components';
<BlockControls>
<ToolbarButton onClick={ basculerStyle }>
Style alternatif
</ToolbarButton>
</BlockControls>Bon à savoir
- La barre d’outils suit le défilement de la page tant que le bloc reste visible, pour rester accessible sans faire remonter la vue.
- Sur mobile, elle se comporte différemment et privilégie une disposition plus compacte adaptée au tactile.
- Elle ne doit pas être confondue avec la barre latérale des réglages : la barre d’outils regroupe les actions immédiates, la barre latérale les réglages plus fins.