Après trois ans à développer des blocs pour des clients aux besoins très variés, un même constat revient : la plupart des développeurs connaissent TextControl, ToggleControl et SelectControl, et s’arrêtent là — alors que @wordpress/components contient des dizaines de composants prêts à l’emploi qui évitent de recoder des interactions déjà résolues, avec la même identité visuelle que le reste de l’éditeur.
Sélection et couleur
ColorPalette affiche la palette de couleurs du thème (ou une palette personnalisée) sous forme de pastilles cliquables, avec un sélecteur de couleur personnalisée en secours. Bien plus rapide à mettre en place qu’un champ de saisie de code hexadécimal brut.
GradientPicker fait de même pour les dégradés déclarés dans le thème, avec un rendu d’aperçu directement dans le sélecteur.
ComboboxControl combine un champ de recherche et une liste déroulante filtrable, adapté à une longue liste d’options (des centaines d’articles ou de taxonomies) où un simple SelectControl deviendrait difficile à parcourir.
États et retours utilisateur
Placeholder structure un état vide générique, avec icône, titre et instructions, sur le même modèle visuel que MediaPlaceholder mais pour n’importe quel contenu, pas seulement les médias.
Notice affiche un message d’information, d’avertissement ou d’erreur avec le style natif de l’administration WordPress, plutôt qu’un texte en rouge codé à la main.
Spinner reste minimal mais indispensable pour tout état de chargement asynchrone, cohérent visuellement avec le reste de l’interface.
Structure et disposition
import { Card, CardBody, CardHeader } from '@wordpress/components';
<Card>
<CardHeader>Résumé</CardHeader>
<CardBody>Contenu structuré</CardBody>
</Card>Card, CardHeader et CardBody offrent un conteneur visuel cohérent pour regrouper de l’information dans l’éditeur, utile en dehors du panneau latéral, par exemple à l’intérieur même d’un rendu de bloc.
Flex, FlexItem et FlexBlock encapsulent des mises en page flexbox courantes (répartition égale, alignement) sans écrire de CSS supplémentaire, avec des espacements qui respectent l’échelle définie par le design system de l’éditeur.
Interactions avancées
Modal ouvre une boîte de dialogue superposée, utile pour une configuration complexe qui ne trouve pas sa place dans le panneau latéral ni dans la barre d’outils.
import { useState } from '@wordpress/element';
import { Modal, Button } from '@wordpress/components';
function ReglagesAvances() {
const [ ouvert, setOuvert ] = useState( false );
return (
<>
<Button onClick={ () => setOuvert( true ) }>Réglages avancés</Button>
{ ouvert && (
<Modal title="Réglages avancés" onRequestClose={ () => setOuvert( false ) }>
{ /* contenu */ }
</Modal>
) }
</>
);
}Popover affiche un contenu flottant ancré à un élément déclencheur, utilisé notamment en interne par ColorPalette pour son sélecteur de couleur personnalisée.
Dropdown combine un déclencheur et un contenu qui s’ouvre au clic, plus flexible que Popover quand le contenu doit lui-même gérer son état d’ouverture.
Listes et arborescences
TreeSelect affiche une hiérarchie (catégories imbriquées, par exemple) sous forme de liste déroulante indentée, plutôt qu’une liste plate qui perdrait la relation parent-enfant.
CheckboxControl reste distinct de ToggleControl : à utiliser pour une sélection dans un groupe d’options indépendantes, tandis que ToggleControl convient à un réglage binaire on/off unique.
ExternalLink ajoute automatiquement l’icône et les attributs d’accessibilité corrects pour un lien qui ouvre un nouvel onglet, un détail que beaucoup de développeurs recodent à la main sans nécessité.
Une liste non exhaustive
- Consulter le code source du cœur de Gutenberg reste la meilleure source pour découvrir un composant : de nombreux blocs natifs utilisent des composants peu documentés ailleurs.
- Avant de coder un composant d’interface personnalisé, une recherche rapide dans
@wordpress/componentsévite fréquemment un travail redondant.
Un bloc qui réinvente un sélecteur de couleur ou une modale avec du CSS maison casse presque toujours, même légèrement, la cohérence visuelle avec le reste de l’éditeur — un détail que les utilisateurs perçoivent sans toujours savoir le nommer.
En résumé
Cette sélection de quinze composants ne couvre qu’une partie de @wordpress/components, mais elle représente ceux qui reviennent le plus souvent dans des projets réels, au-delà des classiques déjà couverts par un article dédié à l’inspecteur de réglages.
