Customizer: Implement mobile responsive block toolbar #31589
Merged
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
talldan
added
[Type] Enhancement
talldan
requested review from
tellthemachines,
noisysocks,
kevin940726,
critterverse and
draganescu
|
Size Change: -11.6 kB (-1%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
The header needs a
The description container only overlays the toolbar when scrolling up, and I don't think that's too bad. It's easy enough to hide again by scrolling down, and users are familiar with how it works already. |
|
Thanks for the hints @tellthemachines, that should be working now! |
tellthemachines
approved these changes
May 10, 2021
| border-bottom: 1px solid $gray-200; | ||
|
|
||
| // Ensure widget UI doesn't overlap when scrolling | ||
| z-index: 8; |
There was a problem hiding this comment.
What's the reason for 8 here? 2 seems to work as well. Might be worth adding something to the comment about what we're trying to overlay.
There was a problem hiding this comment.
I've move this to the z-indexes file and added a better comment 👍
Also split the topbar and toolbar indices. I figure it's best to make them as high as possible as nothing else should overlap them other than the odd element (popovers, tooltips) that already has a much higher z-index.
|
I've just spotted an additional issue. The floating block toolbar on desktop viewports is now overlapped by the sticky topbar when scrolling down. I need to find a way to offset it. I think it defaults to stopping at the top of its scroll area:
|
7 tasks
|
Nice! The only thing I spotted is that I think we should hide the fixed toolbar bottom border when everything is deselected, so that there’s no visible bar area there unless a block is selected. Here's how it works in the post editor: fixed-toolbar-post-editor.movThanks @talldan! |
|
I haven't yet come up with a way to solve this issue where the toolbar goes under the topbar when scrolling up: I think this is what the Open to suggestions (or a commit that solve the issue 😄). |
|
For now I've removed the sticky topbar behavior to solve the issue I had above. I think it's more important to get this in before the WordPress 5.8 feature freeze. |
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.
Description
Follow up to #31134
Progresses #30912Closes #30720
Styles the fixed (mobile responsive) toolbar that #31134 introduced to look like the design in #30720 (comment).
I've also styled the top bar a bit and set it to
position: sticky(#30912), but for some reason it doesn't stick while the toolbar does. Not sure if any CSS pros have any ideas how to solve that? There's still a separate issue open for it, so it doesn't have to be solved in this PR, but it might be nice.The stickyness of the block toolbar itself isn't perfect as the customizer has it's own JavaScript-y scrolling thing happening with the sidebar description container above it.
How has this been tested?
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).