.editor-styles-wrapper overriding my block styles in Gutenberg
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!
Topic block-editor add-theme-support add-editor-style wp-enqueue-style Wordpress
Category Web