Inconsistent appearance for centered images in Columns and Layout Grids on various themes

[jp-imagines]

Quick summary

Tested on a few different block themes, both in the page editor and site/template editor. Depending on the theme, images that are resized and set to align center inside a column (Columns or Layout Grid) display differently in both the editor and the live site.

Initial report: 6669310-zd-a8c

Steps to reproduce

1. Activate Twenty Twenty-Three.
2. Create a new page which contains three separate column layouts:
   • A Columns block, where at least one column contains an Image block.
   • A Layout Grid block, where at least one column contains an Image block.
   • Same as the Layout Grid above, but the Image is contained within a Group block (i.e. Layout Grid > Column > Group > Image). In all cases, the image should be resized down and set to align center.
3. Observe the image alignment in the editor and on the live page.
4. Switch to Meraki. Observe the image alignment in the editor and on the live page.

What you expected to happen

Images in columns set to align center should be centered both in the editor and on the live site.

What actually happened

On Twenty Twenty-Three, an image in a Layout Grid only displays centered if contained in a Group (editor and live site):

On Meraki, the images in any column never appear centered in the editor, but always appear centered on the live site:

Background colors are for illustration purposes only; there's no change if the columns have no background colors set. Replicated similar behavior on other themes (e.g. Antonia behaves the same as Meraki).

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Might be related to https://github.com/WordPress/gutenberg/issues/49542, but I'm not certain on that.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6669310-zen
• [ ] 7629774-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm able to replicate this across test environments using TT3.

In the linked GB issue, this comment seems to be highlighting the same underlying issue - the blocks in this report's tests match that problematic HTML markup: https://github.com/WordPress/gutenberg/issues/49542#issuecomment-1497325616

Screenshots/Recordings

Atomic Site, TT3

📌 ACTIONS

• Assigned to Other
• Needs Core Fix: https://github.com/WordPress/gutenberg/issues/49542
• Requested author feedback
• Added to ‘HE Cross-repo Watchlist’ project board

📌 Message to Author

• The Meraki issue looks to be something different, perhaps theme-specific with regard to the editor. On the live site, it looks like the theme's stylesheets are addressing the aligncenter issue, so the issue here is that the editor itself is not showing center alignment.
• @jp-imagines would you be able to report that editor/live site discrepancy separately? Did you observe that across multiple themes, or just Meraki?

[jp-imagines]

would you be able to report that editor/live site discrepancy separately? Did you observe that across multiple themes, or just Meraki?

Multiple themes for both issues. In a quick test today:

• Antonia, Byrne: behave the same as Meraki (not centered in the editor, all centered on the live site)
• Pendant, Tazza, Loudness, Iotix: behave the same as TT3 (only Layout Grids affected)

Looks like the Meraki-like behavior is already reported in https://github.com/Automattic/wp-calypso/issues/78205. I'll add my findings there.

[cuemarie]

Looks like the Meraki-like behavior is already reported in https://github.com/Automattic/wp-calypso/issues/78205. I'll add my findings there.

Ah, great find!

[renata-franco]

Another one here: 7629774-zen.