Define allowedBlocks outside of JSX for useInnerBlocksProps function

,

Recently I stumbled upon an interesting issue when working on a Block. I used the useInnerBlocksProps hook to manage the InnerBlocks and every time I deselected the Block I got the following error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

With a bit of research I found a recent PR on the Gutenberg GitHub Repository that mentioned exactly this problem: https://github.com/WordPress/gutenberg/pull/30274

The Solution is to not define the allowedBlocks inline but rather store them in a variable and referencing it here.

Before:

function BlockEdit(props) {
    const innerBlockProps = useInnerBlocksProps({
        ...
    },{
        ...,
        allowedBlocks: ['core/heading'],
    })

    return (...)
}

After:

const ALLOWED_BLOCKS = ['core/heading'];

function BlockEdit(props) {
    const innerBlockProps = useInnerBlocksProps({
        ...
    },{
        ...,
        allowedBlocks: ALLOWED_BLOCKS,
    })

    return (...)
}

One Reply to “Define allowedBlocks outside of JSX for useInnerBlocksProps function”

Leave a Reply

Your email address will not be published. Required fields are marked *