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

Fix: Block toolbar appears above sidebar on medium viewports #17108


Copy link

commented Aug 20, 2019


The .edit-post-sidebar {greater than small} z index is 90 so it is bellow some wp admin UI.
The block movers z-index, dropzone, and other block related UI range between 100 to 122.
This causes a problem on medium screens block related UI appears above the block sidebar making the sidebar hard to use. It is also possible to drag things and to the sidebar and trigger upload actions.

This PR decreases the block related UI elements by 60 so the values are lower than the sidebar z-index of 90.

How has this been tested?

I set a screen width of 768.
I created some blocks and made the toolbar and block movers visible.
I opened the sidebar and verified the block UI is not visible.
I tried to drag a file to the sidebar and verified the drop zone indication did not appear.


Screenshot 2019-08-20 at 17 27 06
Aug-20-2019 17-29-00


This comment has been minimized.

Copy link

commented Aug 21, 2019

Thanks for catching this one, @jorgefilipecosta. In my testing, the toolbar is not appearing above the sidebar any longer. But I am still seeing the dropzone indicators:



This comment has been minimized.

Copy link
Member Author

commented Aug 22, 2019

Hi @kjellr, I'm not being able to replicate the problem. Maybe it was a caching issue? I noticed that sometimes changes to SCSS variables are not caught. Ideally, a total rebuild should be done (stop the currently running test setup and restart it -- rpm run dev again), also probably using the option to force cache refresh or a private window may help.
If the problem is persisting could you please share what browser are you testing on and the specific window width used in the tests?

@jorgefilipecosta jorgefilipecosta force-pushed the fix/block-toolbar-appears-above-sidebar-on-media-screens branch 2 times, most recently from 5d1d352 to f0a8589 Aug 22, 2019
kjellr approved these changes Aug 23, 2019
Copy link

left a comment

Hi @kjellr, I'm not being able to replicate the problem. Maybe it was a caching issue?

🙃 Yep, sorry about that. Not seeing the issue today, so I think this is good to go!

@jorgefilipecosta jorgefilipecosta merged commit eb732a4 into master Aug 23, 2019
1 check passed
1 check passed
Travis CI - Pull Request Build Passed
@jorgefilipecosta jorgefilipecosta deleted the fix/block-toolbar-appears-above-sidebar-on-media-screens branch Aug 23, 2019
@senadir senadir added this to the Gutenberg 6.4 milestone Aug 25, 2019
donmhico added a commit to donmhico/gutenberg that referenced this pull request Aug 27, 2019
dratwas added a commit to callstack/gutenberg that referenced this pull request Aug 28, 2019
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.