Repository navigation
Custom states for blocks - iteration for WP 7.2 #79283
Description
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
:hoverand: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. Color is in #83454 and #83457. Border and spacing are still to do. -
#83451 — Global Styles: Add pseudo-state controls for Navigation Link
Expose hover, focus, focus-visible, and active. -
#82375 — Navigation Link: Show the block's real name in Global Styles
Global Styles listed it as "Custom Link". -
#78769 — 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
-currentstate to editor controls
Support-currentin Global Styles and individual Navigation Link blocks. -
Tabs: Add
-currentstate 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 validateselectors.statesin 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.
Activity
luminuu commentedon Aug 12, 2026
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 commentedon Aug 12, 2026
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 commentedon Aug 12, 2026
Updated this issue that got stale with the tasks for the next release
talldan commentedon Aug 13, 2026
@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
luminuu commentedon Aug 20, 2026
@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 commentedon Aug 24, 2026
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 😄
t-hamano commentedon Sep 9, 2026
As a suggestion, I would like to propose adding hover support to the Navigation Overlay Button block. See #82671 (comment) for more details. cc @elphizu
mikachan commentedon Sep 25, 2026
I have capacity to help out here, so I've opened a PR for the "Global Styles: Add pseudo-state controls for Navigation Link" task at #83451.
And started work on "Navigation Link: Add color, border, and spacing supports" in #83454 and #83457.
annezazu commentedon Oct 12, 2026
@MaggieCabrera can you post an update for this iteration issue as well to get a sense of where the work stands and what’s likely to make it for 7.2?
MaggieCabrera commentedon Oct 14, 2026
7.2 update
Navigation Link now has hover, focus and active styles in Global Styles (#83451, thanks @mikachan), and it shows its real name there instead of "Custom Link" (#82375, thanks @talldan).
These are aiming for Beta 1 on October 20 and are good to have. If you're reviewing, the form elements PRs in #34198 come first.
Moving to 7.3: border and spacing for Navigation Link, the current tab for Tabs, custom states for third-party blocks, and hover for the Navigation Overlay button that @t-hamano suggested.