Inner Blocks

The <InnerBlocks /> component is a special Lazy Blocks component that creates a nested block area where users can add and manage other blocks inside your custom block. This component gets processed and replaced with proper WordPress InnerBlocks functionality during block rendering.

Basic Usage

Add the <InnerBlocks /> component anywhere in your block code:

<div useBlockProps>
  <h2>Inner block here:</h2>
  <InnerBlocks />
</div>

Advanced Examples

Locked Template

Create a block with predefined content that users can't move or remove:

<InnerBlocks
  template="[
    [ 'core/heading', {
        content: 'Welcome Section',
        level: 2
    } ],
    [ 'core/paragraph', {
        content: 'This paragraph is locked',
        className: 'intro-text',
        lock: {
          remove: true,
          move: true
        }
    } ],
    [ 'core/paragraph', {
        content: 'This one can be removed'
    } ]
  ]"
/>

Limited Block Types

Restrict available blocks and create a predefined column layout:

<div class="custom-layout">
  <h3>Content Section</h3>
 
  <InnerBlocks
    allowedBlocks="[
      'core/paragraph',
      'core/image',
      'core/columns',
      'core/column'
    ]"
    template="[
      [ 'core/columns', {}, [
        [ 'core/column', {}, [
          [ 'core/image' ]
        ] ],
        [ 'core/column', {}, [
          [ 'core/paragraph', {
            placeholder: 'Add content here...'
          } ]
        ] ]
      ] ]
    ]"
  />
</div>

Component Attributes

Essential Attributes

• className - Custom wrapper class (default: lazyblock-inner-blocks)
• allowedBlocks - Array of allowed block types
• template - Predefined blocks structure

Lock Options

• templateLock:
  • contentOnly - Prevents all operations
  • all - Prevents inserting, moving, and removing blocks
  • insert - Prevents adding/removing blocks, allows moving
  • false - Disables locking

Additional Attributes

• prioritizedInserterBlocks - Block types to prioritize in the inserter

Custom Wrapper

By default, Lazy Blocks adds a wrapper around Inner Blocks. Disable it using:

add_filter(
    'lazyblock/your-block-slug/allow_inner_blocks_wrapper',
    '__return_false'
);

Best Practices

• Use templates to create structured layouts and maintain content consistency
• Consider user experience when setting lock options
• For detailed template options, see the WordPress Block Templates documentation.