Older Gallery Blocks with 2+ columns appear in 1 left-aligned column on frontend

[liviopv]

Quick summary

Images inserted within a Gallery Block are overlapping, as if the frontend was not properly rendering the spacing and alignment of the grid.

It's most visible in the default Gallery and the Stacked variations, but it could be affecting other styles as well.

Example:
https://liviofree.wordpress.com/2023/10/31/galleries-test/

I could only reproduce on a Simple Site

Steps to reproduce

1. Activate a Classic Theme, like Twenty Twenty
2. Add a Gallery Block
3. Add a few images to the Gallery
4. The images will overlap

What you expected to happen

The Gallery should be rendered as shown in the editor

What actually happened

The images are incorrectly aligned and spaced in the frontend

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

Reproduced on
Gutenberg: v16.9.0
Editing Toolkit: 4.2070
WP AMP:
CoBlocks: 2.18.1-simple-rev.4

Unable to reproduce on Atomic and local site running GB 16.9

[cuemarie]

Escalation thread: p1698766181837769-slack-C02FMH4G8

[simison]

@liviopv have you replicated un-proxied? Or do we have customer reports?

I'm able to replicate only proxied. Unproxied Firefox/Chrome/Safari all work. My test post https://simisontestingfreeflow.wordpress.com/2023/10/31/33/

When I sandbox, gallery again works. Tested through versions of Gutenberg: 16.7.1, 16.8.0, 16.9.0-RC1. All worked while sandboxing.

Looks also that simple sites run Gutenberg 16.8.1. Tested with classic Hever theme.

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
Like the above notes, I can only replicate this when proxied. Unproxied, the Gallery Block behaves as expected.

Simple Site tested:

Theme: Twenty Twenty
Gutenberg: v16.9.0
Editing Toolkit: 4.2070
WP AMP:

rmPup1.mp4

📌 ACTIONS

• Triaged
• Lowering priority based on findings and advice here: p1698770819261839/1698766181.837769-slack-C02FMH4G8

[laragee6]

This issue was also seen here using the Maxwell theme (retired) 7261844-zen

[github-actions]

Support References

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

• 7261844-zen
• 7299318-zen
• 7264184-zen
• 7269956-zen
• 7583176-zen

[liviopv]

Possibly the first user-facing report:

• 7299318-zen

Creatio 2, Gutenberg 16.9 and WordPress 6.4. Deactivating Gutenberg doesn't fix the issue, but switching to TT2 does. I couldn't reproduce on my test site with Creatio 2.

[radtechgh]

7264184-zen
Maywood theme

[Gustavo-Hilario]

– Another report: 7269956-zen
– Theme: Baskerville 2
– I couldn't replicate this on a test site, but it is a recent issue on the user's site.
– I see the <figure> element with .wp-block-gallery has the following CSS code on my site (where Gallery is working properly):

body .is-layout-flex {
    display: flex;
}

– The same .is-layout-flex exists on their site code, on the wp-block-gallery element, but not the above CSS property.

[janmckell]

This is potentially the same issue:
7583176-zd-a8c
Twenty Twenty Three theme
I asked the user to test the Tiled Gallery Block for now, since we've given them a fair share of CSS code already so aiming to stay away from another workaround for now.

They said:
"Changing the block to Tiled worked. However, I can't add a comment for the photos.

The Gallery block wasn't an issue in my Baskerville 2 theme and worked correctly. Also, setting the gallery to 2 columns, 3 (or other) would always force the images to display in those columns as should and correctly.
I only noticed this issue occurring in the past couple of weeks (I think)."

[cuemarie]

Retriage: Updated title, lowering priority given the lack of consistency or customer reports

---

Notes

The customer reports shared here are inconsistent and don't match the original report's specs. Some notes:

• Nov 5 2023 - 7261844-zen 's posts (linked in the ticket) seem to be resolved, using the Gallery Block still without the issue present. Still using the retired theme Maxwell.
• Nov 10 2023 - 7299318-zen was ID'd to be a block spacing issue and corrected after it was shared here
• Nov 11 2023 - 7264184-zen customer returned a week later and reported the issue was resolved
• Jan 15 2024 - 7583176-zen - AT site on TT3, a block theme. user replaced gallery block with tiled gallery so not currently testable.

---

• Nov 16 7269956-zen the issue is still present; Baskerville 2. Visible on the customer's posts (linked in ticket), proxied and unproxied. A 2 column gallery block stacks the images into 1 column. Changes if I uncheck the display: block in

.post-content .aligncenter {
  display: block;
}

---

Since multiple HEs have reported they were unable to reproduce when trying to repro, I'd recommend any HEs who run into this in the future ask a customer to test removing the gallery block and rebuilding – perhaps something is leftover on older versions of the block or something.

[cuemarie]

New Simple Site + Baskerville 2 Theme + 2 image Gallery Block with Gallery Captions added, and the problem is not there.

However, when I copy a gallery block from the customer's site and add it to my test site, the problem comes with it, from the customer's site where the issue is still present.

Can see this in action here: https://mcqdelete20250115.wordpress.com/2025/01/17/gallery-block-test/

This suggests the issue is in how the gallery block used to be coded or was set up on the site. Replacing it with a new gallery block should resolve the issue.

[cuemarie]

Since this is not happening with a new gallery block added to the page, I'm going to close this out, actually.