.editor-styles-wrapper overriding my block styles in Gutenberg

admin管理员组

文章数量:1287935

I'm working on my first theme built from custom gutenberg blocks. I've managed to register blocks and enqueue their specific stylesheets, but I'm running into one issue that's kind of a pain. A lot of my blocks override global styles from my style.css file. However, when I enable editor styles, the .editor-styles-wrapper class is superseding the block styles.

To offer an example, here's my global container style:

div.tmp-container-fixed {
    flex-direction: row;
}

In my block-specific stylesheet:

section.sign-up .tmp-container-fixed {
    flex-direction: column;
}

And what the editor-styles.css puts out:

.editor-styles-wrapper div.tmp-container-fixed {
    flex-direction: row;
}

I understand why the editor styles are overriding the block styles. I'm wondering, is there any way to enqueue an editor stylesheet for each block, to output something like:

.editor-styles-wrapper section.sign-up .tmp-container-fixed {
    flex-direction: column;
}

I imagine I could code a custom editor stylesheet, but was hoping there might be an easier way to accomplish that.

Many thanks in advance!

I'm working on my first theme built from custom gutenberg blocks. I've managed to register blocks and enqueue their specific stylesheets, but I'm running into one issue that's kind of a pain. A lot of my blocks override global styles from my style.css file. However, when I enable editor styles, the .editor-styles-wrapper class is superseding the block styles.

To offer an example, here's my global container style:

div.tmp-container-fixed {
    flex-direction: row;
}

In my block-specific stylesheet:

section.sign-up .tmp-container-fixed {
    flex-direction: column;
}

And what the editor-styles.css puts out:

.editor-styles-wrapper div.tmp-container-fixed {
    flex-direction: row;
}

I understand why the editor styles are overriding the block styles. I'm wondering, is there any way to enqueue an editor stylesheet for each block, to output something like:

.editor-styles-wrapper section.sign-up .tmp-container-fixed {
    flex-direction: column;
}

I imagine I could code a custom editor stylesheet, but was hoping there might be an easier way to accomplish that.

Many thanks in advance!

• block-editor
• wp-enqueue-style
• add-theme-support
• add-editor-style

Share Improve this question asked Sep 3, 2021 at 22:57 AGKlemAGKlem 7133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

This isn't quite the solution I was looking for, but I realized that by making the tags more specific in the block stylesheets, I was able to prevent most issues from happening. By adding a div tag to the front of the tmp-container-fixed class, I was able to get the blocks to render properly in Gutenberg. (see below)

section.sign-up div.tmp-container-fixed {
    flex-direction: column;
}

本文标签： editorstyleswrapper overriding my block styles in Gutenberg