Fix fixed toolbar in customize widgets #51092
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
|
Size Change: +145 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 146373e641220f31df454eda02f2686ad30f8f8f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5176449870
|
priethor
added
[Type] Bug
draganescu
force-pushed
the
fix/customize-widgets-fixed-toolbar
branch
from
a7a4b68 to
822b7c9
Compare
|
Testing this with @jeryj we found a bug:
This happens because in this PR i have to hide with Setting the 1st element in Also the button would also now show at all if Either way, I am a bit stuck on how to move here. |
|
I took this as a learning day for That said, this is really a hack for a very specific edge case, so maybe it's best to be handled through the block popover. We are already passing the My feeling is that we should do this within the block popover, but I just tried setting the Another unrelated issue I was looking into today is that |
|
I will try to simply not hide the collapse button and style the collapsed top toolbar to look OK. Edit: updated the description video with how it works now. This option avoids the bug discovered by @jeryj but leaves a dubious UX - I think it's a good compromise, util we can figure out a better way. |
|
This seems like a good enough compromise to me! |
|
When in select mode, the block name popover isn't fully visible, as it's hidden behind the toolbar. Not sure what the best designed solution is for this. Maybe just increase the padding on the top of the editor window? 
Also, the |
|
@jeryj I've lowered the z-index of the fixed toolbar, the navigation mode popover should now look OK. |
draganescu
force-pushed
the
fix/customize-widgets-fixed-toolbar
branch
from
146373e to
6eb27ff
Compare
|
Now the block name popover is hidden by the inserter toolbar! This is a lot better than what we have right now though, so I think we should merge and then consider if we want to make more fixes. |
scruffian
approved these changes
Jun 16, 2023
That is not the insterter toolbar, it is customizer chrome. I think it's OK to keep that on top. |
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* override fixed block toolbar styles in the customize widgets editor * show the collapse button and style collapsed block toolbar * lower the z-index of the block toolbar in widgets customizer
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.
What?
Fixes #51037.
Why?
Because in the customizer's widget editor the fixed top toolbar was inheriting the styles from the desktopn breakpoint - but in the customizer we have a small tall editor - yet the breakpoints don't fire in that panel.
How?
Overriding the styles to be like those on mobile breakpoints in the block toolbar fixed version.
Testing Instructions
Testing Instructions for Keyboard
N/A
Screenshots or screencast
widgets-top-toolbar-collapse.mp4