Fix transparent navigation block submenus #28904
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] Regression
talldan
changed the title
|
Size Change: +72 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Fixes the submenu background issue ✅
But I'm puzzled about the need for the stretch align, and also finding some weirdness with the behaviour of the inserter (might be unrelated to this change, but thought I'd mention it):
inserter-jump.mov
Also note the second inserter that flashes on and off in there:
I can reproduce this on Chrome, Firefox and Safari, plus on Safari extra weirdness ensues on hover as an autosave warning flashes on and off too 😅
|
|
||
| .wp-block-navigation .wp-block-navigation__container { | ||
| .wp-block-navigation__container { | ||
| align-items: stretch; |
There was a problem hiding this comment.
I don't think this'll have any effect as the element isn't set to flex or grid display.
There was a problem hiding this comment.
This was needed to override this rule that was added in #28836 on navigation containers:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/navigation/style.scss#L3
It does seem to be a flex container:
I've switched it to use normal. I did also consider unset. Not really sure what is best.
Yes! I was trying to work out how to reproduce this. It does happen in It looks like you have to select a block in a submenu, click somewhere else like the sidebar (somewhere that doesn't deselect the block completely), and then hover over the appender. In |
This one's a known issue (#28418 (comment)), but I don't think it has been ticketed. I'll make a couple of issues for those two discovered problems. edit:
|
|
Sorry about causing this, and thank you for fixing it. I'll take a look at the followups in a moment. I have a fix for the jumping appender. I can either submit that as a separate PR and approve this one with the jittering in place, or I can push a fix here. It's this: in the navigation link editor.scss, instead of this: This will work: Let me know which you prefer. |
|
@jasmussen Pushing that fix would be great, would be happy for it all to be addressed at once. |
jasmussen
approved these changes
Feb 10, 2021
There was a problem hiding this comment.
Thank you for fixing the regression I caused.
A few things were at play:
- CSS to make the social links block when inside navigation play better was the lead cause of the background color disappearing. I'll be more mindful in the future, thank you for the added comment.
- A refactor of the generic block appender caused the jittering effect. The goal of the refactor was to need less per-block customized CSS to make it work, and to fix an issue in Firefox where focus lands on the list item instead of the button inside. I will look at a separate followup to make this more resilient.
In the mean time, this is a good and basic fix that addresses the issue for me:
talldan
commented
Feb 10, 2021
| @@ -28,6 +28,7 @@ | |||
| margin: $grid-unit-10 * 2; | |||
| margin-left: $grid-unit-10 * 1.25; | |||
| margin-top: $grid-unit-10 * 1.25; | |||
| margin-right: auto; | |||
There was a problem hiding this comment.
Cool, I tested and that fixes it. Nice one 🎉
|
Thank you Dan, pushed a small fix and approved. Because I also pushed the fix, I'd welcome other sanity checks, but it should be a solid and basic fix. |
6 tasks
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
Fixes #28906
Fixes some issues with navigation block styles:
.wp-block-navigation__container.normal.I haven't gone into the realm of fixing issues with background colors, there's a separate PR #28868.
How has this been tested?
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: