Making Posts editor client friendly

I would add to this topic, that would be good to pass in the backend the classes applied to the post content.

So for example if for a post type, at the template level, on the Post Content block I add a global class (let’s say .post), in the post edit in the backend, everything will be wrapped inside that class.

Then everything inside a global stylesheet that targets that .post class will reflect also in the backend.

2 Likes

Hey there @Louis , I am working to make my client’s experience as smooth as possible as well and, as you know, I am more of a project manager and less of a developer. So, while I have been building Wordpress sites for 20ish years and I understand the infrastructure of a WP site and theme I still am being introduced to many intricacies of that construct daily by using Cwicly. So thank you for that!

As I read through your reply to @owynter in an attempt to create a useable space for my own clients I receive my first gold nugget and that is that within the Global Styles section of Cwicly (and, therefore, I imagine a properly coded wordpress theme) there is not only your basic ‘style sheet’ section ie: Typography tab but also Elements including Block Typography and deeper styling options for site elements (paragraph, links, images etc …).

So, if I understand correctly, the Block Typography section allow us to create style types for text components that we can apply to our pages and posts as we build them - similar to the ‘Styles’ component in Word. Is that basically a UI-enabled class?

I was today years old when I learned that and I am so pleased to know it now and I absolutely want you to correct me on this if I am wrong.

What I don’t see here is a way to make the content in the post edit screen not fill the entire width of the screen.

The way this reads for me is that you are suggesting we style the Post Content Block on the template which, I imagine, will have an impact on the front end rendering of the content. However, I fail to see how it will have any impact on the back end, data entry area. Also, I don’t see where I can enter that in the Global Syles section.

I am eager to understand better how I can address this matter. And I thank you and everyone else in this fantastic community for their time :sunglasses:

Screenshot below is of the data entry area I am referring to, the content is jammed up against the sides of the data entry container in a way that makes the content entry process very uncomfortable:

Hi @smontreuil ,

As I happily found out myself, through doing exactly what @Louis described, yes, any styles you apply to the post content block are indeed reflected perfectly in the admin interface.

This allows you to customise each post types editing experience individually to reflect the front-end display. Cwicly global styles are also automatically applied to the editor, so you don’t need to do anything special or extra to make that work.

One trick that I recommend that really worked well (if it is applicable to the blocks you are using in the post content), is to use a universal relative style on the post content block that sets the max-width on all direct children (rather than on the post content block itself).

By doing this, it allows whatever background colour you have applied to the post content block to fill the entire editor, while correctly constraining the blocks inside.

Here are the settings I used to centre the content within the editor to a max-width using a relative style (named All elements).

Screenshot 2023-03-29 at 01.33.56

I hope this gives you some inspiration.

The obvious caveat is that any styles, including max-width you set must also work correctly on the front-end. This is relatively straightforward because the intention is usually to match the editing experience to the front-end display, so as long as you apply those styles using the post content block, everything just works in both places.

1 Like

Also, it goes without saying that, if you want to right align your content instead of centring it, you can just remove the auto value from the right margin style.

Wow, @StrangeTech , this is kind of blowing my mind :face_with_peeking_eye:

I am trying very hard to understand exactly what is going on so that I can integrate and adapt … I see that you have definitions for each of your Header styles and also Paragraph … I replicated your All elements definition and that worked flawlessly to center everything in my data entry screen … except for my paragraph content.

So, I am guessing that I need to create a similar definition for that but I can’t quite wrap my head around how to do it. Would you be so kind as to share a screenshot of that definition?

This is what my data entry screen currently looks like:

Have you set a max-width on your Post Content element in the template?

(Don’t forget to set margin: auto for your left and right margins, so that the content is centered).

Edit: sorry, I totally misread your post!

1 Like

The power of Cwicly! With so many other website tools having so many frustrating limitations, it is a pleasant surprise to use one as flexible as Cwicly.

There is an issue with style overrides in the Post editor as mentioned by @owynter earlier in this thread:

If you experience this issue, as @sunny mentioned, the solution is to apply the auto value to the left and right margin for the specific element in the relative styles. Add the following to your relative style for paragraphs and it should resolve it:

1 Like

I apologize for being obtuse but this is exactly the part that I need the guidance on

This is where I am getting stuck:
https://h-vd.io/Pgd0l17Q?

Watch Video

No problem, once you get your head around it, it becomes a lot easier to follow.

When you set up the Relative Style you need to add the rule that targets the p tag.

  1. First click on the Rules button for the Relative style:

  1. Then you can configure the rule to target the p tag:

Relative Style Rules

2 Likes

Awesome @StrangeTech , thank you!

Hi @owynter,

I’m also concerned about clients editing posts, and after some trials and errors, I finally ended up with this simple CSS for post/page editing:

.is-root-container.wp-block-post-content {
    max-width: 80ch;
    margin: 0 auto;
    padding: 1em;
}

I tried to find something like this before in vain, but today it looked obvious with the ‘.wp-block-post-content’ added to ‘.is-root-container’ only for posts and not for templates.

Maybe this class has been added in some recent WP update or maybe I had not seen it before :wink:

Note that you can restrain this to certain post types if you need so:

.post-type-TYPE .is-root-container.wp-block-post-content {
    max-width: 80ch;
    margin: 0 auto;
    padding: 1em;
}

Where TYPE can be ‘page’ or any CPT slug.

Also note that you CAN’T use the second method in Cwicly stylesheets because ‘.editor-style-wrapper’ will be added at the beginning of the rule, so before ‘.post-type-TYPE’, which is a <body> class, so the selector will be invalid.
So you’ll have to include the CSS a different way.
(But the first one is OK if you don’t need specificity.)

1 Like