core/navigation-submenu: Cannot style button element via theme.json

[EldarAgalarov]

Description

The button element styling via theme.json is ignored for the core/navigation-submenu block:

"core/navigation-submenu": {
	"elements": {
		"button": {
			"border": {
				"radius": "5px"
			},
			"color": {
				"background": "red"
			},
			"spacing": {
				"padding": {
					"top": "20px",
					"right": "20px",
					"bottom": "20px",
					"left": "20px"
				}
			}
		}
	}
}

Step-by-step reproduction instructions

1. Take Navigation block;
2. Enable "Open on click" toggle so that the link turns into a button;
3. Try to style this button via theme.json code above. You must see that button style is not applicable.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.8b1

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mayank-Tripathi32]

@EldarAgalarov Thank you for reporting the issue, I can confirm that styles from core/navigation-submenu block elements are not applied. I will investigate to see if this is a possible regression.

[carolinan]

Hi
The styles in theme.json elements > button only applies to HTML elements with the wp-element-button or wp-block-button__link classes:
https://github.com/WordPress/gutenberg/blob/trunk/packages/blocks/src/api/constants.js#L274

That it is not used on the arrow toggle button is intentional.
If you are adding some other type of <button>, you could manually add the class name, but the style would only be loaded if there was another block with this style present on the page.
If you absolutely must use this method to change the style of the button you could try to use the render block filter and add the class that way.

If the submenu block was updated to add the class to the button, it would use the styles from styles > elements > button,
not only styles > blocks > block name > elements > button. And in most cases this is not desirable. It would update the design of this block on live sites, and it would be an unexpected change for users.

I am not dismissing the use case of wanting to style the button; but I don't think it is is a bug.