InspectorControls

Définition : InspectorControls est un composant de l’éditeur de blocs qui place des réglages contextuels dans la barre latérale. Il évite de surcharger la zone de contenu avec des options secondaires.

Comprendre et utiliser

À quoi cela sert ?

Il sépare les paramètres de présentation du contenu principal. Le rédacteur conserve une surface d’édition lisible tout en accédant aux contrôles propres au bloc sélectionné.

Comment cela fonctionne ?

Le composant est généralement utilisé depuis edit avec des éléments de @wordpress/components, comme PanelBody et ToggleControl. Les modifications sont relayées vers setAttributes().

Dans quel contexte l’utiliser ?

À privilégier pour les options moins fréquentes : affichage d’un pictogramme, choix de variante ou comportement d’un encadré.

Cas concret : ATOOLPHA

Le bloc « Définition ATOOLPHA » contient un paramètre pour afficher ou masquer une ligne de source documentaire.

Exemple de code commenté

Extrait documentaire : le contexte WordPress du plugin/éditeur et les dépendances décrites sont nécessaires ; ne pas coller dans le contenu d’une page.

const { InspectorControls } = wp.blockEditor;
const { PanelBody, ToggleControl } = wp.components;
const { createElement: h } = wp.element;
function SourceSettings( { attributes, setAttributes } ) {
    return h( InspectorControls, {},
        h( PanelBody, { title: 'Affichage' },
            h( ToggleControl, {
                label: 'Afficher la source',
                checked: Boolean( attributes.showSource ),
                onChange: ( showSource ) => setAttributes( { showSource } ),
            } )
        )
    );
}

Décryptage de l’exemple

InspectorControls définit l’emplacement des contrôles et ToggleControl manipule l’attribut showSource. Le bloc principal doit inclure ce composant dans son interface edit.

Résultat attendu

La barre latérale affiche un interrupteur qui modifie l’état du bloc ; la sortie publique devra interpréter cet attribut dans save ou au rendu serveur.

Atelier pratique de vérification

Ajouter un ToggleControl dans InspectorControls puis sauvegarder plusieurs valeurs de l’attribut associé. Examiner l’état du contrôle lors de la réouverture du brouillon. Vérifier séparément le rendu public de l’option et sa traduction éventuelle. Tester le comportement avec la barre latérale fermée.

Précautions et limites

Ne pas enregistrer deux fois le même état à des emplacements contradictoires. Veiller à ce que la valeur booléenne soit déclarée dans les métadonnées.

Contrôle avant intégration dans un plugin

Contrôler que les réglages de barre latérale correspondent exactement à des attributs déclarés. Tester la fermeture du panneau, la réouverture de l’article et le rendu public avant d’approuver l’interface.