Problème rencontré sur un bloc « citation encadrée » : le client voulait pouvoir basculer entre trois styles de bordure sans ouvrir le panneau latéral, en un clic direct depuis la sélection du bloc. La réponse tient dans un composant peu mis en avant dans la documentation généraliste : BlockControls, qui injecte du contenu dans la barre d’outils flottante affichée au-dessus d’un bloc sélectionné.
Ce que BlockControls affiche, et quand
BlockControls vient du paquet @wordpress/block-editor et ne rend rien côté save() : il n’existe que dans l’éditeur, au moment où le bloc est sélectionné ou survolé selon le contexte. Il se place dans la fonction edit, à côté du reste du balisage, mais son rendu est téléporté dans la barre d’outils partagée avec les contrôles natifs (alignement, changement de type de bloc).
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
export default function Edit( { attributes, setAttributes } ) {
return (
<>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon="admin-appearance"
label="Bordure pointillée"
isActive={ attributes.style === 'pointille' }
onClick={ () =>
setAttributes( { style: 'pointille' } )
}
/>
</ToolbarGroup>
</BlockControls>
<blockquote>{ attributes.content }</blockquote>
</>
);
}ToolbarGroup et ToolbarButton : la brique de base
ToolbarGroup regroupe des boutons apparentés avec une séparation visuelle par rapport aux autres groupes de la barre. À l’intérieur, chaque ToolbarButton accepte une icon (le nom d’une icône Dashicons ou un composant SVG), un label pour l’accessibilité, et surtout une prop isActive qui bascule automatiquement l’apparence du bouton sans qu’il soit nécessaire d’écrire la moindre règle CSS. C’est ce détail qui distingue un bouton d’outils bien intégré d’un bouton qui ressemble à un élément étranger dans l’interface.
AlignmentToolbar pour les cas d’alignement
Quand le besoin se limite à un alignement de texte, AlignmentToolbar évite de recomposer manuellement les boutons gauche/centre/droite/justifié :
import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor';
<BlockControls>
<AlignmentToolbar
value={ attributes.alignment }
onChange={ ( alignment ) => setAttributes( { alignment } ) }
/>
</BlockControls>Ce composant gère lui-même les quatre icônes, leurs libellés traduits et la valeur active. Il suffit de brancher un attribut de type chaîne de caractères.
Plusieurs groupes, un ordre logique
Rien n’empêche de déclarer plusieurs BlockControls dans le même bloc, ou plusieurs ToolbarGroup à l’intérieur d’un même BlockControls : chaque groupe supplémentaire s’ajoute à droite du précédent. Sur un bloc avec beaucoup d’options, mieux vaut regrouper par nature (mise en forme du texte d’un côté, actions structurelles de l’autre) plutôt que d’aligner dix boutons sans hiérarchie, ce qui rend la barre illisible sur un écran de portable.
- Un groupe pour les actions de mise en forme (gras logique du bloc, alignement).
- Un groupe pour les actions de conversion ou de changement de variante.
- Un dernier groupe, si nécessaire, pour une action destructive ou rare, isolée du reste.
Où s’arrête BlockControls
BlockControls convient aux actions rapides, celles qu’on veut à portée de clic sans quitter le flux d’édition. Les réglages plus fournis — plusieurs champs, des options moins fréquentes, des explications textuelles — doivent rester dans le panneau latéral, pas s’entasser dans la barre d’outils sous prétexte que le composant le permet techniquement.
Une règle simple appliquée sur nos projets : si un réglage nécessite une phrase d’explication pour l’utilisateur, il appartient au panneau latéral, pas à la barre d’outils.
Notre verdict
BlockControls demande peu de code pour un gain d’ergonomie réel, à condition de résister à la tentation d’y entasser tous les réglages du bloc. Combiné à ToolbarGroup, ToolbarButton et, quand c’est pertinent, AlignmentToolbar, il couvre l’essentiel des actions rapides qu’un auteur attend sans devoir ouvrir un panneau.
