Reflecting max-width of content in the editor

Hi there, I’m new to Cwicly and just trialing it for my workflow, so apologies if this is just just user error, but I cannot find an answer.

  1. I have created a single post template, placed the Post Content block inside a section block and given that a max-width of 900px and some padding. According to Reflect width in Editor, this should set the max-width inside the editor to 900px as well. But it doesn’t. It’s very difficult to use at 100% on a large display for writing posts. Where am I going wrong?

  2. The ‘full width’ and ‘wide’ options on core blocks are missing with Cwicly installed. Are they not available? It’s a frequent design choice to allow images to break out wider than the content, for example, in blog posts.

This is all basic functionality in Generate Press, so I’m assuming it’s just my approach that is wrong here.

Hi @Graphnic,

Welcome to the community :slight_smile:

  1. Thank you for pointing this out!
    With 1.2.9.8 we improved the Section block to show the inner container.
    However, during this process, it appears that the width adjustment in the editor has been inadvertently disabled.
    Please rest assured that we are actively working on rectifying this issue and will have it resolved at the earliest.
    We apologise for any inconvenience this may have caused.

  2. We do not provide a ‘full width’ and ‘wide’ option for our blocks, as this can be achieved by placing an Image block outside of your content’s container, or placing the Image in a full width container.
    Alternatively, if you are using a third party theme be sure to check if they offer the full width option:

If you need any more help with this, please don’t hesitate to let me know.

Thanks for the reply. Good to know the width issue wasn’t me being a wally!

With regard to the missing wide and full width options, it’s not only on the Cwicly blocks, is the core blocks as well. I understand in a page-building context it’s easy enough to work around using different containers, but what about in a ‘posts’ context?

For example, if we build a site for a client who will be adding a lot of news content themselves, we wouldn’t want them to use containers to control width for the block post content. They just need to write, and use core blocks in a vanilla block editor experience.

In most Gutenberg hybrid themes (GeneratePress, Blocksy, Kadence etc), the content width is defined in the theme settings so the user doesn’t need to add containers to every blog post to achieve the correct widths. We can of course do that in the template with Cwicly using max-width and ‘auto’ margin to centre it. If however the user wants to use a fullwidth image or wide video in a blog post, for example, the CSS is such that the block breaks out of the container in other themes. How would we handle this scenario in Cwicly with these width setting disabled and the max-width defined at the template level?

Hi @Graphnic,

I faced the same issue. My way around this was some CSS:

.rich-text-container > *:not(.wp-block-image):not(.wp-block-table),
.rich-text-container > .wp-block-table.alignleft,
.rich-text-container > .wp-block-table.alignright,
.rich-text-container > .wp-block-table.aligncenter,
.rich-text-container > .wp-block-image.alignleft,
.rich-text-container > .wp-block-image.alignright,
.rich-text-container > .wp-block-image.aligncenter {
    max-width: 44rem;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.rich-text-container > .wp-block-table.aligncenter {
    display: block;
}

The Post Content Block gets the Class .rich-text-container. When my client inserts an image it is full width by default. When they select either align left, align right or align center the image stays inside the content boundaries.

In this CSS I also excluded tables from the max width because I want tables to be larger than the 44rem as well.

Thanks, that’s an interesting approach. I’d prefer the editor to behave as default, the controls in core make sense to folks. It’s a share we loose that in Cwicly as it is retained in other, less flexible, themes that work with the block editor.

I wonder if it could be an optional feature enabled in settings? I’m guessing there must be a reason why it’s proactively removed.

For your client it does not get more complicated this way. It is just the setup, that requires custom CSS that is not that straight forward.

I think @Araminta told me once that in fact they do not actively remove this feature because it is not part of the Gutenberg Editor rather than the Theme.

Well theme dependent in the sense that the ‘wide’ and ‘full width’ controls are enabled via theme.json (if I remember correctly), I guess. It’s a super-useful design feature though.

Yep, I agree with you!

Hi @Graphnic,

Just wanted to let you know that with 1.3.0.2, the Post Editor width can now be correctly reflected with the addition of the editor max-width property.
Please note that this can be applied both to the Cwicly Post Content, but also the core Post Content block.


Hope this helps!

Hi @Araminta, that’s a perfect solution. Thanks for let me know, too :smiley:

1 Like