Load global stylesheets after base Gutenberg styling?

General
1

@Louis I’m not sure yet if this is the best solution, but here’s an example scenario:

I’m playing around with using both the Cwicly theme and plugin. I’ve set my Single Post template, and want to add margins to my h2 headings.

I don’t think there’s a specific setting for this, so I go to my Global Stylesheet and add:

h2 {
    margin-top: 1.4em;
    margin-bottom: 0.8em;
}

This shows up properly on the front-end, as well as adds this in the editor:

.editor-styles-wrapper h2 {
	margin-top: 1.2em;
	margin-bottom: 0.8em;
}

However, the CSS inside of Gutenberg is getting overridden by this base styling:

.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
	margin: 0;
}

If our custom CSS were to load later in the page, it would take precedence over Gutenberg’s base styling.

I don’t have an issue with this on my personal site, so I believe that’s the standard behavior when using add_editor_style?

Curious to hear your thoughts!

1 Like
2

Putting down some additional thoughts here since this is actually a pretty complicated subject.

Adding on to my example…

I’d only want h2’s within my blog posts to have that margin, so normally I’d make sure my Post Content element inside my Single Post template has the <article> tag and use this CSS instead:

article h2 {
    margin-top: 1.4em;
    margin-bottom: 0.8em;
}

Again, that works perfectly on the front-end, but since Gutenberg is just loading the post content, <article> won’t show up in the Gutenberg HTML and thus the CSS won’t be applied in the backend.

So we actually need two sets of styling: article h2 for the front-end, and .editor-styles-wrapper h2 for the back-end.

The problem is… how do you get .editor-styles-wrapper h2 to only apply to Single Posts on the back-end?

There are ways to do it via external snippets and stylesheets (I actually wrote a post about it here: How to Add CSS to Gutenberg Editor Based on Conditions | NewPulse Labs), but I feel like there has to be an easier way to accomplish it with Cwicly?

3 Likes
3

Great food for thought here @sunny, thank you for sharing!

Those Gutenberg default styles :grimacing:
Not sure how heading margins on the backend were missed… Will look at providing a fix in the coming days.

We already do a few modifications on the Global Stylesheet to allow for specific rules that can’t be applied everywhere (body, html). The extra would be the Single Post conditional.

The logic is already there, so your point brings up different possibilities in my mind. We simply need to make it accessible and easy to set up, but I definitely see an area that could allow you to specify a custom selector that then applies select rules on the backend and different ones on the frontend.

1 Like
4

That’s really great to hear. As always, looking forward to seeing how you implement it :slight_smile: