Chapitre 8.4 — Contrôles : Inspector & Toolbar

⏱️ TL;DR — Pour offrir des réglages à votre bloc, on utilise deux zones : InspectorControls (le panneau latéral droit — réglages détaillés) et BlockControls (la barre d’outils flottante — actions rapides d’alignement/format). On les remplit avec les composants de @wordpress/components (PanelBody, ToggleControl, RangeControl, SelectControl, ComboboxControl…) et RichText pour l’édition inline. Chaque contrôle est un input contrôlé relié à un attribut via setAttributes.

🎯 Objectifs

• Ajouter un panneau de réglages avec InspectorControls.
• Ajouter des actions rapides avec BlockControls.
• Utiliser les composants UI de @wordpress/components.
• Relier chaque contrôle à un attribut proprement.

1. InspectorControls : le panneau latéral

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
 
export default function Edit( { attributes, setAttributes } ) {
    const { afficherPrix, note } = attributes;
    const blockProps = useBlockProps();
 
    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Réglages', 'wpr-books' ) } initialOpen>
                    <ToggleControl
                        label={ __( 'Afficher le prix', 'wpr-books' ) }
                        checked={ afficherPrix }
                        onChange={ ( v ) => setAttributes( { afficherPrix: v } ) }
                    />
                    <RangeControl
                        label={ __( 'Note (0–5)', 'wpr-books' ) }
                        value={ note }
                        min={ 0 } max={ 5 }
                        onChange={ ( v ) => setAttributes( { note: v } ) }
                    />
                </PanelBody>
            </InspectorControls>
 
            <div { ...blockProps }>
                { /* aperçu du bloc */ }
            </div>
        </>
    );
}

• InspectorControls téléporte son contenu dans le panneau latéral (comme un portal).
• On regroupe par PanelBody (sections repliables).
• Chaque contrôle est contrôlé : value/checked ← attribut, onChange → setAttributes.

💡 Pour un dev React — InspectorControls/BlockControls sont des portals (à la createPortal) : vous déclarez l’UI dans votre composant, elle s’affiche ailleurs (panneau latéral, barre d’outils). Les composants de @wordpress/components sont votre librairie de formulaires (comme les inputs de MUI) : ToggleControl ≈ Switch, RangeControl ≈ Slider, SelectControl ≈ Select. Vous branchez value/onChange exactement comme des composants contrôlés.

2. BlockControls : la barre d’outils

Pour des actions rapides et contextuelles (alignement, bascule d’affichage) :

import { BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
 
<BlockControls>
    <ToolbarGroup>
        <ToolbarButton
            icon={ edit }
            label={ __( 'Changer de livre', 'wpr-books' ) }
            onClick={ () => { /* ouvrir un sélecteur */ } }
        />
    </ToolbarGroup>
</BlockControls>

BlockControls s’affiche dans la barre flottante au-dessus du bloc sélectionné. On y met les actions fréquentes ; les réglages détaillés vont dans l’Inspector.

3. Les composants UI essentiels (@wordpress/components)

Ces composants sont cohérents avec l’admin WordPress (accessibilité, styles) — utilisez-les plutôt que du HTML brut.

4. Édition inline avec RichText

Pour du contenu texte éditable directement dans l’aperçu (titre, chapô), RichText (déjà vu ch. 8.3) est le bon outil — plutôt qu’un TextControl dans l’Inspector, quand l’édition doit se faire au cœur du bloc :

<RichText
    tagName="p"
    value={ attributes.chapo }
    onChange={ ( chapo ) => setAttributes( { chapo } ) }
    allowedFormats={ [ 'core/bold', 'core/italic' ] }
    placeholder={ __( 'Écrire un chapô…', 'wpr-books' ) }
/>

⚠️ Piège — tout mettre dans l’Inspector. Le contenu rédactionnel (titres, textes) se modifie mieux inline (RichText) dans l’aperçu ; l’Inspector est pour les réglages (options, styles, source de données). Mélanger les deux (éditer un titre dans le panneau latéral) donne une UX médiocre. Règle : contenu inline, réglages dans l’Inspector.

5. État vide et chargement (Placeholder, Spinner)

Un bloc « à données » commence souvent vide (aucun livre choisi) : affichez un Placeholder avec une action, et un Spinner pendant un chargement asynchrone (ch. 8.7) :

import { Placeholder, Spinner, Button } from '@wordpress/components';
 
if ( ! livreId ) {
    return (
        <Placeholder icon="book" label={ __( 'Livre à la une', 'wpr-books' ) }>
            <Button variant="primary" onClick={ ouvrirSelecteur }>
                { __( 'Choisir un livre', 'wpr-books' ) }
            </Button>
        </Placeholder>
    );
}

Cette gestion d’états (vide / chargement / prêt) est exactement votre réflexe React.

✏️ Exercices

1. Où placez-vous un interrupteur « Afficher le prix » : Inspector ou Toolbar ? Et une action « Changer de livre » ?
2. Reliez : ToggleControl, RangeControl, ComboboxControl à leurs équivalents d’une librairie React classique.
3. Pour éditer le titre affiché dans le bloc, préférez-vous RichText inline ou un TextControl dans l’Inspector ? Pourquoi ?

🧠 Quiz de révision

Chapitre suivant : Blocs dynamiques (render PHP).