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

Add block inspector virtual bubbling option #24991

Merged
merged 2 commits into from
Sep 2, 2020

Conversation

tellthemachines
Copy link
Contributor

Description

Fixes #24809

The block inspector in the Navigation screen is inside a Dropdown, and its default bubblesVirtually causes Dropdown's withFocusOutside wrapper to not receive focus/blur events correctly. This PR adds a bubblesVirtually prop to BlockInspector, defaulting to true, so that it can be set to false whenever the inspector needs to be used inside a dropdown or popover.

How has this been tested?

Tested in browser, checked keyboard navigation follows the correct sequence.

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

@github-actions
Copy link

github-actions bot commented Sep 2, 2020

Size Change: +33 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/block-editor/index.js 126 kB +20 B (0%)
build/edit-navigation/index.js 11.7 kB +13 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.99 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 8.55 kB 0 B
build/block-library/editor.css 8.55 kB 0 B
build/block-library/index.js 136 kB 0 B
build/block-library/style-rtl.css 7.47 kB 0 B
build/block-library/style.css 7.47 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 742 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.7 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.26 kB 0 B
build/edit-post/style.css 6.24 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 12 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.4 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ZebulanStanphill ZebulanStanphill added the Needs Accessibility Feedback Need input from accessibility label Sep 2, 2020
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does the trick. Tested both the post editor and navigation editor. The post editor still behaves the same.

The block inspector in the nav screen now doesn't close unexpectedly, focus is retained, and Escape can still be used to close the popover with focus returning to the opening button.

Comment on lines 39 to 43
{ bubblesVirtually ? (
<InspectorControls.Slot bubblesVirtually />
) : (
<InspectorControls.Slot />
) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could these be written without the ternary?

Suggested change
{ bubblesVirtually ? (
<InspectorControls.Slot bubblesVirtually />
) : (
<InspectorControls.Slot />
) }
<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, yes, of course!

@talldan talldan added [a11y] Keyboard & Focus [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Sep 2, 2020
@tellthemachines tellthemachines merged commit b96b6e3 into master Sep 2, 2020
@tellthemachines tellthemachines deleted the fix/block-inspector-bubbling branch September 2, 2020 06:14
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 2, 2020
@youknowriad
Copy link
Contributor

I think the main issue is that for DOM specific events where we rely on DOM bubbling instead of React event bubbling, we should rely on DOM events addEventListener and not React handlers.

In other words, I think the issues is not in the inspector and the inspector should always use bubblesVirtually. The issue instead is in withFocusOutside where it should use DOM events and not React events.

@talldan
Copy link
Contributor

talldan commented Sep 2, 2020

The issue instead is in withFocusOutside where it should use DOM events and not React events.

@youknowriad Though blur doesn't bubble IIRC, which this component depends on. I wonder if it may also cause some issues with nested popovers if it was implemented with DOM event listeners as blur events would occur outside the originating popover.

@youknowriad
Copy link
Contributor

@talldan Can we rely on event capturing maybe?

@tellthemachines
Copy link
Contributor Author

We could give it a try, but there's a risk it might break existing uses of withFocusOutside that rely on the event bubbling virtually.

I wonder if it may also cause some issues with nested popovers if it was implemented with DOM event listeners as blur events would occur outside the originating popover.

Don't we already have some issues with nested popovers/modals not closing when expected? Maybe worth checking if this would actually fix them 😅

@talldan
Copy link
Contributor

talldan commented Sep 3, 2020

@youknowriad @tellthemachines Here's a quick test of that - 65c5a6b

It looks like there are some issues with the nested popovers in #24304, but maybe as you say some kind of event capturing could solve that.

@youknowriad
Copy link
Contributor

there's a risk it might break existing uses of withFocusOutside that rely on the event bubbling virtually.

conceptually, it seems that withFocusOutside shouldn't rely on React event bubbling anyway. I'm having a hard time thinking about any potential use-case there. Doesn't mean it doesn't exist though.

@youknowriad
Copy link
Contributor

@talldan Can we try that on a PR and see how it looks?

@youknowriad
Copy link
Contributor

I didn't mention but omitting event bubbling in the inspector breaks the inspector for folks using RichText on the inspector.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation screen: Toggling a panel and then selecting an input will hide Block Settings
4 participants