Inner Blocks

Inner Blocks component creates a nested area and lets you insert all available blocks inside it. See examples below to use this component.

To add support for inner blocks, use the <InnerBlocks /> component within your block code. This component will be displayed as a native inserter when editing content, and the saved inner blocks content when viewing content.

Usage

<InnerBlocks />

Example with predefined template and locked blocks in this template:

<InnerBlocks
  template="[
    [ 'core/heading', { content: 'Blocks locking example:', level: 4 } ],
    [ 'core/paragraph', {
      content: 'This paragraph you can\'t move and remove',
      className: 'custom-classname-here',
      lock: {
        remove: true,
        move: true,
      }
    } ],
    [ 'core/paragraph', { content: 'This one can be freely removed' } ],
  ]"
/>

Example with different elements in the block output, limited set of allowed blocks in the InnerBlocks component, and predefined template with columns:

<p>The custom set of blocks will be placed below:</p>
 
<InnerBlocks
  allowedBlocks="[ 'core/paragraph', 'core/image', 'core/columns', 'core/column' ]"
  template="[
    [ 'core/columns', {}, [
      [ 'core/column', {}, [
        [ 'core/image' ],
      ] ],
      [ 'core/column', {}, [
        [ 'core/paragraph', { placeholder: 'Enter side content...' } ],
      ] ],
    ] ]
  ]"
/>
 
<p>This order of components will be also used inside the block editor.</p>

Attributes

The <InnerBlocks /> component support the following attributes as documented in the InnerBlocks Component Documentation.

• className - an optional custom class added to the wrapper block. By default used class with name lazyblock-inner-blocks
• allowedBlocks - an array of strings, each string should contain the identifier of a block. When allowedBlocks is set it is only possible to insert blocks part of the set specified in the array.
• template - a list of block items. Such blocks can have predefined attributes, placeholder, content, etc. Block templates allow specifying a default initial state for an InnerBlocks component. More information about templates can be found in template docs.
• templateLock - locking the InnerBlocks component for the current template. Options:
  • contentOnly — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
  • all — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
  • insert — prevents inserting or removing blocks, but allows moving existing ones.
  • false — prevents locking from being applied to an InnerBlocks area even if a parent block contains locking.
• prioritizedInserterBlocks - an array of strings, each string should contain the identifier of a block. Determines which block types should be shown in the block inserter.

InnerBlocks Wrapper

Lazy Blocks automatically add a wrapper to the <InnerBlocks /> component. If you want to add your own wrapper implementation with custom attributes in the frontend code output, you can easily disable default wrapper for your inner blocks using this filter:

// disable <InnerBlocks /> wrapper.
add_filter( 'lazyblock/BLOCK_SLUG/allow_inner_blocks_wrapper', '__return_false' );