add scaffold for link and button style to help engineers with editor style bleed #143
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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#10178To 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 theassets/css/frontend/base
directoryNavigate 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:
Changelog Entry
Fixed: Remove editor-style of links and buttons bleeding into Core WordPress elements