Directory

CSS rules for links in the editor are too specific · Issue #59782 · WordPress/gutenberg · GitHub
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

CSS rules for links in the editor are too specific #59782

Closed
markhowellsmead opened this issue Mar 12, 2024 · 5 comments
Closed

CSS rules for links in the editor are too specific #59782

markhowellsmead opened this issue Mar 12, 2024 · 5 comments
Labels
Needs Testing Needs further testing to be confirmed. [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended

Comments

@markhowellsmead
Copy link

markhowellsmead commented Mar 12, 2024

Description

The rules which apply link colours in the editor are too specific and cannot easily be overridden.

The specificity of .editor-styles-wrapper a:not([class^=components-]):not([class^=editor-]):not([class^=block-]):not([aria-owns]):not([id^=mceu_]) is 0,6,1.

The rule .editor-styles-wrapper .wp-block-sht-author-list__author-name-link (from a custom block) cannot override it, because the specificity is 0,2,0.

Step-by-step reproduction instructions

  1. Compare the specificity of the rules above.

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 6.4.3, no plugins.

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

@markhowellsmead markhowellsmead added the [Type] Bug An existing feature does not function as intended label Mar 12, 2024
@t-hamano
Copy link
Contributor

Thanks for the report.

The specificity of .editor-styles-wrapper a:not([class^=components-]):not([class^=editor-]):not([class^=block-]):not([aria-owns]):not([id^=mceu_]) is 0,6,1.

I couldn't find such a selector in the Gutenberg project. Also, for example, if I define a link color in a group block, the CSS selector will be as follows (Tested on WP6.4.3):

.editor-styles-wrapper .wp-elements-0 a

css-selector

Is there a way to reproduce that selector?

@t-hamano t-hamano added [Status] Needs More Info Follow-up required in order to be actionable. Needs Testing Needs further testing to be confirmed. labels Mar 12, 2024
@markhowellsmead
Copy link
Author

Thanks for your feedback. That selector is copied from the developer tools inspector, from any link in the editor.

@t-hamano
Copy link
Contributor

Maybe it's due to another library? I found the issue below.

m-e-h/postcss-editor-styles#2

@aaronrobertshaw
Copy link
Contributor

Thanks for taking the time to submit this issue @markhowellsmead 👍

I'd like to second @t-hamano's comments here.

There are no references to any of the a:not clauses from the reported selector within Gutenberg or WordPress core. It stems from the postcss-editor-style plugin here.

On the Gutenberg and WP Core side of things, link colors are applied in the following manner:

Within the editor, the selector used to apply link colors is a:where(:not(.wp-element-button)). It gets applied to specific blocks by scoping that selector with a single class generated for that block instance e.g. .wp-elements-0. This also matches the selector and approach used on the frontend.

As this is an issue with a plugin rather than Gutenberg specifically, I'll close this GitHub issue.

@aaronrobertshaw aaronrobertshaw closed this as not planned Won't fix, can't repro, duplicate, stale Mar 14, 2024
@markhowellsmead
Copy link
Author

markhowellsmead commented Mar 14, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Testing Needs further testing to be confirmed. [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants