-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Custom editor styles on element selectors effect block control styles. #10178
Copy link
Copy link
Closed
Labels
Backwards CompatibilityIssues or PRs that impact backwards compatabilityIssues or PRs that impact backwards compatability[Feature] Custom Editor StylesFunctionality for adding custom editor stylesFunctionality for adding custom editor styles[Package] Editor/packages/editor/packages/editor[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Description
Describe the bug
If in my theme-editor-styles.css I have the following:
button {
box-shadow: 10px 5px 5px red;
min-height: 2.5rem;
}
then havoc is wreaked on my editor.
Expected behavior
The styles above are exaggerated but I don't think styles on button or input elements are totally edge cases. #10067 (comment)
Possible solution
One fix that would need more testing is to unset styles on the Gutenberg specific class before styles are added.
So, for example, adding the following to the top of components/style.css fixed the button styles for me:
.components-button {
all: unset;
}
This could be done for each class that Gutenberg applies to an html element other than div. Mostly button and input I would guess.
Desktop (please complete the following information):
- OS: Ubuntu
- Browser: chome, firefox
- Version: latest
Additional context
- Gutenberg v3.9
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Backwards CompatibilityIssues or PRs that impact backwards compatabilityIssues or PRs that impact backwards compatability[Feature] Custom Editor StylesFunctionality for adding custom editor stylesFunctionality for adding custom editor styles[Package] Editor/packages/editor/packages/editor[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Type
Fields
Give feedbackNo fields configured for issues without a type.
