Fix issue #20069: Block Editor: Warning when rendering InnerBlocks

[ragnarokatz]

Fixes #20069

Description

Implement conditional rendering for Block Editor's BlockList component to stop adding hasPopover prop to Container when Container is 'div'.

How has this been tested?

1. Navigate to Posts > Add New
2. Insert a Columns block
3. Open Developer Tools Console and observe warning

Screenshots

Before:

After:

Types of changes

Bug fix, fixes a warning that was being fired from the developer console.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[yansern]

@ragnarokatz I'm wondering if it is possible to minimize changes by avoiding having to refactor the child components and constructing the containers twice.

It might be possible to use the spread operator on just the experimental props for the container. Try this?

const __experimentalContainerProps = rootClientId ? {} : { hasPopover: __experimentalUIParts.hasPopover };

<Container
	ref={ ref }
	className={ classnames(
		'block-editor-block-list__layout',
		className
	) }
	{ ...__experimentalContainerProps }
>

[talldan]

Hey @ragnarokatz, Thanks for taking this on. I think this code could be simplified if the prop were defined like this:

hasPopover={ Container === 'div' ? undefined : __experimentalUIParts.hasPopover }

edit: ah, only just realised @yansern had a similar proposal!

[ragnarokatz]

@talldan @yansern thank you for your suggestions.

@talldan I tried your suggestion first, since it is the least amount of code changes. The warning is still there. I tried a similar approach last night with hasPopover={ Container === 'div' ? false : __experimentalUIParts.hasPopover }, and it also didn't work.

@yansern I gave yours ago, and it works. I will push the updated changes soon.

I learned something new today! The spread operator -> ... in React.

[aduth]

Thanks for the quick fix.