Skip to content

Custom editor styles on element selectors effect block control styles.  #10178

@m-e-h

Description

@m-e-h

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.

gutbutton

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions