Skip to content

Navigation: Add color classes to submenu #38664

@Andrew-Starr

Description

@Andrew-Starr

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions