InnerBlocks

Concevoir un bloc capable de recevoir librement d’autres blocs à l’intérieur, comme le fait le bloc Groupe, ne s’improvise pas : il faut un composant qui gère l’ajout, la suppression et l’ordre de ces blocs enfants, tout en s’intégrant dans l’historique d’annulation de l’éditeur. C’est exactement ce que fournit InnerBlocks, du paquet @wordpress/block-editor : placé dans la fonction edit d’un bloc, il délègue à l’éditeur toute la gestion des blocs imbriqués.

Fonctionnement dans WordPress

La prop allowedBlocks restreint les types de blocs insérables à l’intérieur, template définit une structure de blocs pré-remplie à la création (utile pour un bloc « Carte » qui propose d’emblée une image et un titre), et templateLock peut verrouiller cette structure (empêcher l’ajout, le retrait ou le déplacement de blocs). Côté rendu, l’équivalent PHP render_block() associé au marqueur InnerBlocks.Content restitue le contenu des blocs enfants dans la fonction save.

Exemple

import { InnerBlocks } from '@wordpress/block-editor';

const TEMPLATE = [ [ 'core/heading' ], [ 'core/paragraph' ] ];

<InnerBlocks template={ TEMPLATE } templateLock="all" />

Bon à savoir

• Un bloc parent ne peut avoir qu’une seule zone InnerBlocks directe dans la version classique du composant ; des zones nommées multiples nécessitent l’utilisation de useInnerBlocksProps, l’approche recommandée pour les blocs récents.
• templateLock="insert" autorise à réordonner ou modifier les blocs existants mais empêche d’en ajouter ou d’en retirer, une nuance souvent mal connue des développeurs débutants.