6.0 Upgrade Does Not Keep Image Alignment

[ObviousInvestor]

Description

Pages compiled with latest 6.0 version aligns images left on update if they are set to align center. Align right works, but it does not respect images set to align center.

When I update a page in 6.0 (even without changing anything), all images on that page that have alignment set to "Center" align left.

This is quite serious as it stops me from being able to edit a page without messing everything up.

Step-by-step reproduction instructions

Just update any page with 6.0 editor and problem occurs

You can see in the attached image, the blue "Numbers updated" image and the yellow meme are both images set to center alignment.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[justintadlock]

I was unable to reproduce this. Images aligned center in the editor and on the front-end for me with and without Gutenberg 13.3 active on WP 6.0.

@ObviousInvestor - Can you test this with the Twenty Twenty-Two theme active? If still not working, can you copy/paste the block code here?

[ObviousInvestor]

Hi Justin, Sorry but I had to downgrade Wordpress to the previous version unfortunately as I couldn’t change anything without this happening so I was stuck. I also found that columns messed up on mobile in 6.0. If you look at the top of this post: https://obviousinvestor.com/assetz-capital-review/ it is a review block (Ultimate Addons) and other text blocks in a 2 column wrapper. In 6.0 on mobile, it did strange things so I had to revert quickly as it is my live site. If it helps I’m using Astra pro theme. Regards, Mark

…

________________________________ From: Justin Tadlock ***@***.***> Sent: Thursday, May 26, 2022 3:57:18 PM To: WordPress/gutenberg ***@***.***> Cc: ObviousInvestor ***@***.***>; Mention ***@***.***> Subject: Re: [WordPress/gutenberg] 6.0 Upgrade Does Not Keep Image Alignment (Issue #41365) I was unable to reproduce this. Images aligned center in the editor and on the front-end for me with and without Gutenberg 13.3 active on WP 6.0. @ObviousInvestor<https://github.com/ObviousInvestor> - Can you test this with the Twenty Twenty-Two theme active? If still not working, can you copy/paste the block code here? — Reply to this email directly, view it on GitHub<#41365 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANQQ2DGNIX5TAONZUSWTP7DVL6GM5ANCNFSM5XADNHFA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ashleyleia]

I'm having this issue with image alignment, but it's only happening with Astra theme (and I don't have Gutenberg active).

@ObviousInvestor - There's a thread related to this on the Astra theme support forum here: https://wordpress.org/support/topic/wordpress-6-0-image-alignment-not-working-2/

[ObviousInvestor]

Thanks. It’s good to know I wasn’t going crazy. I ended up downgrading to the previous version using the plugin WP Downgrade. There were also problems with some other blocks not aligning correctly on mobile. From: ***@***.***> Sent: 27 May 2022 14:45 To: ***@***.***> Cc: ***@***.***>; ***@***.***> Subject: Re: [WordPress/gutenberg] 6.0 Upgrade Does Not Keep Image Alignment (Issue #41365) I'm having this issue with image alignment, but it's only happening with Astra theme (and I don't have Gutenberg active). @ObviousInvestor<https://github.com/ObviousInvestor> - There's a thread related to this on the Astra theme support forum here: https://wordpress.org/support/topic/wordpress-6-0-image-alignment-not-working-2/ — Reply to this email directly, view it on GitHub<#41365 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANQQ2DEMTJCZJAGN2QFO7ATVMDGZDANCNFSM5XADNHFA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[gmcneel]

I am having this issue too. On WP Version 6.0 and Colibri WP theme. Looks fine in editor view, but live view does not work. Here is an example.

https://renewalvaporblasting.com/heavy-renewal-for-a-heavy-lifter/

[perherngren]

I also have this issue. On WP Version 6.0 and Astra theme free. In the editor it says align center. But the actual image aligns left both back end and front end.

[Benji-create]

I have the same Problem. Does somebody have a fix?

[ashleyleia]

I have the same Problem. Does somebody have a fix?

On the Astra support forum thread on this, they say: "Yes, we are aware of this issue and have planned to include the fix in the next release. Please consider reaching out to us through our Support Portal so we can provide you with the dev version that contains the fix."

As a workaround in the meantime, since pretty much all of my images are supposed to be centered, I've added this custom CSS in the WP Customizer, which overrides the theme and centers every image block across my whole site:
.wp-block-image {margin: auto !important;}

[bengs]

In Wordpress 6.0 the core image block's output has changed to apply the .wp-block-image class to the same <figure> element as the .alignright and .alignleft classes are applied. The core CSS still only targets child elements though so the alignment styles are not applied.
Before Wordpress 6.0:

<div class="wp-block-image">
    <figure class="alignright">

In Wordpress 6.0 the output changes to this (if you've upgraded, it will happen next time you resave a page/post):

<figure class="wp-block-image alignright">

Adding some extra css to your theme to target both scenarios should fix it for people encountering this issue in the meantime eg:

.wp-block-image.alignleft,
.wp-block-image .alignleft {
        /*rtl:ignore*/
        float: left;
        /*rtl:ignore*/
        margin-left: 0;
        margin-right: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
}
.wp-block-image.alignright,
.wp-block-image .alignright {
        /*rtl:ignore*/
        float: right;
        /*rtl:ignore*/
        margin-right: 0;
        margin-left: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
}

[t-hamano]

Hi @ObviousInvestor,

I have addressed this issue in a previous PR #39594.

However, as this comment suggests, the layout of blocks placed at the root level of content looks to be an issue that should be addressed by the theme.

This is not an issue that is specific to the "image block" or "center alignment" though. As you can see on the "layout support" dev note. These themes are still required to define the layout for their "root" level. In the case of astra I guess it's .entry-content.

So, I would like to close this issue as this is not a Gutenberg issue and a fix is planned according to the Astra forum topic.

If you have any problems or questions, please do not hesitate to reopen.