Repository navigation
Image: Fix lightbox using thumbnail aspect ratio instead of original image ratio - #79058
Conversation
t-hamano
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @lbwtaylor. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
[Package] A11y
9031ebe to
331ce17
Compare
|
Hey 👋 I wanted to give you a heads-up since this pull request is affected by recent validation changes for changelog files. #83043 adds additional validation for changelog files. You'll note that this pull request is currently failing a "Required changes from trunk" check. What you'll need to do: You will need to either rebase or merge the latest code from |
|
Hello, I want to thank SainathPoojary for proposing this change, and everyone for taking the time to review. Just want to say that as a small site hoster, I would really like this behavior to be changed as SainathPoojary suggests. Having uniform thumbnails and uncropped lightbox images is what I want to see and I would guess most folks as well. I am personally not worried about animations, getting uniform thumbnails and uncropped lightbox images is a much higher priority. Thank you everyone. |
|
@SainathPoojary Thanks for keeping at this. I see you pushed some changes since we last talked. Were you able to try the "transition" trick I proposed, and did it work? I.e. can we animate the aspect ratio between unzoomed and zoomed? If you're able to respond and ideally provide a video, we would be able to approve and land this for 7.2. Thank you for contributing. |
de0269f to
f4dcd63
Compare
|
Thanks @jasmussen! Yes, the visible crop now animates alongside the existing zoom, smoothly revealing the image’s original proportions. Instead of transitioning Screen.Recording.2026-09-24.at.12.45.41.PM.1.mov |
|
Wild. From a design and behavioural point of view: nice work, we can ship this, it's a good solution. From a tech point of view: I would love a thorough review of the code so we're sure that it's safe to ship. I think it possibly is, the code looks clean at a glance, but I will defer to others taking a look. |
e8461d0 to
435418d
Compare
|
Thanks for all the work on this, @SainathPoojary, and to everyone for the reviews! What's still open:
I ran into this independently on a site with a cropped Gallery ("Crop images to fit" + "Enlarge on click") and would love to see it merged. Happy to help test if anything else is needed. |
The lightbox of the image block sized itself by the thumbnail instead of the original image: in a gallery with "Crop images to fit", or for an image set to a cropped size, "Expand on click" showed the image with the thumbnail's proportions. The fix of WordPress/gutenberg#79058 lives in the lightbox script module of core/image, whose store is locked, so it cannot be patched in from outside. The plugin therefore serves a patched copy of that module, lightbox/view.js, under the core module's id, changed in setOverlayStyles() only. The styles the fix needs come along: the thumbnail container takes the thumbnail's size, and the zoom animation clips the image to the thumbnail's crop. The keyframes carry names of their own, so the order in which the styles load does not matter. The copy is only served while WordPress ships exactly the module it was taken from, the one of WordPress 7.1. A version that already carries the fix, or the Gutenberg plugin rendering the image block itself, is left alone. This is a workaround until the fix has reached every supported WordPress version. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…image ratio (WordPress#79058) * Image: Fix lightbox using thumbnail aspect ratio instead of original image ratio * Add changelog entry * Image: Fix lightbox using full-size image ratio instead of thumbnail ratio * Image: Add lightbox-thumbnail-container class to thumbnail image container * Image: Animate clip-path in lightbox zoom to reveal original image proportions * Image: Add changelog entry for lightbox aspect ratio fix * Image: Fix lightbox starting scale for cropped thumbnails * docs: update changelog * chore: remove `will-change` --------- Unlinked contributors: lbwtaylor. Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: DanielFloeter <kometschuh@git.wordpress.org> Co-authored-by: Tmeemu <mteemu@git.wordpress.org>
The swipe used a CSS transition and a CSS animation, switched on by classes toggled on the overlay, with a `setTimeout` waiting out durations that had to be kept in step with `style.scss` by comment. That coupling produced both of the bugs in this branch: toggling a class changed the image container's computed `animation-name`, which restarted the open-zoom animation, and a stale timer could strand the image off-screen. Animate the slide and the fade with `element.animate()` instead. Scripted animations take precedence over an element's CSS animations without touching its class list, so the open zoom the lightbox plays — rebuilt in #79058 — is left entirely alone, and the swipe cannot restart it. The durations now live only in `view.js`; `is-animating-slide`, `is-fading-in` and their keyframes are gone from the stylesheet. `animation.cancel()` replaces the hand-rolled abort, and settling a swipe that is still in flight replaces the flush, so an interrupted or cancelled gesture has one way to end rather than several. The drag offset also moves from the overlay to the image containers. The overlay's `style` attribute is bound to `state.overlayStyles`, and the Interactivity API assigns a bound style string to `cssText`, so a resize part way through a gesture rewrote the attribute and wiped the drag out from under the finger. Nothing is bound to the containers. Verified in a gallery lightbox: no CSS animation starts at all during a swipe, `lightbox-zoom-in` still plays on open and reopen, a drag survives a viewport change mid-gesture, and cancelled, interrupted and uncommitted gestures all return the image to rest. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
7 participants
What?
Closes #79040
Fix lightbox displaying images at the thumbnail's aspect ratio instead of the original image's aspect ratio.
Why?
In
setOverlayStyles(),imgRatiois computed from the full-size image dimensions but gets overwritten later by an adjustment block. The container sizing logic was running after this mutation, so the lightbox was sized using the thumbnail's cropped ratio instead of the original image's ratio.How?
Capture
const fullSizeRatio = imgRatioimmediately after the initial calculation, before any mutation, then usefullSizeRatioin the container sizing block instead oforiginalRatio.Testing Instructions
Screenshots or screencast
Before:
Screen.Recording.2026-06-10.at.10.07.12.PM.1.mp4
After:
Screen.Recording.2026-06-10.at.10.00.43.PM.1.mp4