Restore the missing background color on nested submenus#22228
Conversation
|
Size Change: +497 B (0%) Total Size: 824 kB
ℹ️ View Unchanged
|
tellthemachines
left a comment
There was a problem hiding this comment.
Is there a reason to apply the default background only to submenus? There can't be many cases where we'd want a dropdown to have a different background colour from the main nav.
I understand that currently we're not able to set the block background to match the theme's background (if it has one), but with the global styles work underway that will soon be possible! 🎉 At that point we'll likely want to keep the white as a fallback and set the theme background with a custom property. And, to be theme friendly - because these styles apply to the front end as well as the editor - we should keep selector specificity as low as possible.
With that in mind, I'd suggest the changeset for this PR could be as small as simply adding .wp-block-navigation:not(.has-background) .wp-block-navigation__container, on line 135 plus the change on lines 24-27 🙂
| .wp-block-navigation-link, | ||
| .is-style-light .wp-block-navigation-link { | ||
| .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link, | ||
| .wp-block-navigation.is-style-light .wp-block-navigation__container .wp-block-navigation-link { |
There was a problem hiding this comment.
is-style-light and is-style-dark need to apply to the whole navigation, not only to the submenus.
|
@tellthemachines here's some more context behind the transparent top-level background: #22167 (comment) |
|
My bad for including both changes in a single PR :-) I'm going to restore the top-level navigation background color and merge the sub-navigation change only. Let's keep discussing the top-level background separately. |
| .is-style-light .wp-block-navigation-link { | ||
| &:not(.has-text-color) .wp-block-navigation-link__content { | ||
| .wp-block-navigation, | ||
| .wp-block-navigation.is-style-light { |
There was a problem hiding this comment.
Is the specificity increase from adding .wp-block-navigation here necessary?
There was a problem hiding this comment.
I wanted to avoid .is-style-light interfering with non-navigation blocks with the same class name should they decide to implement light/dark style variations. In case of former line 126 an interference would occur if the navigation block with the default style (no class) was nested in some other block with light style applied.
Description
This PR ensures nested submenus have a background right after they're added (when the
is-style-lightcss class is missing).Screenshots
Before
After
Checklist: