How to Use Nested Blocks for Gutenberg Editor in WordPress

Using the InnerBlocks (nested blocks) component, you may make a single block that nests additional blocks. This may be use in the Columns block, the Social Links block, or any other block that contains other blocks.

Note: Only one InnerBlock component can be place in a single block.

Here’s how to use InnerBlocks in its most basic form.

ES5:

( function ( blocks, element, blockEditor ) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var useBlockProps = blockEditor.useBlockProps;
 
    blocks.registerBlockType( 'softhunt/inner-example', {
        title: 'Inner Blocks',
        category: 'design',
 
        edit: function () {
            var blockProps = useBlockProps();
 
            return el( 'div', blockProps, el( InnerBlocks ) );
        },
 
        save: function () {
            var blockProps = useBlockProps.save();
 
            return el( 'div', blockProps, el( InnerBlocks.Content ) );
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

ESNext:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
registerBlockType( 'softhunt/inner-example', {
    // ...
 
    edit: () => {
        const blockProps = useBlockProps();
 
        return (
            <div { ...blockProps }>
                <InnerBlocks />
            </div>
        );
    },
 
    save: () => {
        const blockProps = useBlockProps.save();
 
        return (
            <div { ...blockProps }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Allowed Blocks in Nested Blocks Component

You may define the set of blocks allowed in your InnerBlock using the ALLOWED_BLOCKS parameter. This limits the blocks that can be add to those on the list; all other blocks will be hidden in the inserter.

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
//...
<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;

Orientation of Nested Blocks Component

InnerBlocks expects its blocks to be shown in a vertical list by default. InnerBlocks can be style to look horizontally, which is an acceptable use-case. The orientation prop may be use to indicate a horizontal arrangement when blocks are design in this way:

<InnerBlocks orientation="horizontal" />

When this prop is specified, the block movers will be shown horizontally, and drag and drop will operate properly.

Template

When the InnerBlocks component is add, use the template property to create a collection of blocks that will prefill the InnerBlocks component. You may specify the use of the blocks by assigning attributes to them.

The example below illustrates how to use the InnerBlocks component to create a book review template and how to provide placeholder values to demonstrate how to use the block.

ES5:

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
 
//...
 
    edit: function( props ) {
        return el(
            InnerBlocks,
            {
                template: MY_TEMPLATE,
                templateLock: "all",
            }
        );
    },

ESNext:

const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
 
//...
 
    edit: () => {
        return (
            <InnerBlocks
                template={ MY_TEMPLATE }
                templateLock="all"
            />
        );
    },

To secure the template, use the templateLock attribute. Using all locks the template fully, preventing any modifications. Additional blocks cannot be enter while the insert is use, however, existing blocks can be reorder. For further details, see the templateLock documentation.

PostTemplate

You can build a post template by post type, which preloads the block editor with a set of blocks. This is unrelated to InnerBlocks but worth discussing here. The InnerBlocks template is for the component in the single block you generate; the remainder of the post can contain any blocks the user wants. A post template may be use to restrict the whole post to the template you choose. Suggested Article: How to Add a Custom Inspector Sidebar in WordPress Gutenberg

add_action( 'init', function() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
        array( 'core/heading' )
    );
} );

Parent-Child InnerBlocks

Creating a custom block that will only be includes in the InnerBlocks is a frequent pattern for using InnerBlocks. The Columns block is an example of this since it produces a single parent block named columns and then a child block called a column. Only the kid blocks are allow in the parent block. For a quick reference, look up the column code. Use the parent block option to specify which block is the parent when defining a child block. This stops the block from appearing in the inserter outside of the InnerBlock for which it was created.

export const settings = {
    title: __( 'Column' ),
    parent: [ 'core/columns' ],
    icon,
    description: __( 'A single column within a columns block.' ),
    //...
};

That’s all for this article if you have any queries please contact us through our website or email us at [email protected]

Leave a Comment