# Les 15 composants de @wordpress/components qu’il faut connaître

> ColorPalette, ComboboxControl, Placeholder, Notice, Modal et dix autres : un catalogue commenté des composants les plus utiles au-delà de l'inspecteur classique.

- Auteur : Clément Hadrot
- Publié le : 2021-11-22
- Mis à jour le : 2021-11-22
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/composants-wordpress-components-a-connaitre/

## L’essentiel

- La bibliothèque dépasse largement les seuls TextControl et ToggleControl
- Certains composants évitent de recoder des interactions complexes
- Tous partagent la même identité visuelle que l'éditeur natif

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

> L'essentiel à retenir : La bibliothèque dépasse largement les seuls TextControl et ToggleControl ; Certains composants évitent de recoder des interactions complexes ; Tous partagent la même identité visuelle que l'éditeur natif

**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.