InnerBlocks Support

InnerBlocks lets you create areas in your block where users can add other Gutenberg blocks. This is how core blocks like Columns and Cover work.

What Are InnerBlocks?

InnerBlocks create a “drop zone” where users can add:

• Any Gutenberg block
• Specific block types only
• Pre-defined block arrangements

Use Cases

Layout Blocks

• Columns — Multi-column layouts
• Section — Full-width content areas
• Container — Wrappers with max-width

Content Blocks

• Hero — Header areas with nested content
• Card — Content cards with flexible inner content
• Accordion — Expandable content sections

Interactive Blocks

• Tabs — Tabbed content areas
• Slider — Carousel of nested blocks
• Toggle — Expandable/collapsible content

Complex Structures

• Page Builders — Layout containers with nested content
• Pricing Tables — Grid of pricing items
• Team Sections — Grid of team member cards

Creating InnerBlocks

Step 1: Add InnerBlocks Attribute

1. Click + Add Attribute
2. Set Type: InnerBlocks
3. Set Label: Content

Step 2: Configure Allowed Blocks

Choose which blocks users can add:

{
  "name": "content",
  "type": "innerblocks",
  "allowedBlocks": ["core/paragraph", "core/image", "core/heading"]
}

Step 3: Set Template (Optional)

Define a starter template:

{
  "name": "content",
  "type": "innerblocks",
  "template": [
    ["core/heading", { "level": 2 }],
    ["core/paragraph", { "placeholder": "Add content..." }]
  ],
  "templateLock": "all"
}

Auto-Generated Twig

WPBits Block Studio automatically adds the InnerBlocks rendering code to your Twig template:

{# Inner blocks are auto-rendered #}
{{ attributes.content|raw }}

This means InnerBlocks work out of the box without manual template edits.

Template Locking

Control how users interact with the template:

Mode	Description
false	No locking — users can modify
all	Lock everything — no changes allowed
insert	Users can add blocks but not remove
object	Custom locking per block

Combining with Repeater

InnerBlocks work great with Repeater for complex structures:

{
  "type": "repeater",
  "name": "slides",
  "fields": [
    { "name": "title", "type": "text" },
    { "name": "content", "type": "innerblocks" }
  ]
}

This creates a slider block where each slide has its own content area.

Next Steps

• Groups Tab — Organize attributes
• Repeater Control Type — Add repeatable content