Implementing two innerBlocks inside a custom block results in shared state between the two components

[inspirewebdesigns]

Describe the bug
When creating a custom block with two InnerBlocks next to each other they share the same state, duplicate the InspectorControls in the sidebar and cause high CPU load resulting in page lag.

To reproduce
Steps to reproduce the behavior:

1. Create a block with two InnerBlocks in the Edit Callback
2. Add the block to a page
3. Try edit the block, and look at the InspectorControls
4. Encounter duplicate behavior of the two blocks, both blocks share the same state and the InspectorControls options are duplicated. Also encounter high CPU load and page lag.

Expected behavior
Each InnerBlock to have it own state, a single InspectorControls options for each InnerBlock, normal CPU load and no page lag.

Screenshots
Bug

Code

Desktop:

• OS: Linux Ubuntu
• Browser: Firefox

Additional context

• WordPress 5.3.2

[chrisvanpatten]

@solutions4theweb Two InnerBlocks areas are not supported within a block, because you can't currently serialize it as two separate areas (the block serialization format only supports one innerBlocks area).

Typically the suggestion is to have a single InnerBlocks area which has a template with two blocks which each support their own InnerBlocks area.

[chrisvanpatten]

Perhaps this is something that we could catch, and use the @wordpress/warning package introduced in #19317 to display a console message?

[inspirewebdesigns]

Hi @chrisvanpatten, thanks for your blazingly fast reply!

That makes a lot of sense, the actual use case where I discovered this was when I was creating a Slider Block where each Slide has its own InnerBlock. A warning message would be incredibly helpful in identifying this when its not immediately obvious that multiple InnerBlocks are being rendered.

The typical suggestion you mentioned is the way to go, and would definitely cover my use case!