# @wordpress/components pour construire un panneau de réglages d’une méthode d’expédition dans l’éditeur

> Plutôt qu'un formulaire HTML classique, la bibliothèque @wordpress/components permet d'assembler un panneau de réglages d'expédition cohérent avec l'interface bloc.

- Auteur : Clément Hadrot
- Publié le : 2025-12-17
- Mis à jour le : 2025-12-17
- Catégorie : E-commerce
- URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/wordpress-components-panneau-reglages-methode-expedition/

## L’essentiel

- Les composants officiels héritent du thème clair ou sombre actif
- PanelBody structure un réglage sans CSS supplémentaire
- Le rendu final reste cohérent avec le reste de l'éditeur

`import { PanelBody, ToggleControl } from '@wordpress/components';` — cette ligne d'import remplace, à elle seule, plusieurs dizaines de lignes de balisage HTML et de feuille de style qu'aurait nécessitées un formulaire de réglages construit à la main pour une méthode d'expédition personnalisée.

Cette recette montre comment assembler un panneau de réglages cohérent avec l'interface de l'éditeur, pour une extension `WC_Shipping_Method` qui expose ses options dans un contexte bloc plutôt que dans un formulaire classique de page de réglages.

## Le problème avec un formulaire HTML classique

Un formulaire HTML construit à la main pour exposer une option comme un délai de livraison estimé ou une case à cocher d'activation demande de reproduire manuellement l'espacement, la typographie et les états de focus déjà définis par l'interface de l'éditeur. Le résultat visuel diffère presque toujours légèrement du reste de l'interface, ce qui se remarque immédiatement dans un panneau qui côtoie des réglages natifs.

## Le snippet commenté

```
import { PanelBody, ToggleControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

function PanneauMethodeExpedition() {
    const [ activee, setActivee ] = useState( true );
    const [ delaiJours, setDelaiJours ] = useState( 3 );

    return (
        <PanelBody title={ __( 'Livraison point relais express', 'mon-extension' ) } initialOpen={ true }>
            <ToggleControl
                label={ __( 'Activer cette méthode', 'mon-extension' ) }
                checked={ activee }
                onChange={ setActivee }
            />
            <NumberControl
                label={ __( 'Délai estimé (jours ouvrés)', 'mon-extension' ) }
                value={ delaiJours }
                onChange={ ( valeur ) => setDelaiJours( Number( valeur ) ) }
                min={ 1 }
                max={ 15 }
            />
        </PanelBody>
    );
}
```

Le composant `PanelBody` fournit à lui seul la structure repliable, l'espacement interne et la typographie du titre, sans aucune feuille de style additionnelle à écrire. `ToggleControl` et `NumberControl` héritent automatiquement de l'apparence des autres réglages natifs, y compris leur comportement au clavier pour la navigation entre champs.

> L'essentiel à retenir : Les composants officiels héritent du thème clair ou sombre actif ; PanelBody structure un réglage sans CSS supplémentaire ; Le rendu final reste cohérent avec le reste de l'éditeur

## Pourquoi ce choix dépasse la seule question esthétique

Au-delà de la cohérence visuelle, utiliser les composants officiels garantit un comportement accessible déjà validé par le projet : ordre de tabulation, description accessible du contrôle, prise en charge des lecteurs d'écran. Reproduire ce niveau d'accessibilité dans un formulaire HTML construit à la main demanderait un travail bien plus long que celui économisé en évitant l'import d'une bibliothèque déjà présente dans l'environnement de l'éditeur.

Ces composants s'adaptent aussi automatiquement à un thème d'interface sombre si l'utilisateur en a activé un, ce qui n'est pas garanti pour un balisage personnalisé sans travail supplémentaire.

## Variantes possibles

- Remplacer `ToggleControl` par `CheckboxControl` si le réglage doit s'intégrer dans une liste de plusieurs cases à cocher plutôt qu'un interrupteur isolé.
- Utiliser `SelectControl` pour un choix parmi plusieurs zones de livraison prédéfinies plutôt qu'une simple case à cocher d'activation.
- Regrouper plusieurs `PanelBody` dans un composant `Panel` parent lorsque la méthode d'expédition expose plusieurs catégories de réglages distinctes.

### Ce que cette recette ne couvre pas

Le calcul du tarif d'expédition lui-même, à partir du poids, du volume ou de la zone géographique du panier, reste entièrement séparé de ce panneau de réglages : il relève de la méthode `calculate_shipping()` de la classe `WC_Shipping_Method`, appelée indépendamment de l'interface qui expose ses options à l'administrateur.

## En résumé

Construire ce panneau avec les composants officiels plutôt qu'un formulaire personnalisé demande d'apprendre une nouvelle bibliothèque, mais élimine en échange tout le travail de cohérence visuelle et d'accessibilité que la même interface, écrite à la main, aurait nécessité pour atteindre un résultat comparable.