6.0 Upgrade Does Not Keep Image Alignment

[obviousinvestor]

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.

[obviousinvestor]

Blue "Numbers Updated Image" and yellow "meme" image have central alignment set

[Boniu91]

Hello @obviousinvestor thanks for creating the ticket.

Unfortunately, I'm not able to reproduce the problem. Could you check if it also happens without any plugins enabled + on the default theme?

If so, please provide us exact steps on how we could reproduce mentioned issue.

[duncan1967]

I have the same issue using Astra 3.8.2, not resolved by using Twenty-Twenty-Two theme (isn't theme issue). Affects pre-existing post images and newly inserted images equally (center-align in editor displays as left-aligned in post). Development environment (Laragon WAMP), flush browser cache, restart Apache etc. doesn't change. Windows 10, Chrome 102.0.5005.63, Firefox 101.0 (64bit).

The image (<img>) is a child (<figure>) of figure which has classes .wp-block-image and .aligncenter.

Class .wp-block-center in css/dist/block-library/style.min.css v6.0.1 has "margin: 0 0 1em;"

Clearing (unticking) this style rule in Chrome Developer Tools resolves the problem: center-aligned images snap to center as expected (and are no longer left aligned).

Using Chrome Dev Tools to follow the computed CSS reveals the above class (with 0px horizontal margin) overrides class .aligncenter class in Astra's assets/css/minified/frontend.min.css (with margin-left: auto;)

Adding CSS below to the child-theme CSS corrects the behaviour:

figure.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

I hope this helps towards resolving the issue.

[nielslange]

Hello @Boniu91,

In ​https://github.com/woocommerce/woocommerce-blocks/issues/7102, the same problem had been reported as well. Here are the steps to reproduce this issue:

1. Install and activate the WooCommerce plugin (Version 6.9.0-rc.1).
2. Install and activate the WooCommerce Blocks plugin (latest version).
3. Install and activate the Twenty Twenty-Two theme (latest version).
4. Create a test page and add the Cart block to it.
5. Open the List View in the editor to view the empty Cart.
6. See that the empty cart icon is not centred in the editor.
7. Save the test page and open it in the frontend.
8. See that the empty cart icon is not centred in the frontend.

[mrfoxtalbot]

I found this issue in the ​support forums and I can confirm it is still happening.

I can also confirm that there is a ​related issue in GH for it.