Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

@ragnarokatz
Copy link
Contributor

ragnarokatz commented Feb 7, 2020

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:

image
image

After:

image
image

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

This comment has been minimized.

Copy link
Contributor

yansern commented Feb 7, 2020

@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 }
>
Copy link
Contributor

talldan left a comment

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

This comment has been minimized.

Copy link
Contributor Author

ragnarokatz commented Feb 7, 2020

@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.

@ragnarokatz ragnarokatz force-pushed the ragnarokatz:fix-issue-20069-block-editor-warning branch from 6665cdc to a5b51bd Feb 7, 2020
@ragnarokatz ragnarokatz requested a review from talldan Feb 7, 2020
…t to stop adding hasPopover prop to Container when Container is 'div'
@ragnarokatz ragnarokatz force-pushed the ragnarokatz:fix-issue-20069-block-editor-warning branch from a5b51bd to 3be41fd Feb 7, 2020
@aduth
aduth approved these changes Feb 7, 2020
Copy link
Member

aduth left a comment

Thanks for the quick fix.

@aduth aduth merged commit 4030f73 into WordPress:master Feb 7, 2020
1 check passed
1 check passed
Travis CI - Pull Request Build Passed
Details
@github-actions github-actions bot added this to the Gutenberg 7.5 milestone Feb 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

4 participants
You can’t perform that action at this time.