Opened 4 years ago
Last modified 4 months ago
#53161 new defect (bug)
Twenty Twenty-One: Navigation block has a permanent theme-imposed background color
Reported by: | kjellr | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.7.1 |
Component: | Bundled Theme | Keywords: | needs-patch |
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:
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.
Attachments (1)
Change History (7)
#2
@
22 months ago
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
#3
@
22 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
@
22 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
@
22 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.
#6
@
4 months ago
- Keywords needs-patch added
This is still if I am correct an issue in the latest version. I would expect changing custom colors to work and they don't. Whilst this is a little tricky because the theme has been released for a while, I think it is expected to be working. As a result my recommendation would be to have a patch for this.
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.