DropdownMenu : un menu d’actions compact dans la barre d’outils d’un bloc

<DropdownMenu icon= »ellipsis » label= »Plus d’options » />

Cette ligne suffit à afficher un bouton discret, reconnaissable à son icône de trois points, qui ouvre un menu au clic. DropdownMenu, composant de @wordpress/components, sert précisément à cet usage : regrouper des actions secondaires d’une barre d’outils de bloc derrière un seul déclencheur, plutôt que d’aligner un bouton par action jusqu’à saturer visuellement l’espace disponible.

import { DropdownMenu, MenuItem } from '@wordpress/components';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup } from '@wordpress/components';

function BarreOutilsBloc( { onDupliquer, onConvertir } ) {
	return (
		<BlockControls>
			<ToolbarGroup>
				<DropdownMenu icon="ellipsis" label="Plus d'options">
					{ ( { onClose } ) => (
						<>
							<MenuItem onClick={ () => { onDupliquer(); onClose(); } }>
								Dupliquer
							</MenuItem>
							<MenuItem onClick={ () => { onConvertir(); onClose(); } }>
								Convertir en paragraphe
							</MenuItem>
						</>
					) }
				</DropdownMenu>
			</ToolbarGroup>
		</BlockControls>
	);
}

children en fonction : le pattern à privilégier depuis longtemps

DropdownMenu a historiquement proposé une prop controls, un simple tableau d’objets décrivant chaque action, plus rapide à écrire pour un menu très simple mais bien plus limité dès qu’il faut composer plusieurs MenuGroup ou insérer un contenu personnalisé entre les entrées. Le pattern recommandé consiste à passer une fonction en enfant du composant, qui reçoit un objet contenant notamment onClose, la fonction à appeler pour refermer le menu après une action.

{ /* Pattern historique, plus limité */ }
<DropdownMenu
	icon="ellipsis"
	label="Actions"
	controls={ [
		{ title: 'Dupliquer', onClick: onDupliquer },
		{ title: 'Supprimer', onClick: onSupprimer, isDestructive: true },
	] }
/>

Le pattern en fonction enfant, illustré dans le premier exemple, permet en revanche de regrouper les entrées avec MenuGroup, d’insérer un élément qui n’est pas un MenuItem, ou de composer plusieurs sections avec des libellés différents, ce que la forme tabulaire ne permet pas.

onClose : un appel manuel après chaque action, souvent oublié

Un piège fréquent avec le pattern en fonction enfant : oublier d’appeler onClose() après l’exécution d’une action dans un MenuItem. Sans cet appel explicite, le menu reste ouvert après le clic, ce qui oblige l’utilisateur à cliquer une seconde fois en dehors du menu pour le refermer, une friction inutile pour une action pourtant déjà exécutée.

{ /* Incorrect : le menu reste ouvert après le clic */ }
<MenuItem onClick={ onDupliquer }>
	Dupliquer
</MenuItem>

{ /* Correct : le menu se referme après l'action */ }
<MenuItem onClick={ () => { onDupliquer(); onClose(); } }>
	Dupliquer
</MenuItem>

Ce détail, invisible en développement rapide où le développeur teste souvent sans vraiment observer l’état du menu après clic, se remarque immédiatement en usage réel, où chaque clic superflu compte pour l’utilisateur final.

toggleProps : personnaliser le bouton sans toucher au contenu du menu

La prop toggleProps transmet des propriétés supplémentaires directement au bouton déclencheur du menu, sans affecter son contenu déplié. C’est utile pour ajuster une classe CSS, un attribut d’accessibilité additionnel, ou même désactiver temporairement le déclencheur lui-même :

<DropdownMenu
	icon="ellipsis"
	label="Plus d'options"
	toggleProps={ {
		className: 'mon-bouton-menu',
		disabled: enCoursDeChargement,
	} }
>
	{ ( { onClose } ) => ( /* contenu du menu */ null ) }
</DropdownMenu>

• désactiver le déclencheur pendant un chargement évite d’ouvrir un menu dont les actions ne seraient pas encore fiables
• une classe personnalisée via toggleProps reste la seule façon propre de cibler le bouton en CSS, sans dépendre d’un sélecteur générique fragile
• toggleProps ne s’applique jamais aux MenuItem internes, uniquement au bouton visible avant ouverture

Un menu qui ne se referme jamais tout seul après une action réussie donne l’impression que rien ne s’est passé, même quand tout a fonctionné.

Quand DropdownMenu n’est pas le bon composant

Pour une action unique, sans alternative ni variante, un simple Button visible directement dans la barre d’outils reste plus rapide d’accès qu’un menu à ouvrir au préalable : ajouter un clic intermédiaire pour une seule option n’apporte aucun bénéfice de clarté. À l’inverse, pour une navigation entre plusieurs pages ou étapes distinctes, un DropdownMenu n’est pas conçu pour cet usage : ses MenuItem déclenchent des actions ponctuelles, pas une navigation avec état persistant, mieux servie par des composants dédiés à la navigation.

Enfin, sur une barre d’outils déjà peu chargée, moins de quatre ou cinq boutons, regrouper artificiellement ces boutons dans un DropdownMenu ajoute une étape de clic sans réel gain de lisibilité : la limite se situe généralement autour de six boutons visibles simultanément.

En résumé

DropdownMenu reste le composant de référence pour compresser une barre d’outils de bloc saturée, à condition d’adopter le pattern en fonction enfant plutôt que la prop controls historique, d’appeler systématiquement onClose après chaque action, et de réserver toggleProps à la personnalisation du seul bouton déclencheur.