Make WordPress Core

Opened 2 years ago

Last modified 11 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 2 years ago.
Blue "Numbers Updated Image" and yellow "meme" image have central alignment set

Download all attachments as: .zip

Change History (5)

@obviousinvestor
2 years ago

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

#1 @Boniu91
2 years 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
2 years 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 2 years ago by duncan1967 (previous) (diff)

#3 @nielslange
23 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
11 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.