Twenty Sixteen: gallery block produces shifted or scrambled output

[silicium23]

I noticed that at least in the theme "twentysixteen", images are shiftet to the left. The issue only affects newly created galleries!

In the database i found that the code, wordpress writes is different since wordpress 6 (or maybe little earlier).

I've disabled all plugins and css/js customizations and i used a unchanged vanilla twentisixteen theme, problem persisted.

In the IRC, Clorith told me that it is a bug related to:
​https://github.com/WordPress/wordpress-develop/blob/35da3652824faff4be01f60c42d4a4dd84b42337/src/wp-content/themes/twentysixteen/style.css#L3607-L3615

Because in WordPress 6.0 images no longer have a wrapper around the figure tag.

The issue in production: ​https://www.waldrian.com/2022/06/06/wuestentour-und-werkstattwochen/

[zoonini]

Reported here as well:

​https://wordpress.org/support/topic/gallery-widget-image-displays-misalligned/

I was able to see the issue on the user's site in Safari 16, but not in Firefox 107.0.1 or Chrome 108.0.5359.98 – macOS 12.6 (Monterey).

[sabernhardt]

reset CSS margin and max-width for images and captions in a gallery

[sabernhardt]

I experienced it in Firefox in Chrome when I opened the browser inspector/console (positioned at the bottom). It's even more interesting when the first image is small and the next image is full-width, with the below-entry-meta class, which overlaps the smaller image.

Editing the script to exclude galleries may be cleaner, but the patch edits the styles for both gallery blocks and gallery shortcode output.

[bgoewert]

Test Report

Patch tested: 56412.diff

Steps to Reproduce or Test

1. Add gallery block with 4+ images. I tested with these:
   • ​https://wordpress.org/photos/photo/260628e688/
   • ​https://wordpress.org/photos/photo/66162d7108/
   • ​https://wordpress.org/photos/photo/959636f3aa/
   • ​https://wordpress.org/photos/photo/42661efbd5/
2. Publish and view post/page.
3. 🐞 Second image row aligns left.

Expected Results

When reproducing the bug:

• ❌ Second image row moves out of alignment with the gallery.

When testing the patch to validate it works as expected:

• ✅ Images should not move out of alignment.

Environment

• OS: Pop!_OS 22.04
• Web Server: Docker-Desktop & wordpress-develop
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 109, Firefox 108
• Theme: Twenty Sixteen
• Active Plugins: none

• OS: macOS Monterey (via LambdaTest)
• Browser: Safari 16

Actual Results

When reproducing the bug:

• ❌ Firefox changes the alignment >= 1193px. Screen widths at or below 1192px seem to work for me. See figures 1 and 2.
• ✅ Was not able to reproduce in Chrome.
• ❌ Safari changed the alignment >= 985px. 984px and below changes to a different media query layout that does not present the issue.

When testing the patch:

• ✅ Issue resolved with patch.

Supplemental Artifacts

Figure 1: Firefox 1192px

Figure 2: Firefox 1193px

Figure 3: Firefox 1193px w/ 6 images

Figure 4: Safari 985px

Figure 5: Firefox 1193px after patch
'

Figure 6: Safari 985px after patch

[ira2910]

Test Report

This report validates that the indicated patch addresses the issue.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/56412/56412.diff

Environment

• OS: Windows 10 Pro (version 22H2)
• Web Server: Nginx
• PHP: 8.1.9
• WordPress: 6.1.1
• Browser: Google Chrome Version 108.0.5359.124 (Official Build) (64-bit)
• Theme: Twenty Sixteen
• Active Plugins:
  • None

Actual Results

• :white_check_mark: Issue reproduced successfully.
• :white_check_mark: Issue resolved with patch.

Supplemental Artifacts

Issue in Chrome before patch:
Issue in Firefox before patch:
Issue fixed in Chrome using the patch:
Issue fixed in Firefox using the patch:

[tahminar27]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56412/56412.diff

Environment

• OS: Windows 10 Home Single Language (22H2)
• Web Server: nginx
• PHP: 8.1.9
• WordPress: 6.1.1
• Browser: Version 109.0.5414.120 (Official Build) (64-bit)
• Theme: Twenty Sixteen
• Active Plugins:
  • G no active plugins
  • WordPress Beta Tester 3.2.1

Actual Results

✅ Issue reproduced successfully.

• ✅ Issue resolved with patch.

Supplemental Artifacts

Issue in Chrome before patch:
Issue fixed in Chrome using the patch:

[silicium23]

The fix works for me too, thank you all for the fix!

[sabernhardt]

Thanks! I'm marking for commit consideration. Further testing is still welcome, though :)

[audrasjb]

Thanks all! Self assigning for commit.

[audrasjb]

In 55227:

Twenty Sixteen: Fix Gallery block images alignement.

This changeset fixes an alignment issue that has been present since the gallery block markup was changed in WordPress 6.0.

Props silicium23, zoonini, sabernhardt, bgoewert, ira2910, tahminar27.
Fixes #56412.