Make WordPress Core

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: onemaggie's profile onemaggie Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords:
Focuses: Cc:

Description (last modified by onemaggie)

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

#2 @onemaggie
6 weeks ago

  • Description modified (diff)
  • Keywords has-patch has-unit-tests removed
Note: See TracTickets for help on using tickets.