Custom states for blocks - iteration for WP 7.2

[MaggieCabrera]

Overall Goal

Let users style the active item in interactive blocks—for example, the current page in Navigation or the selected tab in Tabs—without writing custom CSS or editing theme.json by hand.

This builds on the existing style-state work:

• Pseudo states, such as :hover and :focus.
• Responsive states, such as tablet and mobile.
• Custom states, such as the current menu item.

Prior art: #57719.

Tasks

• Navigation Link: Add color, border, and spacing supports
  Make state styling useful beyond typography.

• Global Styles: Add pseudo-state controls for Navigation Link
  Expose hover, focus, focus-visible, and active.

• Block Style States: Add a custom-state axis to editor controls
  Support custom states alongside the existing viewport and pseudo-state axes.

• #78769 — Navigation Link: Add -current state to editor controls
  Support -current in Global Styles and individual Navigation Link blocks.

• Tabs: Add -current state to editor controls
  Style the active tab using [aria-selected="true"].

Nice to Have

• Make custom states available to third-party blocks
  Define a public registration API across PHP and JavaScript, including labels, selectors, editor controls, and theme.json handling. Document and validate selectors.states in the block.json schema as part of this work.

• #76367 — Navigation Submenu: Support independent current-item styling
  Allow links inside submenu dropdowns to be styled separately.

[luminuu]

Quick question before I open up a new issue: I noticed when testing 7.1 RC2 that in the Global Styles, I cannot set any of the pseudo states (hover, focus, etc) globally for the navigation links or the navigation block itself. Is this still something that is being worked on? I came here from the PR #75627, but that PR only seems to cover the Global Styles implementation for the button block. @MaggieCabrera @scruffian

[MaggieCabrera]

Quick question before I open up a new issue: I noticed when testing 7.1 RC2 that in the Global Styles, I cannot set any of the pseudo states (hover, focus, etc) globally for the navigation links or the navigation block itself. Is this still something that is being worked on? I came here from the PR #75627, but that PR only seems to cover the Global Styles implementation for the button block. @MaggieCabrera @scruffian

Yes, it's part of the plan. We need to also figure out the UI on how to expose hover + current for example, which is another reason why the UI for hover didn't make it for this block yet

[MaggieCabrera]

Updated this issue that got stale with the tasks for the next release

[talldan]

Quick question before I open up a new issue: I noticed when testing 7.1 RC2 that in the Global Styles, I cannot set any of the pseudo states (hover, focus, etc) globally for the navigation links or the navigation block itself.

@luminuu It should be possible to set pseudo styles for Navigation Link, but one thing to note is for some reason the block is called 'Custom Link' in global styles:

Maybe the block title should be updated:

gutenberg/packages/block-library/src/navigation-link/block.json

Lines 4 to 5 in 9fa0b67

	"name": "core/navigation-link",
	"title": "Custom Link",

[luminuu]

@talldan Yes +1 for this, because if I get confused, I'm sure more people will be. I thought it was maybe pulled from a block variation but I'm not sure how the internal handling of this works. While editing a navigation a link to a page is called Page link, a submenu is called Submenu and a Custom Link is what it is. But these do not seem to be reflected in the Global Styles.

[talldan]

Yep, Page Link is indeed a block variation of the Custom Link block. Perhaps it's possible to call the main block 'Navigation link' instead and then have variations 'Page link' and 'Custom link'.

This tripped me up as well, I only recently realised what was happening in global styles 😄