Theme Compatibility

[munirkamal]

Hi,

Although this may not be directly related to the course, as it is also Gutenberg related I am posting here if anyone can help.

I am working on making my WP theme compatible to Gutenberg. I need to know what is the best way to override theme styles in editor view?

I’ve enqueued editor specific stylesheet, however, Gutenberg’s ‘editor/build/style.css’ is taking precedence over my enqueued stylesheet.

I got to think of there possible solutions, may someone please advice which is best and how to achieve it?

1) Set priority to theme stylesheet to get precedence over Gutenberg stylesheets. Possible? How?
2) Dequeue Gutenberg stylesheets which control the blocks CSS specifically in the editor view. Which one is that exactly? How?
3) Last option would be to use ‘!important’ within my stylesheet so it gets precedence over others. Still doubtful it will work out of the box though.

Please advice.

[Zac Gordon]

Hiya!

Great question. Couple of thoughts.

1. I found that sometimes it was a matter of class weight. Adding more classes means your styles override the default ones.
2. You can see what priority the GB styles are enqueued at and make sure yours are enqueue later.
3. You can find the handle for the core GB styles and make them a dependency for your stylesheet to have WP ensure yours loads later.

One or any combination of these should help.

A good place to start would be the core GB plugin file, looking for where it enqueues CSS in the editor 🙂

[munirkamal]

Thank you for the response. I will try to find to target more specific selectors first. Let’s see how I go with that.

[Author]

Posts