Try another approach to fixing the sibling inserter in Firefox #7530
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR partially fixes #7508. It is an alternate version of #7525, though much the same. In #7220 we introduced a new behavior for the sibling inserter, which requires a click on the plus in the center as opposed to just clicking between two blocks. Turns out it was sort of a race condition between onClick and onMouseDown, the latter which fires first. So in a way, the Firefox and Safari behavior of selecting the block (which is selected onMouseDown) as opposed to clicking the sibling inserter was the correct one. This PR "fixes" it by also making the sibling inserter use onMouseDown. But in addition to this, it uses onClick as well, so it's still keyboardable. The net effect is that both work, with the added benefit that in Firefox and Safari, the block that you're hovering isn't briefly "selected" when you're clicking.
tofumatt
previously requested changes
Jun 25, 2018
| @@ -63,6 +74,7 @@ class BlockInsertionPoint extends Component { | |||
| icon="insert" | |||
| className="editor-block-list__insertion-point-button" | |||
| onClick={ this.onClick } | |||
| onMouseDown={ this.onMouseDown } | |||
There was a problem hiding this comment.
I would just reference this.onClick here (maybe rename it to insertNewBlock or whatever) rather than duplicating the handler's code.
There was a problem hiding this comment.
Feel free to commandeer the PR and push directly to it. ❤️
youknowriad
approved these changes
Jun 26, 2018
Turns out this issue has been present in some hidden form for a long time, and _partially fixed_ in Chrome. But there has always been a race condition, it looks like, between onClick, onFocus and onMouseDown. This commit simply adds the "onFocusInserter" action to the onMouseDown event as well, which seems to solve the issue. You still briefly see the block being selected and the toolbar appearing in Firefox and Safari, but at least this can work as a hotfix pending further investigation or improvements.
youknowriad
requested changes
Jun 26, 2018
|
Thanks for the fast review, and will look at tests in a second. Just wanted to clarify that I just pushed a change in 743c219 which changes it so the onFocusInserter is attached to onMouseDown as well, and this fixes the issue for Firefox and Safari, without us losing focus. Behold:
The issue where the block toolbar briefly appears is still there, but this is an improvement in that it now works as intended. Edit: It's also fixed in Firefox, but I figured I'd only record one GIF. |
|
Okay I think the latest two commits might have fixed the e2e tests. Final review? |
youknowriad
approved these changes
Jun 26, 2018
jasmussen
dismissed
tofumatt’s stale review
The issues have been addressed, by yourself even :D
|
🎉 Thanks everyone! Good to have this in. |
oxyc
added a commit
to generoi/gutenberg
that referenced
this pull request
Jun 26, 2018
* 'master' of https://github.com/WordPress/gutenberg: (69 commits) fix: Show permalink editor in editor (WordPress#7494) Fix text wrapping in Firefox. (WordPress#7472) Try another approach to fixing the sibling inserter in Firefox (WordPress#7530) fix: Improve "add block" text in NUX onboarding (WordPress#7511) Implement core style of including revisions data on Post response (WordPress#7495) Testing: Add e2e test for PluginPostStatusInfo (WordPress#7284) Add end 2 end test for sidebar behaviours on mobile and desktop. (WordPress#6877) Only save metaboxes when it's not an autosave (WordPress#7502) Fix broken links in documentation (WordPress#7532) Remove post type 'viewable' compatibility shim (WordPress#7496) Fix typo. (WordPress#7528) Blocks: Remove wrapping div from paragraph block (WordPress#7477) fix: change import for InnerBlocks (WordPress#7484) Polish library just a teeeeensy bit (WordPress#7522) feat: Add snapshot update script (WordPress#7514) Display server error message when one exists (WordPress#7434) Fix issues with gallery in IE11. (WordPress#7465) Polish region focus style (WordPress#7459) Fix IE11 formatting toolbar visibility (WordPress#7413) Update plugin version to 3.1. (WordPress#7402) ...
|
I don't think the changes to |
|
See #7641 |
|
This is purely a styling issue: #7642 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR partially fixes #7508. It is an alternate version of #7525, though much the same.
In #7220 we introduced a new behavior for the sibling inserter, which requires a click on the plus in the center as opposed to just clicking between two blocks.
Turns out it was sort of a race condition between onClick and onMouseDown, the latter which fires first. So in a way, the Firefox and Safari behavior of selecting the block (which is selected onMouseDown) as opposed to clicking the sibling inserter was the correct one.
This PR "fixes" it by also making the sibling inserter use onMouseDown. But in addition to this, it uses onClick as well, so it's still keyboardable.
The net effect is that both work, with the added benefit that in Firefox and Safari, the block that you're hovering isn't briefly "selected" when you're clicking.
GIF:
Note, though, that when clicking, text focus isn't set on the newly created sibling block. This is something we'll want to fix before this can be merged.