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

Writing Flow: fix empty horizontal arrow nav #16846

Merged
merged 3 commits into from
Aug 9, 2019
Merged

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Jul 31, 2019

Description

Fixes #16841.

It seems like the cause of these regressions are:

  1. The rich text element no longer being relatively positioned broke the z-index trick to correctly calculate a range.
  2. The new placeholder (Improved rich text placeholder #16733) seems to create a selection that is sometimes:
    • Uncollapsed when the user clicks in an empty paragraph (even though it looks collapsed).
    • Sometimes a bit further away, but still no more than 1 pixel.

Solution:

  1. Always position the element relatively when using the z-index trick.
  2. Set contenteditable=false on the placeholder so that it never catches selection.
  3. Increase the buffer for checking if horizontal selection is at the edge from about <=0.5 px to 1px.

How has this been tested?

See #16841.

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.

@ellatrix ellatrix added the [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... label Jul 31, 2019
@ellatrix ellatrix added this to the Gutenberg 6.3 milestone Jul 31, 2019
@ellatrix ellatrix added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Jul 31, 2019
@ellatrix ellatrix changed the title Writing Flow: fix horizontal arrow nav Writing Flow: fix empty horizontal arrow nav Aug 1, 2019
@ellatrix ellatrix added [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release labels Aug 1, 2019
@ellatrix
Copy link
Member Author

ellatrix commented Aug 7, 2019

Rebased. This regression is important to be fixed ASAP I think. :) Some of it has been introduced by #16733.

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.

I noticed this for the first time today, so it's great there's a fix ready! It worked well in my testing. I'm not completely familiar with the code or how isEdge works, but when debugging I noticed the issue was with the position comparison returning false, so the fix seems good.

packages/rich-text/src/to-tree.js Show resolved Hide resolved
@ellatrix
Copy link
Member Author

ellatrix commented Aug 9, 2019

Thanks for the review @talldan!

@ellatrix ellatrix merged commit c7faf14 into master Aug 9, 2019
@ellatrix ellatrix deleted the fix/horizontal-arrow-nav branch August 9, 2019 13:50
gziolo pushed a commit that referenced this pull request Aug 29, 2019
* Writing Flow: fix horizontal arrow nav

* Add e2e test

* Add inline comment
gziolo pushed a commit that referenced this pull request Aug 29, 2019
* Writing Flow: fix horizontal arrow nav

* Add e2e test

* Add inline comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WritingFlow: Arrow keys occasionally error, do not navigate to next block
2 participants