[wp-trac] [WordPress Trac] #56412: Twenty Sixteen: gallery block produces shifted or scrambled output

[WordPress Trac]

#56412: Twenty Sixteen: gallery block produces shifted or scrambled output
-------------------------------------------------+-------------------------
 Reporter:  silicium23                           |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  6.2
Component:  Bundled Theme                        |     Version:  6.0
 Severity:  major                                |  Resolution:
 Keywords:  has-patch needs-testing has-         |     Focuses:  css
  testing-info                                   |
-------------------------------------------------+-------------------------
Changes (by bgoewert):

 * keywords:  has-patch needs-testing needs-testing-info => has-patch needs-
     testing has-testing-info


Comment:

 == Test Report

 Patch tested:
 [https://core.trac.wordpress.org/attachment/ticket/56412/56412.diff
 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''
 [[Image(https://i.imgur.com/lZJhQOP.png)]]

 ''Figure 2: Firefox 1193px''
 [[Image(https://i.imgur.com/s8TlzSN.png)]]

 ''Figure 3: Firefox 1193px w/ 6 images''
 [[Image(https://i.imgur.com/SaOOiWq.png)]]

 ''Figure 4: Safari 985px''
 [[Image(https://i.imgur.com/MOVdEol.png)]]

 ''Figure 5: Firefox 1193px after patch''
 [[Image(https://i.imgur.com/gpVXpt6.png)]]'

 ''Figure 6: Safari 985px after patch''
 [[Image(https://i.imgur.com/r7sbek1.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56412#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform