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

by

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!

1 Answer
1

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;
}

Leave a Comment