Twenty Twenty-One: Navigation block has a permanent theme-imposed background color

[kjellr]

Twenty Twenty-One provides a default background color to the navigation block. If the block appears inside of a differently-colored container block, this looks incorrect:

If a user attempts to modify this color via the Navigation block controls, only the menu item backgrounds are updated. The theme-provided background persists:

The theme should leave this block transparent by default, so that it will work on a variety of different backgrounds.

[joyously]

This is a common problem with menus. It needs to use a CSS Custom property, so it can be consistent in the menu, yet still have a background color for the dropdowns if there are any.
Using transparent doesn't work well for dropdowns.
And yet, the text color needs to go with the chosen background color.

[poena]

I can reproduce this in 5.9 to 6.2 alpha.

The bug is worst in 5.9, theme versions 1.5 to 1.7.
The block's background color setting makes the block look differently in the editor and front.
In the editor, the background color setting of the block only fills the background color of the navigation items. While on the front it fills the entire navigation.

---

For installs where the background color has only affected the navigation item links and buttons,
changing it so that the background color is covering the entire navigation is a big visual change.
However, we can consider that the theme is not a block theme, which means that these color changes are not affecting the main navigation areas that are part of the theme code. I think that reduces the impact.

---

There is no way for the effected website owners to add background colors only to the navigation items. If the navigation items did have individual color settings, it would have been possible to restore the design.

The post link inner block has a typography option, but the submenu and page list blocks do not have any styling options.
Could we consider adding color options to these blocks in 6.2, and at the same time remove this faulty CSS from the theme?

@mamaduka @ntsekouras @joen

[Mamaduka]

The post link inner block has a typography option, but the submenu and page list blocks do not have any styling options.

Could we consider adding color options to these blocks in 6.2, and at the same time remove this faulty CSS from the theme?

@andraganescu, @scruffian, is there a plan to add styling support for these blocks?

[andraganescu]

Yes, the navigation block should remove the custom implementation of color and opt in to global styles for color with block supports. Not sure if there are blockers for that in terms of how to apply parent to child enforcing of styles, as one would not want to have to set each submenu or top level link individually.

[poena]

If I remember correctly work on removing the custom implementation has already started, but is not part of the 6.2 planning, let's keep this at future release.