[wp-trac] [WordPress Trac] #64806: Navigation link: add support to style current menu item via theme.json

[WordPress Trac]

#64806: Navigation link: add support to style current menu item via theme.json
-------------------------+------------------------------
 Reporter:  onemaggie    |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  General      |     Version:
 Severity:  normal       |  Resolution:
 Keywords:               |     Focuses:
-------------------------+------------------------------
Changes (by onemaggie):

 * keywords:  has-patch has-unit-tests =>


Old description:



New description:

 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.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64806#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform