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

add scaffold for link and button style to help engineers with editor style bleed #143

Merged
merged 3 commits into from
Jun 24, 2022

Conversation

fabiankaegy
Copy link
Member

Description of the Change

Add scaffold for link and button base CSS in order to help engineers work around introducing bleed of editor styles into the WordPress Admin interface.

Since we have switched to using the add_editor_style function for including our editor styles in #69 we've found two common issues where base styles of link and button elements affect some instances of Block Editor components. This of course is not intended behavior and really should be fixed in WordPress core. See WordPress/gutenberg#10178

To work around this I've gone ahead and added an empty shell for the link and button base styles so that they exclude the WordPress core elements. In order to not increase the specificity of the selector, we are using the :where pseudo-selector.

Closes #

Alternate Designs

We in theory introduce a separate frontend-only stylesheet again to split the styles that should get applied in the editor apart. We've seen in the past however, that this quickly leads to many inconsistencies and editorial experiences that don't match the frontend appearance.

Possible Drawbacks

The :where pseudo selector is currently supported in 90% of browsers according to caniuse.com. This should cover all the browsers we are targeting for client builds.

Verification Process

  • Add some custom styles to either the link.css files in the assets/css/frontend/base directory

  • Navigate to the editor

  • Insert a paragraph and add a link. -> See that the styles are showing up correctly

  • Insert an Image Block -> See on the Placeholder state that the link in the placeholder that is part of core does not get affected.

Checklist:

  • I have read the CONTRIBUTING document.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests passed.

Changelog Entry

Fixed: Remove editor-style of links and buttons bleeding into Core WordPress elements

@fabiankaegy fabiankaegy added the enhancement New feature or request label Jun 24, 2022
@fabiankaegy fabiankaegy self-assigned this Jun 24, 2022
Copy link
Member

@Antonio-Laguna Antonio-Laguna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me and it's also a great enhancement!

Copy link
Contributor

@joesnellpdx joesnellpdx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also approved by me! this is great!

@fabiankaegy fabiankaegy merged commit 983fe2b into trunk Jun 24, 2022
@fabiankaegy fabiankaegy deleted the feature/fix-editor-style-bleed branch June 24, 2022 16:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants