Alignment not working

clean installation today, nothing changed in settings, alignment of inserted headings/ paragraphs not working:

Frontend:

Backend:

Hello @FZwo,

What CSS property is alignment relying on in this specific case?

it’s this setting:
Bildschirm­foto 2023-02-09 um 14.52.04

The following should make the issue more clear. Aligning standard Gutenberg blocks horizontally (Headings, paragraphs,…) works fine, but does not for the respective Cwicly blocks:

This is really troubling me, would be great to get that answered

@Louis I think I got it, mainly it was my fault. With Cwicly text blocks inserted into a section or div, it seems to be necessary to set the wrapper to flex, set it to wrap its children, and set the children (the text blocks) to flex and justify them horizontally per align-self flex option as intended. Horizontal justifying via the text block itself with its respective icon in the editor does not have any effect. At least it is working now via flex settings (a bit intransparent though, as it works differently, depending if inner Cwicly blocks or standard blocks are used), did I describe it correctly?

The only issue remaining is as follows: If a tex block has a line break, it is always aligned to the left as soon as line-breaking is occurring due to screen size or block width, or do I miss a necessary setting for that case?

Hello @FZwo,

Apologies for not responding sooner.

The align options in Gutenberg are specifically tailored for general use, and are based on classes (that contain a set of rules modifying the behaviour of the block the class is applied on).

If you inspect the blocks on the frontend, you will notice these alignment classes are added to the block. We have preferred leaving it up to you to decide what to do with these classes, as you can easily add them to a global stylesheet, thus reflecting on the backend and frontend.

I’m having trouble understanding this specific point, so please bear with me if I get this wrong. Wouldn’t text-align: center; be what you’re looking for here instead of a centered flex?

Cheers,

Sure, that could be done with custom CSS. But what for is this then left, if it is not working:

No, not custom CSS.

I was referring to:

Please refer to my previous message. The Cwicly Theme does not include properties for these classes, but you’re free to add them yourself.

Thank’s Louis, I finally got it:-) I was fully misled by this option:

Should that not be better taken out from Cwicly blocks then?

Yes. It should be removed if it’s doable, as it’s misleading. Btw, that option belongs to Gutenberg. Not sure if it’s possible to remove it?

Hi @FZwo and @jornes,

I do agree that it is misleading in this particular instance, and I do apologise for the trouble it’s caused you for not being clear.

Originally, these toggles were not included with Cwicly blocks, but a few of our users using other themes needed access to them.

I haven’t reviewed these recently, but I do believe that removing them isn’t as easy as it seems. I will look into it and see what can be done.

Thanks for your patience on this one, @FZwo.

It’s okay @Louis
I didn’t get confused with it. I used to style everything from Cwicly’s editing panel. I just assume it’s misleading for some new users. I guessed it’s challenging to remove the item from Gutenberg.

1 Like

Hi all,

Since Cwicly has chosen the “block way” (opposed to other builders which are not FSE/Gutenberg integrated), if we keep this alignment toggle for Cwicly blocks, I think the result should be consistent with Gutenberg blocks, be it for text or images.

Or maybe there could be some compatibility switch to allow it?

Because currently we can’t benefit from Cwicly UI block settings (like margins, lightbox, overlays, etc.) and integrate blocks properly in a standard Gutenberg content page (specifically alignment).

Related: Image alignement is not applied on frontend

Worstcase is this, when a Cwicly Text Block is inserted into a standard Gutenberg Block “Group”, that does not make sence in anyway (not working justify options mixed with width options):