3

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?

1
  • Last time I tested this (~1y ago) it wasn't easily possible. So for that project we only allowed blocks that have no inner blocks or custom versions of group/etc. where we could define the allowedBlocks again.
    – kero
    Commented Nov 10, 2021 at 9:23

1 Answer 1

0

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} />;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.