Nav submenu: add support to style current submenu in theme.json

[MaggieCabrera]

What?

Follow up to #75736

Following the discussion on the other PR, we are adding support for current state to the submenu block too

Why?

For consistency and to allow users more nunaced control over how they style their navigation blocks.

How?

We are adding support the same we did for the nav link, by adding it to the allowed blocks constant, adding a selector on block.json and modifying the schema andadding tests.

Testing Instructions

Add this to your theme.json, before this PR only the nav-link applied, now we can target submenus specifically.

"core/navigation-link": {
    "-current": { "color": { "text": "pink" } }
},
"core/navigation-submenu": {
    "-current": { "color": { "text": "green" } }
},

Screenshots or screencast

Before	After

[github-actions]

Flaky tests detected in d352ea8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29909695663
📝 Reported issues:

• [Flaky Test] As a user I want to be able to customize the navigation overlay with styled content #80235 in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: luminuu <luminuu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[MaggieCabrera]

I'm updating the same core backport instead of making a new one, since it's built on top of it directly and it hasn't been merged yet

[scruffian]

I'm a bit hesitant about this one. I think we should be moving in the direction of making navigation link and navigation submenu blocks simply variations of the same block. This will make that harder to do and moves us away from that direction. If this is a feature that we think themes will use then i might be a good compromise, however I'm struggling to think of a use case for it...

[getdave]

My main question is can you target the top level menu item represented by a submenu if it is current? I'm conscious it's a different block that core/navigation-link but you'd still want to be able to style the parent.

Styling menus within the submenu dropdown seems like a real edge case. Not sure if this is required but I'd defer to your theme expertise on that.

[MaggieCabrera]

My main question is can you target the top level menu item represented by a submenu if it is current? I'm conscious it's a different block that core/navigation-link but you'd still want to be able to style the parent.

Styling menus within the submenu dropdown seems like a real edge case. Not sure if this is required but I'd defer to your theme expertise on that.

I've never personally needed to. That said, I don't think this PR is a must, but it certainly offers more flexibility at very little cost. I would love to hear what @WordPress/block-themers have to say about this.

[scruffian]

My main question is can you target the top level menu item represented by a submenu if it is current? I'm conscious it's a different block that core/navigation-link but you'd still want to be able to style the parent.

Yes, the navigation-link selector also covers navigation-submenu links so it works in trunk already.

[t-hamano]

I would like to check the status of this PR. Does this PR need to be shipped for 7.1?

It appears that this PR is not included in the core backport that has already been committed. Therefore, if we are to move forward with this PR, we will need to create a new core backport anyway.

[MaggieCabrera]

I would like to check the status of this PR. Does this PR need to be shipped for 7.1?

It appears that this PR is not included in the core backport that has already been committed. Therefore, if we are to move forward with this PR, we will need to create a new core backport anyway.

I think we can remove it from 7.1, it's not clear that we even need/want it

[jasmussen]

7.2 or when it happens is fine. But wanted to comment on this:

it's not clear that we even need/want it

In case you're referring to the ability to style the current_menu_item visually in global styles, I personally really really want it ❤️ 🤞.

Then I could delete the following from my stylesheet:

.current-menu-item a {
	text-decoration: underline;
}

[luminuu]

+1 for bringing this in, I've got this request multiple times in the past. It's just a small enhancement but I think it has a much bigger impact.

[getdave]

I'm a bit hesitant about this one. I think we should be moving in the direction of making navigation link and navigation submenu blocks simply variations of the same block. This will make that harder to do and moves us away from that direction.

I agree that it could make things harder. The otherside of the coin is that this is a feature that users/theme authors need now. Delaying it based on a hypothetical merging of the two blocks wouldn't feel right given the only opposition is a technical one. Let's deliver user value now.

I would prefer that we consider and design a migration path that allows any styles defined against Submenu to be migrated in the scenario that the Submenu block is normalized with the standard Nav Link block.

@MaggieCabrera do you think that is possible? Can you outline a potential migration route?

...however I'm struggling to think of a use case for it...

It seems a few folk think this is warranted. As the Submenu block can be a top level link item in it's own right I think it's important that we can achieve consistent styling whether the block is a standard link or a submenu.

Update: I realised that Submenu "current" styling is already handled. This PR is for the children of the submenu blocks.

---

I think we should bring this in.

[getdave]

@MaggieCabrera I rebased and updated to match the new syntax for "currrent".