InnerBlocks

Définition : InnerBlocks est le composant qui permet d’insérer et gérer des blocs enfants dans un bloc parent. Il sert à construire des sections éditoriales composées tout en conservant leur structure.

Comprendre et utiliser

À quoi cela sert ?

Grâce à lui, un bloc « Conteneur » peut englober librement des titres, paragraphes, images ou boutons, tout en encadrant les types autorisés.

Comment cela fonctionne ?

Le composant peut recevoir allowedBlocks, template et templateLock. Pour un bloc statique, le contenu imbriqué se sauvegarde via InnerBlocks.Content dans la fonction save.

Dans quel contexte l’utiliser ?

À employer quand le rédacteur doit composer plusieurs éléments à l’intérieur d’une même structure, par exemple une carte de service ou une section documentaire.

Cas concret : ATOOLPHA

Un bloc ATOOLPHA « Fiche synthèse » accepte un Titre et des Paragraphes, mais évite l’insertion de blocs sans rapport avec la documentation.

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 { InnerBlocks, useBlockProps } = wp.blockEditor;
const { createElement: h } = wp.element;
function EditSection() {
    return h( 'section', useBlockProps(),
        h( InnerBlocks, {
            allowedBlocks: [ 'core/heading', 'core/paragraph' ],
            template: [ [ 'core/heading', { level: 3 } ],
                        [ 'core/paragraph', {} ] ],
        } )
    );
}

Décryptage de l’exemple

Le parent fournit une zone interne qui propose un titre puis un paragraphe. La liste autorisée limite les types insérables dans cet emplacement ; la sauvegarde correspondante doit préserver les blocs enfants.

Résultat attendu

Dans l’éditeur, les éléments internes peuvent être sélectionnés et modifiés séparément tout en restant contenus dans la section parent.

Atelier pratique de vérification

Créer un bloc parent contenant deux paragraphes enfants, enregistrer puis modifier l’ordre des paragraphes. Vérifier le rendu public et les délimiteurs de blocs. Retirer provisoirement InnerBlocks.Content de save dans une copie, observer la perte potentielle de persistance, puis restaurer la sortie prévue.

Précautions et limites

Ne pas compter sur allowedBlocks comme contrôle de sécurité des données. Vérifier également la compatibilité de la fonction save et le comportement des blocs enfants après mise à jour.

Contrôle avant intégration dans un plugin

Tester la suppression puis la restauration d’un enfant, la duplication du parent et la réouverture du post. Les restrictions d’insertion doivent correspondre au modèle documentaire, sans rendre impossible la correction des anciens contenus.

À ne pas confondre

InnerBlocks gère une zone de blocs enfants ; un Block Pattern insère un assemblage prédéfini, sans nécessairement créer un parent dédié.

Diagnostic et dépannage avancés

Si les contenus enfants disparaissent à la sauvegarde, vérifier que save inclut InnerBlocks.Content ou que la stratégie dynamique conserve la structure imbriquée.