Opened 6 weeks ago
Last modified 6 weeks ago
#64806 new enhancement
Navigation link: add support to style current menu item via theme.json
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | General | Keywords: | |
| Focuses: | Cc: |
Description (last modified by )
Adds theme.json support for styling the current navigation item (@current) and its interactive states in the core/navigation-link block.
Theme authors need a way to style the active/current menu item differently from the rest of the navigation, including controlling its hover, focus, and active states.
No UI changes are included; this is theme.json only.
A new VALID_BLOCK_CUSTOM_STATES constant whitelists @-prefixed states per block in theme.json, playing the same role that VALID_BLOCK_PSEUDO_SELECTORS plays for CSS pseudo-selectors — the @ prefix distinguishes these class-based states from real CSS pseudo-selectors.
Each block declares its state CSS selectors in block.json under selectors.states, following the existing Selectors API pattern, which get_blocks_metadata() reads into block metadata and get_block_nodes() uses to generate CSS.
Blocks listed in VALID_BLOCK_CUSTOM_STATES also inherit their VALID_BLOCK_PSEUDO_SELECTORS as valid sub-states, producing compound selectors like .wp-block-navigation-item.current-menu-item:hover.
Testing Instructions
Add the following snippets to your theme.json under styles.blocks and verify the correct CSS is generated on the frontend:
Current item base styles:
"core/navigation-link": {
"@current": {
"color": { "text": "#ff0000" }
}
}
Current item hover:
"core/navigation-link": {
"@current": {
":hover": {
"color": { "text": "#0000ff" }
}
}
}
Current item focus:
"core/navigation-link": {
"@current": {
":focus": {
"color": { "text": "#00aa00" }
}
}
}
All combined:
"core/navigation-link": {
"@current": {
"color": { "text": "#ff0000" },
"typography": { "fontWeight": "700" },
":hover": {
"color": { "text": "#0000ff" }
},
":focus": {
"color": { "text": "#00aa00" }
},
":active": {
"color": { "text": "#ff6600" }
}
}
}
Test for both items with submenus and without. Try other styles that aren't just the text color.
Change History (2)
This ticket was mentioned in PR #11174 on WordPress/wordpress-develop by @onemaggie.
6 weeks ago
#1
- Keywords has-patch has-unit-tests added
Trac ticket:
https://core.trac.wordpress.org/ticket/64806