Comments form submit button styles overrides shadows from theme.json

[carolinan]

Description

The submit button in the comments form block has CSS that overrides box-shadow set in theme.json styles.elements.button.shadow. The shadow from theme.json is not visible, making it inconsistent with other buttons.

.wp-block-post-comments-form input[type=submit] {
    box-shadow: none;
    ...
}
:root :where(.wp-element-button, .wp-block-button__link) {
    box-shadow: var(--wp--preset--shadow--extra-small);
}

Source: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/post-comments-form/style.scss#L42

Step-by-step reproduction instructions

Add a shadow to styles.elements.button.shadow.
Add a comments form block, and confirm if the shadow is applied to the submit button.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[aaronrobertshaw]

I can replicate this issue.

Similar to #63769, the problematic style here pre-dates both the ability to style button elements and the addition of shadow support to theme.json.

• Style was added in: Adds in basic styling for post comment form #35704
• Button element styling added in: Add support for button elements to theme.json #40260
• Shadow support added in: Add box shadow support to blocks (using code editor for now). #46896

I'll sort out a fix for this alongside #63769 shortly.

[aaronrobertshaw]

The other post comments form block styles look okay to me. I've put up a fix for this in #63790.