BugWP logo BugWP
Back to Community
Home / Community / Core → Developing with wordpress

How to Control Allowed Blocks in Nested InnerBlocks

34 threads Sep 7, 2025 Core → Developing with wordpress

Content

One of the more powerful features of the WordPress block editor is the ability to create nested block structures using InnerBlocks. However, a common point of confusion arises when trying to control which blocks are allowed at different levels of this hierarchy. This guide will explain the expected behavior and provide solutions for properly restricting blocks in parent and child blocks.

The Problem: Inheritance of Allowed Blocks

Many developers expect that setting the allowedBlocks property on a parent block will only affect that block's direct children. However, as noted in the community forums, a parent block's allowedBlocks setting can sometimes affect its grandchildren and deeper nested blocks as well. This can be problematic if you want a parent block to only allow a specific child block, but then want that child block to be able to contain a wider variety of grandchild blocks.

Why This Happens

This behavior is part of the block editor's design. The allowedBlocks property defines which blocks can be inserted into the InnerBlocks area it is applied to. By default, this setting is inherited by any nested InnerBlocks within the allowed blocks unless those nested blocks explicitly define their own allowedBlocks list.

Solution: Define Allowed Blocks at Each Level

The most effective solution is to explicitly define the allowedBlocks for each level of your nested block structure. According to the official WordPress documentation on Nested Blocks and InnerBlocks, different blocks can define their own allowed blocks.

Here's how to implement this:

  1. Parent Block: In your parent block's edit function, set the allowedBlocks prop on its InnerBlocks component to an array containing only your custom child block, e.g., ['namespace/child-block'].
  2. Child Block: In your child block's edit function, define its own InnerBlocks component with a separate allowedBlocks list. This list should contain all the blocks you want to allow within the child block. This explicit definition will override any inheritance from the parent.

Example Code Snippet for a Child Block:

// Inside the child block's edit function
<InnerBlocks
    allowedBlocks={['core/paragraph', 'core/image', 'core/heading']}
/>

Alternative Approach: Using a Block Template

For more complex or rigid structures, you can use a block template with the InnerBlocks component. A template can lock the initial block structure, preventing users from removing blocks or changing the order. While this is more restrictive, it ensures the layout remains exactly as intended.

Important Considerations

  • This approach requires that your child block is a custom block you have created, as you need access to its source code to modify its InnerBlocks properties.
  • Testing is crucial. After implementing these changes, verify that blocks can be inserted as expected at each level of your structure and that the parent's restrictions do not inadvertently affect deeper nesting.
  • As highlighted in community discussions, the visibility of blocks in the slash inserter menu (/) when some are disallowed can be a separate UI issue. The focus of this solution is on the functional restriction of block insertion.

By carefully defining allowedBlocks at each level of your nested block structure, you can achieve the precise control needed for complex layouts without unintended inheritance issues.

Related Support Threads Support