Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try: Improve scrolling of navigation menu on small screens #12644
We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.
However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the
In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.
This PR improves that situation by making the editing canvas
This needs a good testing.
referenced this pull request
Dec 6, 2018
Rebased, and did further testing. Edge and IE look fine. Edge:
Note, IE has some weird overlaying autohiding scrollbars which we can do nothing about, but this is unchanged in this PR and simply how IE11 works.
There's an e2e test that keeps failing, but I don't understand why as it seems entirely unrelated:
Okay, found a rather delightful and simple fix (478e9bc) that makes the flexing work in IE11. Here's a swath of new testing. IE11:
The iphone simulator for good measure:
I feel pretty good about this one. But would still appreciate your sanity checks, but also advice on why the checks are failing.
Dec 14, 2018
This could have a small impact on the width of the columns for instance, and this means maybe while previously we had to do two arrow ups to move to the first row of the block, we need to do only one at the moment.
Makes sense, and I could probably "fix the test" to make it pass. But I wouldn't necessarily fully understand what I did in the process, and I would rather if someone who was involved with the original test, or understands it better than I do, help give insight, as I'm worried about breaking the tests by "fixing" them.
I found a fix.
Turns out in my IE11 fix here, I had prevented the editor from shrinking, meaning the metaboxes were outside the visual area on an empty screen. The width of the scrollbar this caused, meant the text from the test, "Second column paragraph" wrapped onto THREE lines instead of TWO.
So the test, in a roundabout way, worked. I expect the tests to pass now.
ce7dfe0 includes some feedback from @tofumatt addressed, and it also changes the matrix of the folded/autofold rules to better match that from the mixin. But the net result for that change is identical to before. The real change is here: ce7dfe0#diff-ec5f5c91d0b3295f448977820605e4e4R147
That changing of flex means it works for both IE11 and other browsers.
Before, it was
Okay, it appears the test is still failing. Which puts me at the end of my rope. The first test failure was legitimate in that I discovered the missing "flex-shrink" property that caused metaboxes to be out of view.
But I don't know why it's failing now, even locally.
Changing the test to the following makes it pass:
Because "2nd paragraph" is most likely to wrap on two lines instead of 3.
I have no idea how to proceed, other than to change the test.
Help me @gziolo test master, you're my only hope!
If I update the snapshots, another test fails:
I'm not sure I'm doing this right, so I'd appreciate help here.
Dec 24, 2018
1 check passed
I just got this as a complaint from a user.
"it seems like as soon as I scroll down to the bottom of the page it prevents me from scrolling back up to the top. This means every time I scroll to the bottom I have to save a draft and start over."
She was also having problems with the classic editor admin, so we switched to gutenberg. Scrolling of the admin is ok for me, but I've got a big window. When I make my window shorter, the scrollbar disappears. I can still scroll using the mouse, but this is difficult for some users with shorter windows. She says she can't click above the nonexistent scrollbar.