Make WordPress Core

Opened 3 years ago

Last modified 16 months ago

#53161 new defect (bug)

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

Reported by: kjellr's profile kjellr Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.7.1
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

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:

https://cldup.com/fb8OTHJzQG.png

https://cldup.com/U6GLVRtEAG.png

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:

https://cldup.com/kQ8nkqUATP.png

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

Change History (5)

#1 @joyously
3 years ago

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.

#2 @poena
16 months ago

I can reproduce this in 5.9 to 6.2 alpha.

While Kjell mentioned version 5.7.1, the block is not supported in core until 5.9.

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

Last edited 16 months ago by poena (previous) (diff)

#3 @Mamaduka
16 months ago

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?

#4 @andraganescu
16 months ago

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.

#5 @poena
16 months ago

  • Milestone changed from Awaiting Review to Future Release

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.

Note: See TracTickets for help on using tickets.