Make WordPress Core

Opened 23 months ago

Last modified 8 months ago

#55839 new defect (bug)

6.0 Upgrade Does Not Keep Image Alignment

Reported by: obviousinvestor's profile obviousinvestor Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 6.0
Component: Editor Keywords: needs-patch
Focuses: Cc:

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.

Attachments (1)

Screenshot - 26_05_2022 , 09_04_37.jpg (82.1 KB) - added by obviousinvestor 23 months ago.
Blue "Numbers Updated Image" and yellow "meme" image have central alignment set

Download all attachments as: .zip

Change History (5)

@obviousinvestor
23 months ago

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

#1 @Boniu91
23 months ago

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.

#2 @duncan1967
23 months ago

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.

Last edited 23 months ago by duncan1967 (previous) (diff)

#3 @nielslange
20 months ago

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.

#4 @mrfoxtalbot
8 months ago

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.

Note: See TracTickets for help on using tickets.