Opened 9 months ago
Closed 4 months ago
#56412 closed defect (bug) (fixed)
Twenty Sixteen: gallery block produces shifted or scrambled output
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.2 | Priority: | normal |
Severity: | normal | Version: | 6.0 |
Component: | Bundled Theme | Keywords: | has-patch has-testing-info commit |
Focuses: | css | Cc: |
Description
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/
Attachments (1)
Change History (12)
#1
@
9 months ago
- Summary changed from gallery block produces shifted output since the new gallery block implementation to gallery block produces shifted or scrambled output
#2
@
9 months ago
- Component changed from Themes to Bundled Theme
- Focuses css added
- Summary changed from gallery block produces shifted or scrambled output to Twenty Sixteen: gallery block produces shifted or scrambled output
#4
@
6 months ago
- Keywords has-patch needs-testing needs-testing-info added
- Milestone changed from Awaiting Review to 6.2
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.
#5
@
4 months ago
- Keywords has-testing-info added; needs-testing-info removed
Test Report
Patch tested: 56412.diff
Steps to Reproduce or Test
- Add gallery block with 4+ images. I tested with these:
- Publish and view post/page.
- 🐞 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 3: Firefox 1193px w/ 6 images
#6
@
4 months ago
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:
#7
@
4 months ago
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:
#8
in reply to:
↑ description
@
4 months ago
The fix works for me too, thank you all for the fix!
#9
@
4 months ago
- Keywords commit added; needs-testing removed
Thanks! I'm marking for commit consideration. Further testing is still welcome, though :)
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).