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

Outline button does not take on the theme.json styles of the filled button #47260

Open
CGTS opened this issue Jan 18, 2023 · 1 comment
Open
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@CGTS
Copy link

CGTS commented Jan 18, 2023

Description

I've set my default styles for the button element in my theme.json file. The filled version of the button takes on all the styles as written. However, the outlined version does not take on the border color or the padding.

Is this working as intended? If so how do we style the outlined version of the button?

Step-by-step reproduction instructions

Create styles for the button element through theme.json

"elements": {
	"button": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--md)",
			"lineHeight": "1.5",
			"fontWeight": "400"
		},
		"color": {
			"background": "var(--wp--preset--color--orange)",
			"text": "var(--wp--preset--color--white)"
		},
		"border": {
			"radius": ".75rem",
			"width": "2px",
			"style": "solid",
			"color": "var(--wp--preset--color--orange)"
		},
		"spacing": {
			"padding": {
				"top": ".75rem",
				"right": "1.5rem",
				"bottom": ".75rem",
				"left": "1.5rem"
			}
		},
		":hover": {
			"color": {
				"background": "var(--wp--preset--color--neutral-darkest)",
				"text": "var(--wp--preset--color--white)"
			},
			"border": {
				"color": "var(--wp--preset--color--neutral-darkest)"
			}
		}
	}
}

Inspect element in browser. Outline button does not take on the padding or border styles from the filled button.

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress: 6.1.1
Gutenberg: 15.0.0
Theme: Twenty twenty-three
OS: Windows 11

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

@kathrynwp kathrynwp added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement. labels Jan 19, 2023
@philhoyt
Copy link

Having a similar issue, I can not find any example of "targeting" a block style within the theme json. Seems like room for improvement to register and target block styles within theme json.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants