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.

Sign up for GitHub

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 transparent navigation block submenus #28904

Merged
merged 5 commits into from
Feb 10, 2021
Merged

Fix transparent navigation block submenus #28904

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fedac6c
Fix submenu backgrounds
talldan Feb 10, 2021
de19616
Ensure submenus are the same width regardless of bg color, and align …
talldan Feb 10, 2021
4751396
Switch to stretch as items should be full-width of the container
talldan Feb 10, 2021
3f08bae
Use align-items normal
talldan Feb 10, 2021
18b55b3
Fix issue with glitching appender.
jasmussen Feb 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
// Default background and font color
.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
.wp-block-navigation__container {
// Set a background color for submenus so that they're not transparent.
// NOTE TO DEVS - if refactoring this code, please double-check that
// submenus have a default background color, this feature has regressed
// several times, so care needs to be taken.
background-color: $white;
color: $gray-900;
}
}

.wp-block-navigation .wp-block-navigation__container {
.wp-block-navigation__container {
align-items: stretch;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this'll have any effect as the element isn't set to flex or grid display.

Copy link
Contributor Author

@talldan talldan Feb 10, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Screenshot 2021-02-10 at 3 51 48 pm

I've switched it to use normal. I did also consider unset. Not really sure what is best.

min-width: 200px;
}
}

.wp-block-navigation__container {
// Vertically align child blocks, like Social Links or Search.
align-items: center;

// Default background and font color
&:not(.has-background) .wp-block-navigation__container {
.wp-block-navigation__container {
color: $gray-900;
background-color: $white;
min-width: 200px;
}
}
}

.items-justified-center > ul {
Expand Down