As WordPress developers, we’ve all felt the power and flexibility that the Block Editor (Gutenberg) brings to the table. One of the more advanced (and incredibly useful) features is Nested Blocks. They give us the ability to structure content hierarchically, organize components modularly, and ultimately deliver richer editing experiences to our clients and users.

What Are Nested Blocks?

Nested blocks allow us to insert blocks inside other blocks. Think of them as sub-components. For instance, a custom “Team” block might contain multiple “Team Member” blocks. Or a “Testimonial Slider” block could hold several “Testimonial” blocks.

In technical terms, we achieve this nesting by using WordPress’s InnerBlocks component inside a custom block.

Why Use Nested Blocks?

We use nested blocks when:

• We want reusable layout structures (e.g. columns, cards)
• We need to give users more flexibility while keeping them within a defined layout
• We want to group multiple blocks for styling or behavior
• We’re building container-like blocks (e.g. accordions, tabs, sliders)

Nested blocks help balance flexibility with structure.

Creating a Block with Nested Blocks

1. Register the Block

We can register our block in block.json.

{
  "apiVersion": 3,
  "name": "my-plugin/section",
  "title": "Section",
  "category": "layout",
  "icon": "editor-insertmore",
  "description": "A custom section block that allows nested blocks inside.",
  "supports": {
    "html": false
  },
  "editorScript": "file:./index.js"
}

2. Block Edit Function with InnerBlocks

In our index.js file, we’ll use the InnerBlocks component to allow nesting

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

registerBlockType('myplugin/section', {
    edit: () => {
        return (
            <div className="my-section-block">
                <InnerBlocks />
            </div>
        );
    },
    save: () => {
        return (
            <div className="my-section-block">
                <InnerBlocks.Content />
            </div>
        );
    },
});

Restricting Allowed Blocks (Optional)

Sometimes we want to restrict which blocks can be inserted inside our container. Here’s how we do that using the allowedBlocks prop.

<InnerBlocks
    allowedBlocks={['core/paragraph', 'core/image', 'core/heading']}
/>

We can also add placeholders in the templates for better UX.

<InnerBlocks
    template={[
        ['core/heading', { placeholder: 'Section Heading' }],
        ['core/paragraph', { placeholder: 'Add your text here...' }]
    ]}
/>

Gotchas and Best Practices

• Avoid infinite nesting – prevent blocks from nesting themselves inside themselves.
• Use templateLock if we want to lock the layout ('all', 'insert', 'false').
• Use proper CSS scoping to avoid styling conflicts across blocks.

Conclusion

Nested blocks are one of the most powerful tools in our WordPress development toolkit. They allow us to create structured, flexible, and user-friendly experiences for content editors. Whether we’re building reusable components or complex layout systems, mastering InnerBlocks will elevate our block development game.