Post comment form block styles are overriding button elements theme.json styles

[matiasbenedetto]

Description

It seems like post comment form block styles are overriding button elements theme.json.

Step-by-step reproduction instructions

• Add theme.json settings for core/button block:

	"styles": {
              "elements": {
                      "button": {
                              "border": {
	                              "color": "black",
	                              "style": "solid",
	                              "width": "1px"
                              }
              },
	...
	...

• Check the rendered post comments form and see if the styles are being overridden.

Screenshots, screen recording, code snippet

Environment info

• Latest Gutenberg trunk version
• WP 6.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

[scruffian]

I don't think the styles from core/button should be applied to this block as it's not a button block. You should try setting the styles using elements instead. I believe the issue is still there, regardless!

[matiasbenedetto]

I don't think the styles from core/button should be applied to this block as it's not a button block.

I think it makes sense to render the submit button as a core/button block. But if that's not the case, I'm curious about why the submit button has the wp-block-button and wp-block-button__link classes.

You should try setting the styles using elements instead.

I'm not sure if this is what you suggest, but, using these settings in theme.json I get this output.

	"styles": {
		"blocks": {
			"core/post-comments-form": {
				"elements": {
					"link": {
						"border": {
							"radius": "0",
							"color": "red",
							"style": "solid",
							"width": "10px"
						}
					}
				}
			},
			"core/button": {
				"border": {
					"radius": "0",
					"color": "blue",
					"style": "solid",
					"width": "5px"
				},
	...

[scruffian]

I'm curious about why the submit button has the wp-block-button and wp-block-button__link classes.

I believe this was so that it would inherit the rules of the buttons block, but it's a fragile way of doing things. Now we have button elements we should be using that mechanism to control the appearance of all buttons, like so:

"styles": {
	"elements": {
		"button": {
			"border": {
				"radius": "0",
				"color": "red",
				"style": "solid",
				"width": "10px"
			}
		}
	}
}

[matiasbenedetto]

Thanks for the context. Using your latest snippet, the styles are still overridden by the core/post-comments-form styles.

[scruffian]

Thanks for the context. Using your latest snippet, the styles are still overridden by the core/post-comments-form styles.

Yeah that makes sense, but now at least we're on the same page about how it should work!