I am just wondering what strategies you as a Cwicly user are using for sharing styles between the frontend and the post editor.
We are looking for the optimal approach so our clients have a more WYSIWYG experience (some of them are coming from using Elementor, so they are used to editing in context).
@Louis, if you have a recommendation, your input will be highly appreciated.
So, there are many things that make Cwicly by far my favourite builder for WordPress… but this one really made me smile.
When you style the post content block within a template for a particular post type, those styles are automatically applied to the post editor for that post type! This works with relative styles as well, which makes it incredibly powerful!
So no need to add any custom stylesheets or use any third-party tools to style the admin interface, just apply your styles in Cwicly directly to the post content block and they are reflected in the editor, simple.
Much appreciation to @Louis and the Cwicly team for making development with WordPress more enjoyable and creative for my team and myself.
We know first-hand how much effort and testing is required to develop within the WP plugin ecosystem, so please know your hard work and attention to detail is seen and acknowledged.
This is exactly what I loved on Webflow, here you can go much deeper withing the CMS WordPress components. So powerful.
I was asking myself the same thing because I’m in the middle of migrating a blog from Elementor to cwicly and my client really values the WYSIWYG experience from Elementor’s post editor, so I want to keep this client-friendliness in cwicly (in a way similarly to the Making Posts editor client friendly question in the forums).
But, as far as I understand, in order to do that to the best of cwicly’s abilities and with most design freedom, it’s best use cwicly blocks instead of the classic editor or Gutenberg blocks, right?
Following this assumption, I’d first define a Single post template, add the basic scaffolding and styling that should apply to all blog posts and then assign this template to all posts. Then I’d go through all posts individually and convert all Gutenberg blocks to cwicly blocks and add more advanced styling.
My problem with this process is that with 100+ blog posts, it’s extremely time-consuming to manually convert all Gutenberg blocks to cwicly blocks since, as far as I know, there’s no way to automate this, right?
Am I missing something or am I just approaching this whole thing wrong?
No need to convert the Gute blocks. They’re pretty basic. You can add a bit of CSS to style as you need.
Philosophically, design freedom is good only in moderation. At 100+ posts, you probably don’t want to have designed all of them differently using a pagebuilder. Just feels like recipe for pain if/when you need to move to a different technology later on. All the shortcodes and builder-specific tags get left in and it’s a pain to clean up.
By and large, you don’t want to create content with builders. I tend to stick with the classic editor for this reason. However, if you do want to go the block route, use the basic Gutenberg blocks as they were already exported from the Elementor site.
Just target things like the H2s and H3s, imgs, blockquotes, etc and style them as you want to for your blog posts.
Hi @marc,
You may be interested in this thread - for your specific case, you can use relative styles on the post content block that will style ALL posts, even ones with Gutenberg blocks:
Thanks @StrangeTech and @owynter for your quick replies, they were really helpful!
They helped me confirm that I was in fact approaching it the wrong way. I’m going to try out working with the relative styles on the post content block.
And just so you’re aware, you can also adjust the styling with custom CSS.
Let’s say you add the class .post-content to your Post Content element, if you use custom CSS like:
.post-content h2, the styling will show up in the backend editor 
Hi @sunny and @StrangeTech,
I’m desperately looking for a possibility to style the backend editor the same way like the frontend.
How do you do that? This does not work for me. I tried both the Cwicly Post Content block and the Gutenberg one. The classes I give them do not appear in the backend editor though. So styles like this: .post-content h2 don’t have any effect.
Could you elaborate a bit please? I don’t know what I’m missing here.
Other than one minor variance, I have my backend looking exactly like my front-end using the method I mentioned.
You’re positive you have the template applying to the post?
If you add a class to your Cwicly Post Content element, you can inspect the DOM in the post editor to see if it’s add the class to the parent wrapper.
My post content block:
Post editor DOM:
Sample custom CSS:
Thanks for the details!
This doesn’t work on my site.
I created a default Single Item: Post template:
The rest is like in your screenshots:
I’m not sure if this is it, but what happens if you create a custom template instead of a default one?
Unfortunately this doesn’t change anything.
Did you set up your templates as custom templates?
Hi @Jonas,
We have this working on multiple sites perfectly. On one specific site it doesn’t work for the default post type:
Perhaps you are experiencing the same issue.
Can you please try setting the visibility conditions for the Single Item: Post template to the following:
Hi @StrangeTech,
Indeed I fell for the bug you mentioned.
With the Custom Template it did not work at first because I only applied an External Class and the main block class. Neither were transferred to the backend. Now I tried a Global Class and this works. So for me only Global Classes will be usable in the backend.
Thank you very much to both of you @StrangeTech and @sunny for your help!
I’m having the exact same problem as @Jonas had and I tried all suggestions of both @sunny and @StrangeTech but the styles I defined in the post template don’t apply in the post editor and I can’t seem to figure out what else I can try to fix this.
On the front end (live site) everything works perfectly, but in the back end (post editor) the styles from the post template don’t seem to carry over. I checked the DOM in the post editor and the .blog-post-content global class (where I defined relative styling for H1, H2, etc.) I attached to the post content block in the post template is not being applied in the post editor, so I understand that this is reason for my situation.
I tried defining the styles in the post template through global classes with relative styling, custom css as well as a custom stylesheet. The only styles that carry over are the ones I specify in the custom stylesheet and only if I use the .is-root-container.wp-block-post-content selector as proposed in the forum post Making Posts editor client friendly.
Changing the visibility conditions on the post template as you (@StrangeTech) suggested unfortunately does not change anything.
Does anyone have a clue what other options I could explore to try and solve this this issue?
Thanks a lot for taking the time!
As mentioned here - we are having the exact same issue on one website. Other sites work perfectly. So it is possible we all may be experiencing the same issue/bug.
One thing that may help narrow this down for @Louis, is your site a brand new site created within the last 1-2 Cwicly versions, or is it an older site that you have upgraded Cwicly on?
The reason I ask is, all of the sites we have tested this and confirmed it works on were created more recently ,so I’m wondering if this is just a hangover from a previous version.
Thanks for your quick reply!
That’s a very good tip, I’ll try updating my cwicly version and see if that changes anything. I’m running on Version 1.2.9.5.8.4 of cwicly, so it’s not brand new but it’s not even a month old (cwicly’s speed and frequency of updates does not seize to amaze me 
).
In any case, maybe an update will help, thanks for the suggestion!
Ahhh, this may be your issue. The ability to use classes to style the post-content block and have it reflected in the editor was only added in:
Damn, I didn’t think to look at the changelogs of newer versions, lesson learned
Thanks a lot for your help!
EDIT: Just updated to the newest cwicly version (1.2.9.7.1) but that didn’t fix the problem, unfortunately. Tried regenerating HTML & CSS, clearing browser cache, changing browsers, all the typical stuff – no luck.
@Louis do you happen to know anything else that could be causing the issue?
