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

Try: Provide a baseline submenu background color. #30831

Closed
wants to merge 1 commit into from
Closed

Try: Provide a baseline submenu background color. #30831

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions packages/block-library/src/navigation-link/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,10 @@
}

// Default background and font color.
// This includes blocks that have a background color,
// as you might switch themes and the color specified is no longer registered.
// But when one is explicitly chosen after the fact, it will override these rules.
.wp-block-navigation.has-background,
Copy link
Member

Choose a reason for hiding this comment

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

Right. Weird situation. The fact that we attach presets as classes make switching themes fragile. I hope this can be lessened by having "core" colors #29568 but still there will be situations in which there may be preset theme colors.

I wonder if 29568 is a good opportunity to revisit how we do colors and whether presets can be inline colors (so we fix the theme switching issue).

.wp-block-navigation:not(.has-background) {
.submenu-container, // This target items created by the Page List block.
.wp-block-navigation__container .wp-block-navigation-link__container {
Expand All @@ -214,6 +218,13 @@
// several times, so care needs to be taken.
background-color: #fff;
color: #000;
}
}

// Paint a border only when we know for sure that the block doesn't have a working background color.
.wp-block-navigation:not(.has-background) {
.submenu-container,
.wp-block-navigation__container .wp-block-navigation-link__container {
border: 1px solid rgba(0, 0, 0, 0.15);

.submenu-container,
Expand Down