useInnerBlocksProps()

Définition : useInnerBlocksProps() est un hook d’édition qui fournit les propriétés d’une zone de blocs imbriqués. Il offre un contrôle précis du conteneur et de ses options de composition.

Comprendre et utiliser

À quoi cela sert ?

Il permet d’intégrer une zone de sous-blocs dans un élément choisi, avec davantage de maîtrise sur le balisage qu’un assemblage standard de composants.

Comment cela fonctionne ?

Dans un composant edit, appeler useBlockProps() avant useInnerBlocksProps(). Le second hook reçoit les propriétés du conteneur et les options d’insertion des blocs enfants.

Dans quel contexte l’utiliser ?

Pertinent pour un bloc de mise en page qui impose une structure HTML soignée et doit accueillir des contenus imbriqués éditables.

Cas concret : ATOOLPHA

Un conteneur de ressources ATOOLPHA accepte uniquement des paragraphes et garantit une structure de section stable dans l’éditeur.

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 { useBlockProps, useInnerBlocksProps } = wp.blockEditor;
const { createElement: h } = wp.element;
function EditContainer() {
    const outer = useBlockProps();
    const inner = useInnerBlocksProps( { className: 'atoolpha-children' }, {
        allowedBlocks: [ 'core/paragraph' ],
    } );
    return h( 'section', outer, h( 'div', inner ) );
}

Décryptage de l’exemple

outer définit l’enveloppe du bloc ; inner représente la zone où l’éditeur gère les paragraphes enfants. Le code montre explicitement l’ordre des deux hooks.

Résultat attendu

Le rédacteur peut insérer des paragraphes à l’intérieur de la section, tout en conservant un conteneur de style dédié.

Atelier pratique de vérification

Insérer deux paragraphes dans un conteneur utilisant useInnerBlocksProps(). Contrôler que la zone reçoit les classes attendues et demeure sélectionnable. Intervertir volontairement les appels des hooks dans un test isolé, puis revenir à l’ordre documenté. Vérifier que la version sauvegardée conserve les blocs enfants.

Précautions et limites

Ne pas appeler useInnerBlocksProps() conditionnellement. La fonction save doit traiter la zone enfant avec useInnerBlocksProps.save() ou une approche documentée équivalente.

Contrôle avant intégration dans un plugin

Vérifier que la zone d’enfants est accessible au clavier et que les styles restent appliqués sous iframe. Garder un exemple ancien pour détecter toute régression liée à une modification du conteneur.