5

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

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.