Skip to content

Global Styles: Elements: Link style rules are being applied to buttons #42055

@scruffian

Description

@scruffian

Description

Link rules that are set via theme.json also bleed into button elements on the front end of the site. To overcome this I think we might need to add :not(.wp-element-button) to the link element selector.

Step-by-step reproduction instructions

  1. Switch to emtpytheme
  2. Add this to your theme.json file under elements
			"link": {
				"border": {
					"color": "grey",
					"radius": "1px",
					"width": "5px",
					"style": "solid"
				},
				"color": {
					"background": "lightblue",
					"text": "red"
				},
				"spacing": {
					"padding": "10px"
				},
				"typography": {
					"fontFamily": "sans-serif",
					"fontSize": "20px",
					"textDecoration": "none"
				},
				":hover": {
					"border": {
						"color": "black",
						"radius": "10px",
						"width": "5px",
						"style": "solid"
					},
					"color": {
						"background": "red",
						"text": "black"
					}
				}
			}
  1. Add some buttons blocks
  2. Switch to the front of your site.
  3. Notice that some of the link and hover rules are applying to buttons as well as to links

Screenshots, screen recording, code snippet

Screenshot 2022-06-29 at 16 54 24

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

Metadata

Metadata

Assignees

Labels

CSS StylingRelated to editor and front end styles, CSS-specific issues.Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] ButtonsAffects the Buttons Block[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions