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.

Sign up for GitHub

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

Jump to bottom

a:not(.wp-element-button) CSS rule conflicts with theme styles #42616

Closed
ZebulanStanphill opened this issue Jul 22, 2022 · 10 comments
Closed

a:not(.wp-element-button) CSS rule conflicts with theme styles #42616

ZebulanStanphill opened this issue Jul 22, 2022 · 10 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Regression Related to a regression in the latest release

Comments

@ZebulanStanphill
Copy link
Member

Description

Gutenberg is currently outputting the following style rule for themes with a theme.json file:

a:not(.wp-element-button) {
	text-decoration: underline;
}

Prior to #42072 (which landed in Gutenberg 13.7.0), this rule only used a simple a selector. But now that it has higher specificity, I've found it overriding various styles in the theme I'm using (namely, a child theme of Divi... the issue would also happen with base Divi if it had a theme.json).

What is the purpose of this style to begin with? Links already use underlines by default in every browser that I know of. The rule seems redundant.

Step-by-step reproduction instructions

  1. Use a theme with a theme.json.
  2. Place a link somewhere in a post and save.
  3. Open the post.
  4. Use your browser's Inspect Element tool to view all the styles being applied to the link.
  5. Notice the a:not(.wp-element-button) styles.

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 6.0.1
  • Gutenberg 13.7.1

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
@ZebulanStanphill ZebulanStanphill added [Type] Regression Related to a regression in the latest release [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jul 22, 2022
@getdave
Copy link
Contributor

getdave commented Jul 22, 2022

cc @scruffian this looks to be a problem

@ndiego
Copy link
Member

ndiego commented Jul 22, 2022

I can confirm this is causing issues in Twenty Twenty-Two as well.

@bgardner
Copy link

Yes, I will echo the above. I had to implement the following in Frost, which doesn’t seem optimal:

a,
a:not(.wp-element-button),
a:focus,
a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

@scruffian scruffian mentioned this issue Jul 25, 2022
Merged
@scruffian
Copy link
Contributor

I have a proposal for a fix here: https://github.com/WordPress/gutenberg/pull/42669/files

@scruffian
Copy link
Contributor

scruffian commented Jul 27, 2022 •
edited
Loading

Should be fixed by #42669

@luminuu luminuu mentioned this issue Oct 21, 2022
Open
@addedlovely
Copy link

addedlovely commented Jan 6, 2023 •
edited
Loading

Can still replicate this in WordPress Version 6.1.1.

Has the fixed been released?

Was also expecting that defining "textDecoration": false in the theme.json would have removed the CSS rule.

			"a" : {
				"typography": {
					  "textDecoration": false
				}
			},

@addedlovely
Copy link

Just replying to my prior message, seems 'link' is the correct theme.json selector, which is a bit counter intuitive given headings use their HTML tag.

Defining the below in the styles section of theme.json does remove the offending CSS.

			"link" : {
				"typography": {
					  "textDecoration": false
				}
			},

@scruffian
Copy link
Contributor

@addedlovely please can you give replication steps?

@addedlovely
Copy link

addedlovely commented Jan 9, 2023 •
edited
Loading

@scruffian Without the theme.json rule above, I get the default a:where(:not(.wp-element-button)) outputted in the 'global-styles-inline-css'. For my theme that's loading before the closing <body> tag, and then overriding any plugin / theme CSS in the <head>.

Whilst, I can change the script loading order to resolve, a:where(:not(.wp-element-button)) seems like a very inefficient and specific default, couldn't it just be a then you turn off the text-decoration on .wp-element-button?

Reading over #42072 seems like it's trying to solve a non problem - a is a broad selector by it's very nature, so would bleed into other styles, but with a low specificity can be easily overwritten.

@scruffian
Copy link
Contributor

The issue is that this selector is used by Global Styles to style every link. We need to the exception to ensure that links that
are treated as buttons don't inherit the style from the links. If we just move the text-decoration rule to the button element, that would work fine but then any other link customizations made using the link element will also apply to buttons, which is probably not what you want most of the time.

We do need a broad selector for links you're right, which a gives us, but actually a:where(:not(.wp-element-button)) is almost equally as broad and has the same level of specificity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Regression Related to a regression in the latest release
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@scruffian @getdave @bgardner @addedlovely @ndiego @ZebulanStanphill