Button element settings in theme.json breaks the Fill/Outline button functionality

[matiasbenedetto]

Description

If you set border settings for the button element, the Fill/Outline functionality works not consistently.

Step-by-step reproduction instructions

1. Activate emptytheme to discard theme interferences
2. Add this snippet to theme.json

{
	"styles": {
		"elements": {
			"button": {
				"border": {
					"color": "red",
					"style": "solid",
					"width": "10px"
				},
				"color": {
					"background": "orange",
					"text": "blue"
				}
			}
		}
	}	
}

3. Add a button element
4. Try to set outline style and change the button colors as in the video

Screenshots, screen recording, code snippet

button3.mp4

Environment info

• Wordpress 6.0
• Gutenberg 13.5.1WordPress

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

[MaggieCabrera]

After looking into this, I think part of the solution requires that we express block styles variations differently.

[bradhogan]

Not sure if this is related or not but the latest version of WP and/or Gutenberg prevents the outline button from displaying the border only in Gutenberg. The front-end works ok. Here's a quick video demoing the issue. Notice there is no border when viewing the button in Gutenberg. This demo uses only default Twenty Twenty Two and Gutenberg.

https://soapbox.wistia.com/videos/058cz5NVAZ

[eric-michel]

A related problem: defining blocks.core/button.spading.padding breaks the equalizing padding provided to regular buttons to keep them the same size as outlined buttons.

With no customization:

Padding for the outlined buttons is: .667em 1.333em;
Padding for the regular buttons is: calc(0.667em + 2px) calc(1.333em + 2px);, which adds 2px of padding on all sizes to equalize the 2px border on the the outlined button

With the spacing customization in theme.json of:

"spacing": {
	"padding": {
		"top": "0.5rem;",
		"right": "1rem",
		"bottom": "0.5rem",
		"left": "1rem"
	}
}

The new padding of:

padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;

overrides both the outline and regular button padding options, resulting in uneven button heights.