Opened 11 months ago
Last modified 10 months ago
#63921 new defect (bug)
Twenty Fifteen: Navigation Block Submenu Color Settings
| Reported by: | viralsampat | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Bundled Theme | Version: | 6.2 |
| Severity: | normal | Keywords: | needs-patch |
| Cc: | Focuses: | css |
Description
Hello Team,
I have reviewed the Navigation block in the Twenty Fifteen theme and noticed an issue:
When we try to set the submenu font color and background color using Block Settings, the changes are applied only in the block editor (admin), but not on the front-end.
It seems this could be resolved by ensuring the chosen font color and background color styles are also rendered on the front-end for layout consistency.
For better understanding, I have attached a video demonstrating the issue.
Thanks,
Attachments (1)
Change History (2)
#1
@
10 months ago
- Focuses ui removed
- Keywords needs-testing 2nd-opinion dev-feedback removed
- Summary Issue with Submenu Color Settings in Navigation Block – Twenty Fifteen Theme → Twenty Fifteen: Navigation Block Submenu Color Settings
- Version → 6.2
WordPress 6.2 moved the color classes from the li elements to the submenu ul (GB48219).
The fallback colors have three classes for their selectors.
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
background-color:#fff;
border:1px solid #00000026;
}
.wp-block-navigation.has-background .wp-block-navigation__submenu-container{
background-color:inherit;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{
color:#000;
}
Twenty Fifteen's color classes only use one class in the selector, such as .has-dark-gray-color.
The theme theoretically could increase all of them to something like :root .has-dark-gray-color[class] or :root .has-dark-gray-color.has-dark-gray-color, but then other themes would need to increase specificity to three classes too.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Issue video: