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”
You just saved my life! Thanks a lot!