Twenty Twenty-Five: Fix navigation contrast in header inside full-width background image pattern#11953
Twenty Twenty-Five: Fix navigation contrast in header inside full-width background image pattern#11953itzmekhokan wants to merge 1 commit into
Conversation
…th background image pattern. Give the navigation block its own overlay colors so submenus and the mobile menu overlay remain readable when used on a dark background with light text. Fixes #65323.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Summary
header-inside-full-width-background-imagepattern to Twenty Twenty-Five.overlayBackgroundColor: base,overlayTextColor: contrast) so submenus and the mobile menu overlay remain readable when the main navigation uses white text on a dark background.Problem
The Pattern Directory version sets
textColor: whiteon the navigation block but does not set overlay colors. Core navigation CSS gives submenus a white background while text inherits white from the parent, producing invisible submenu items and an invisible mobile overlay.Solution
Per core committer feedback, the navigation block needs its own coloring via block attributes — matching other Twenty Twenty-Five header patterns. No theme CSS overrides are needed; core navigation handles overlay/submenu colors when these attributes are present.
Trac ticket: https://core.trac.wordpress.org/ticket/65323