InnerBlocks restricting does not work on nested blocks

Question

I'm defining which set of blocks to allow in my custom innerblocks:

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph', 'core/group' ];

...

<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;

This seems to work fine. Only image, paragraph, and group blocks are showing as options when trying to insert blocks in my custom innerblocks block.

However the group block also accepts nested blocks. It is not following ALLOWED_BLOCKS and allowing any block to be added.

How can I apply ALLOWED_BLOCKS to blocks that use innerblocks which are added to my custom innerblocks?

Answer 1

The allowedBlocks attribute was recently added to the Group block:

https://github.com/WordPress/gutenberg/releases/tag/v15.7.0

If you have the Gutenberg plugin installed, you should be able set that attribute now!

I don't think you can set that attribute in the main allowed blocks prop, but I have been able to set up a template for my inner blocks and specify it, like this:

In your Edit.jsx file:

const INNER_BLOCKS_TEMPLATE = [
    [
        "core/group",
        {
            allowedBlocks: ["core/heading", "core/paragraph", "core/buttons"],
        },
    ],
];

return <InnerBlocks template={INNER_BLOCKS_TEMPLATE} />;