Submenu font-size theme.json variable incorrectly affects parent menu-item

[Humanify-nl]

Description

When we set the font size on a submenu in theme.json, the top level navigation item is wrongfully scaled to this value.

"core/navigation-submenu": {
  "typography": {
    "fontSize": "var(--font-size--small)"
  }
}

How to solve:

CSS:
The font-size is currently set on this selector: .wp-block-navigation-submenu

It should instead be on: wp-block-navigation__submenu-container

Current fix:
.wp-block-navigation-submenu { font-size: inherit; }

Step-by-step reproduction instructions

1. Go to theme.json
2. Under styles { block }, and set a font-size for core/navigation-submenu that differs from the top level menu
3. See the font-size change in the submenu, and its parent anchor.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 5.9.1
• Gutenberg 12.7.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jasmussen]

Thanks for the ticket. Would you be up for making a pull request to add the font size inheritance (which seems like the right approach)? I'd be happy to review and help it land!

[Humanify-nl]

Gladly! That will be a first for me! I'm proud to be contributing even if its a super small change.

Here is the pull request: 39277

[jasmussen]

That's great, thanks so much! Although it's a small PR, I want to make sure that I test it properly, so this just a note that I'll give this a shot hopefully later today, otherwise tomorrow morning. It's an ideal 1-line PR so if all works well it should sail through 🚢

[Humanify-nl]

Excellent. Thank you!

[kathrynwp]

Heya @jasmussen Looks like there was some discussion on the related PR, but it isn't ready to merge. Any chance of moving it forward, assuming the issue is still valid? Thanks!

[jasmussen]

The PR had some solid approaches, but I recall it surfaced some unforseen challenges. I think it's best to ask on the PR itself, to see if some of the other reviewers had thoughts on how it should land.