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 Reply

Your email address will not be published. Required fields are marked *