Detect focus leaving wpbody-content to clear selected block #1266
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related: #1079
This pull request seeks to improve block clearing by detecting focus having left the
#wpbody-content
element. Notably, this preserves existing behavior of preserving the selected block while adjusting its settings from the Post Settings drawer, but clearing the selected block when clicking elsewhere in the admin chrome (admin bar, sidebar) or below post content (especially noticeable for new posts with few blocks).Implementation notes:
A bit of hypocrisy here in making assumptions about ancestor DOM elements from the context of
VisualEditor
. I debated where best this logic should exist, since it's fairly specific to the visual editing mode. I'm open to suggestions here, and in the meantime have documented the expected behavior inline.I'd hoped that by detecting focus leaving
#wpbody-content
, we could remove the logic for detecting and clearing on Escape since Escape should cause focus to move to the top-levelbody
element. However, in my testing this did not work correctly. It may be that we'd have to force TinyMCE to blur on Escape (from Editable), but even for other block types such as Image, this behavior was not working. I might spend some more time investigating this.Related to #1079, "canvas click" has been changed from detecting click target as one of two assigned
ref
nodes to an implementation where propagation is stopped from theBlock
component on click. I don't feel great about either of these implementations personally.Unfortunately, this new implementation reverts to a behavior where the selected block is cleared when moving from the page to the browser Developer Tools inspector.
Testing instructions:
Verify that a selected block can be cleared by clicking above the editor column, on its sides, below the editor column, in the dashboard admin bar, or in the dashboard sidebar.
Verify that a selected block is not cleared by clicking between blocks, clicking in the editor header, or clicking in the Post Settings sidebar.