BlockControls

Définition : BlockControls est un composant de l’éditeur qui ajoute des commandes dans la barre d’outils d’un bloc sélectionné. Il sert aux actions rapides liées directement au contenu.

Comprendre et utiliser

À quoi cela sert ?

Il rapproche les commandes les plus utilisées de la zone de travail. Les tâches de configuration plus longues restent généralement mieux adaptées au panneau latéral InspectorControls.

Comment cela fonctionne ?

Le composant reçoit des éléments d’interface tels que ToolbarGroup et ToolbarButton, avec des callbacks qui modifient les attributs ou demandent une action à l’éditeur.

Dans quel contexte l’utiliser ?

Utile pour un choix fréquent et immédiat, comme basculer une option de mise en forme propre à un bloc personnalisé.

Cas concret : ATOOLPHA

Un bloc « Encadré pratique » ATOOLPHA ajoute une commande pour afficher ou cacher son titre depuis la barre d’outils.

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 { BlockControls } = wp.blockEditor;
const { ToolbarGroup, ToolbarButton } = wp.components;
const { createElement: h } = wp.element;
function TitleToolbar( { attributes, setAttributes } ) {
    return h( BlockControls, {},
        h( ToolbarGroup, {},
            h( ToolbarButton, {
                isPressed: Boolean( attributes.showTitle ),
                onClick: () => setAttributes( {
                    showTitle: ! attributes.showTitle,
                } ),
            }, 'Afficher le titre' )
        )
    );
}

Décryptage de l’exemple

La barre d’outils lit showTitle et inverse sa valeur lorsque l’utilisateur clique. L’extrait suppose que l’attribut booléen existe dans la définition du bloc.

Résultat attendu

La commande devient disponible lorsque le bloc est sélectionné, et son état visuel suit la valeur sauvegardée du bloc.

Atelier pratique de vérification

Créer une barre d’outils contenant un bouton de bascule. Activer le contrôle au clavier, vérifier l’état isPressed et le changement d’attribut. Ajouter un long titre de bloc pour tester l’ergonomie. Déplacer ensuite un réglage secondaire dans InspectorControls et comparer la lisibilité des deux solutions.

Précautions et limites

Conserver des libellés explicites et vérifier la navigation au clavier. Éviter de placer de nombreuses commandes rarement utilisées dans une barre d’outils compacte.

Contrôle avant intégration dans un plugin

Vérifier que chaque commande possède un libellé compréhensible pour les technologies d’assistance. Tester ses états actif et inactif, puis éviter la multiplication de boutons de confort qui masqueraient les fonctions essentielles.