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

Block editor: rewrite selection clearer #27468

Merged
merged 1 commit into from
Dec 6, 2020

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Dec 3, 2020

Description

Currently the selection clearer works by catching focus on a wrapper. Because of this focusable element, it's trickier to remove the wrapper and share it with the click redirect wrapper. Additionally, it also tricky to remove in the context of an iframe where the body element cannot be truly focusable (because of how the browser handler focus loss, returning focus to the body element in that case, without firing any focus events).

The selection clearer can easily be rewritten to look for clicks instead of focus. There's already a precedent of doing so in the click redirect, where we redirect focus to the last block if the user clicks at the bottom of the editor. The clearer is basically the same thing, detecting clicks around the content to clear the block selection.

How has this been tested?

Screenshots

Types of changes

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.

@ellatrix ellatrix added the [Type] Code Quality Issues or PRs that relate to code quality label Dec 3, 2020
@ellatrix ellatrix force-pushed the remove/focusable-wrapper-div branch from 6b3a907 to 4538409 Compare December 3, 2020 12:07
@github-actions
Copy link

github-actions bot commented Dec 3, 2020

Size Change: +29 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-editor/index.js 128 kB +15 B (0%)
build/edit-post/index.js 306 kB -4 B (0%)
build/edit-site/index.js 24.5 kB +18 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 9.07 kB 0 B
build/block-library/editor.css 9.07 kB 0 B
build/block-library/index.js 149 kB 0 B
build/block-library/style-rtl.css 8.34 kB 0 B
build/block-library/style.css 8.34 kB 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.95 kB 0 B
build/core-data/index.js 15.2 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 8.98 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.49 kB 0 B
build/edit-post/style.css 6.47 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 43.6 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.63 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.74 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.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.93 kB 0 B
build/list-reusable-blocks/index.js 3.1 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.31 kB 0 B
build/notices/index.js 1.82 kB 0 B
build/nux/index.js 3.42 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.43 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 2.92 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 2.84 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@ellatrix ellatrix force-pushed the remove/focusable-wrapper-div branch from bf85a9c to 6161bfa Compare December 3, 2020 19:00
@ellatrix ellatrix changed the title Visual editor: remove focusable div wrapper Block editor: rewrite selection clearer Dec 6, 2020
@ellatrix ellatrix force-pushed the remove/focusable-wrapper-div branch from 4b46a86 to c34a199 Compare December 6, 2020 09:53
function onFocus() {
function onMouseDown( event ) {
// Only handle clicks on the canvas, not the content.
if ( event.target.closest( '.wp-block' ) ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

This condition could be removed eventually when the content is directly rendered into the wrapper the mousedown event is listened for. Currently there are a few wrappers in between the selection clearer and the block for which we also need to detect clicks.

Copy link
Contributor

@youknowriad youknowriad Dec 25, 2020

Choose a reason for hiding this comment

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

The changes in this PR break the selection clearer in the widgets screen (you can't click any button on the toolbar). .wp-block must not be enough.

Ii also wonder why you're using mousedown, focusing outside (without clicking) should also have the same behavior right?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm going to restore the previous behavior for now to perform a patch release.

@ellatrix ellatrix merged commit 6c9efd4 into master Dec 6, 2020
@ellatrix ellatrix deleted the remove/focusable-wrapper-div branch December 6, 2020 10:50
@github-actions github-actions bot added this to the Gutenberg 9.6 milestone Dec 6, 2020
@youknowriad
Copy link
Contributor

I think this kind of impactful PRs could use more reviews.

@@ -64,7 +64,6 @@ export default function VisualEditor() {
<div
ref={ ref }
className="editor-styles-wrapper"
tabIndex="-1"
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we know why this was here and why this was removed?

youknowriad added a commit that referenced this pull request Dec 25, 2020
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 25, 2020
youknowriad added a commit that referenced this pull request Dec 25, 2020
youknowriad added a commit that referenced this pull request Dec 25, 2020
ellatrix added a commit that referenced this pull request Jan 8, 2021
ellatrix added a commit that referenced this pull request Jan 10, 2021
* evert "Revert "Visual editor: remove focusable div wrapper (#27468)" (#27894)"

This reverts commit dc1cb9d.

* Don't wrap toolbar in selection clearer

* Remove focus propagation stopping because clearer is no longer focus based
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants