Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
matiasbenedetto opened this issue Jun 29, 2022 · 5 comments · Fixed by #42053
Closed
Assignees
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Bug An existing feature does not function as intended

Comments

@matiasbenedetto
Copy link
Contributor

matiasbenedetto commented Jun 29, 2022

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

image

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

@matiasbenedetto matiasbenedetto added [Type] Bug An existing feature does not function as intended [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Jun 29, 2022
@matiasbenedetto matiasbenedetto self-assigned this Jun 29, 2022
@scruffian
Copy link
Contributor

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
Copy link
Contributor Author

matiasbenedetto commented Jun 29, 2022

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"
				},
	...

image

@scruffian
Copy link
Contributor

scruffian commented Jun 29, 2022

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
Copy link
Contributor Author

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

@scruffian
Copy link
Contributor

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!

@matiasbenedetto matiasbenedetto changed the title Post comment form block styles are overriding core/button theme.json styles Post comment form block styles are overriding button elements theme.json styles Jul 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Bug An existing feature does not function as intended
Projects
None yet
2 participants