Show post content's relative styling in back-end

I believe I may have briefly mentioned this in the past, but it would be great if post styling in the back-end closer resembles the front-end.

For example, let’s use Jaume Blog Post from the Cwicly design library as a post template.

It has relative styling set for headings and paragraphs within the blog post:

image

On the front-end, it appears as:

But on the back-end, it doesn’t take any of the styling into account:

2 Likes

Already forgot about that, thanks @sunny :+1:

1 Like

I agree. It would be nice to see on the backend how the front-end looks and vice versa as close as possible.

Many other page-builders can do this (although not always 100%), so peeking at how they render both back and front-end might give ideas/insights.

Constantly switching from back to front-end to see how things get rendered is not ideal for single monitor setups. I really wish I had two monitors!

1 Like

In my experience most page builders actually don’t already do this, because they’re not based on Gutenberg. You just get a simple default post layout set by either the theme or builder.

I see people mention this from time to time, but for me, it always looks identical on the backend. Even with my own custom CSS that I’m pulling in via virtual classes. I’m using the Cwicly theme though, so maybe that is the magic?

This topic is about reflecting specific rules of a template inside the editor, which are setup via relative styling, not the general editing experience, which in most cases should be pretty accurate.
These are only visible on front-end currently.

Thanks for the suggestion @sunny.
1.2.8.1 brings this into action whenever editing on the Post Editor.

I’d be very interested to have feedback on this one, and how it translates in multiple and various environments.

2 Likes

On first test it looks much better! I’ll be able to give more feedback once I start building out a few real templates over the next couple months :slight_smile:

1 Like