Ability to style Post Content with classes (and have it reflect in the editor)

Styling (and relative styling) applied to the Post Content element only get reflected in the back-end if they’re applied at the block-level.

Given that you’ll likely use a Post Content block across various post types & templates, it’s currently a bit tedious to keep consistent post styling across your site.

You need to copy the Post Content element to each template, and any time you make a general change to a relative style - make the same change to each Post Content.

If Post Content styles applied to a global class were reflected in the editor as well, that would make things a lot easier.

Yes, I agree that adding a post content class (global) to the editor would solve a lot of problems related to backend and frontend consistency.

I’ve spent quite a bit of time battling trying to get the back-end to look like the front-end (especially with respect to different post types), so I wanted to provide an example to add onto this a bit more.

I was looking to set the default spacing between elements in a blog post.

The simple CSS snippet works perfectly on the front-end:

.post-content > * {
margin-block-start: 0;

.post-content > * + * {
margin-block-start: 1.5em;

Where .post-content is a global class I added to the Post Content element in my blog single template.

This isolates the styling to just my blog post content.

On the back-end though, it doesn’t work because .post-content doesn’t show up in the HTML inside the Gutenberg editor.

The only way to get it to apply to just my blog posts is to apply it via relative styling in the Post Content block-level styles.

That doesn’t quite work either though, as Cwicly sets a margin: 0 to all paragraphs, headings, figures, and lists in the editor. So that ends up taking precedence.

The only way then is to add more specificty to my relative style. Something like .content-cca7b00:not(.whatever) > * works, but then you run into priority issues.

That will take priority over any global class you have set on an element in your blog posts.

After trying every possible approach, it’s ended up not being possible to set up the front-end/back-end styling the way I’d like.

If Cwicly took whatever classes you have applied on your Post Element and applied it to the Gutenberg .is-root-container parent div, that would essentially eliminate every issue.

It would allow you to style your different post types using your choice of custom stylesheet, global classes, or block-level styling.

This gives you more control on where the styling is applied, and more flexibility when it comes to CSS specificity.

1 Like

I just saw this listed in :hushed:

On first test, I think it just solved all of my problems.

@Louis thank you, dude.

Hi @sunny,

You’ve made my day!
Thanks for the thread and going through what worked and didn’t work out for you.

Will leave this in-progress as there might be some additions to be made.
This and @David’s proposal of a possible boxed post editor are the necessary steps for the theme maker.

Thanks once again!



@Louis Naw man, you made mine!

I’m sure it was good brain exercise, but you have no idea the kind of mental jenga I was going through yesterday to try to get CSS specificity lined up across different post types and Post Content elements.

This might seem like a minor change, but I think it’s a huge step forward in terms of managing content in the back-end. It was one of my last major sticking points with Cwicly.

Once I implement my CSS for real tonight, I’ll let you know if there’s anywhere I’m still getting stuck. I’m not really anticipating anything though.

I’ll comment on David’s thread too about the boxed post editor. After giving it more thought, it’s definitely a more complex issue than this was.

Hey @Louis, I was able to get super close, but noticed one thing happening in the back-end.

As an example, let’s say you have these two classes in a custom stylesheet.

  • .post-content p
  • body .post-content p

The second selector is more specific, right.

However in the back-end, it gets translated as:

  • .editor-styles-wrapper .post-content p
  • html :where(.editor-styles-wrapper) .post-content p

Where #1 now has higher specificity.

Any ideas on why the :where() psuedo-class is added?

Hi @Louis,
Thanks for the quick fix on this. However, upon testing on my end, it didn’t work, and I was wondering why. After playing around I noticed that if post content block is placed at root level in template then it works and it adds my “entry-content” class to editor.
However, in my case, the post content block is nested under some parent elements, and in this scenario, the post content class doesn’t get added to the post editor.
Screenshot 2023-05-23 at 06.50.14