# BlockControls : ajouter vos propres boutons à la barre d’outils d’un bloc

> La barre flottante au-dessus d'un bloc sélectionné n'est pas réservée aux blocs natifs. Voici comment y glisser vos propres actions, icônes et états actifs.

- Auteur : Clément Hadrot
- Publié le : 2020-02-28
- Mis à jour le : 2020-02-28
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/blockcontrols-boutons-barre-outils-bloc/

## L’essentiel

- BlockControls s'affiche uniquement en mode édition
- ToolbarButton gère isActive sans CSS custom
- AlignmentToolbar couvre l'alignement en une ligne

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

> L'essentiel à retenir : BlockControls s'affiche uniquement en mode édition ; ToolbarButton gère isActive sans CSS custom ; AlignmentToolbar couvre l'alignement en une ligne

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.