![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 4 months ago
Closed 9 days ago
#64806 closed enhancement (fixed)
Navigation link: add support to style current menu item via theme.json
| Reported by: | onemaggie | Owned by: | isabel_brison |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Editor | Version: | |
| Severity: | normal | Keywords: | gutenberg-merge has-patch |
| Cc: | Focuses: |
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 (5)
This ticket was mentioned in PR #11174 on WordPress/wordpress-develop by @onemaggie.
4 months ago
#1
- Keywords has-patch has-unit-tests added
#3
@
3 weeks ago
- Component General → Editor
- Keywords gutenberg-merge has-patch added
- Milestone Awaiting Review → 7.1
This ticket appears to be targeting 7.1, so I will update the milestone.
@onemaggie commented on PR #11174:
2 weeks ago
#4
I updated this PR with the changes discussed plus rebased it and made it sure it was up to date with what is in Gutenberg right now. It should be ready for review
Trac ticket:
https://core.trac.wordpress.org/ticket/64806