-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Description
In the navigation block when changing the text color or background color of the submenu, the color classes are missing from the submenu in the front end. Instead the classes are added to each individual item within the submenu.
One of the issues with this approach is that by default the submenu container (if no added background color on the top level nav block) has a white background, black text, and a border:
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
color: #000;
}
The border is not applied only when adding a background color to the top level navigation block. The border is not removed as expected when adding a background color to only the submenu.
So, for example a theme or designer cannot remove the border by doing something like the following because the submenu is not rendered with additional classes such as has-background or has-text-color
.wp-block-navigation__submenu-container.has-background {
border: none;
}
Instead the color classes are added to each individual li item within the submenu like so:
<ul class="wp-block-navigation__submenu-container">
<li class="has-text-color has-white-color has-background has-black-background-color wp-block-navigation-item wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Two A</span></a>
</li>
<li class="has-text-color has-white-color has-background has-black-background-color wp-block-navigation-item wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Two B</span></a>
</li>
<li class="has-text-color has-white-color has-background has-black-background-color wp-block-navigation-item wp-block-navigation-link">
<a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Two C</span></a>
</li>
</ul>
I don't understand if this a bug or intentional. If this is intentional, could it please be reconsidered?
Step-by-step reproduction instructions
Add a Navigation block.
Add a least one top level menu item, and at least one submenu item.
In the block sidebar, change the 'Submenu & overlay text' color and the 'Submenu & overlay background' color.
View the rendered markup on the front end.
Screenshots, screen recording, code snippet
No response
Environment info
WP 5.9
Issue present with or without Gutenberg active.
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes