# InnerBlocks

> InnerBlocks est le composant React qui transforme un bloc en conteneur capable d'accueillir d'autres blocs, avec un contrôle sur les types autorisés et une disposition initiale.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/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.