Repository navigation
Conversation
jasmussen
added
[Type] Enhancement
|
Size Change: +1.19 kB (+0.02%) Total Size: 7.73 MB 📦 View Changed
|
Contributor
|
Nice ✨ Thanks for working on this. I like the idea, but I would go with option 2:
I'm trying it with a simple caption text, and the outcome doesn't look good. The design needs to be more opinionated. 
In that vein, I also wouldn't assume that users want to show the caption info in lightbox. Clicking. the image to enlarge it is an explicit action just for the image. That option could be a toggle in Inspector's settings tab that says |
Contributor
Author
|
Changed based on your feedback, can you give it another look? I wonder if the safe area should be slightly larger still? Note that on mobile, this is problematic as that's where you need the extra space the most. We can make the spacing asymmetric, but not sure if that would look good, because note that this safe area change affects every image, including those without captions: 
Speaking of opinionated, I'd love to see if we can start without that. I feel like if one state has captions, the other should too. That's not to completely invalidate your idea, just that I'm wondering if we can start with seeing if this PR is able to land, and then if we receive feedback otherwise, we can proceed and add a toggle at that point. What do you think? |
Contributor
|
It looks good to me now. Although I would apply the same spacing on the sides of image and caption so both are aligned. 
The spacing you're applying looks good for a single line of text, which, to me, is an opinionated design choice for an image caption.
Agree only if it applies to the gallery, not to individual images that might be placed all over the document.
That sounds good to me. |
Closed
2 tasks done
Contributor
Author
|
Forgot to mention, but I applied your feedback! |
Contributor
|
I don't see new commits. Is that correct? |
Contributor
Author
|
Okay now I pushed changes. |
jasmussen
force-pushed
the
try/lightbox-captions
branch
from
August 19, 2026 07:19
d27bf49 to
7f14d46
Compare
This was referenced Sep 22, 2026
The lightbox ("Enlarge on click") duplicates the image into a shared
overlay but previously dropped the caption. Carry the caption over so it
appears in the lightbox, for single images and for gallery images.
- Extract the rendered `<figcaption>` in `block_core_image_render_lightbox()`,
sanitize with `wp_kses_post()`, and store it in the interactivity state
(`caption`). Reading the rendered content covers all sources with one
path: single images, static galleries, and dynamic galleries whose
caption comes from the attachment's `post_excerpt`.
- Add a caption element to the shared overlay markup, injected via a
`data-wp-watch` callback (a `data-wp-bind--innerHTML` binding does not
work: Preact reconciles children and won't apply a plain `innerHTML`
prop). The watch re-applies on gallery navigation.
- Inherit caption alignment from theme.json global `styles.elements.caption`
via the `wp-element-caption` class; no `text-align` is hardcoded.
Placeholder positioning only; final caption design is a follow-up.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lay the caption in a scroll layer over the (unchanged) enlarged image. A short caption sits in the space below the image; a long caption scrolls up and covers the image, and scrolling back up reveals it again. The image never moves. - `.wp-lightbox-caption-scroll` overlays the image (overflow-y:auto, overscroll-behavior:contain). A transparent spacer sized to `calc(50vh + var(--wp--lightbox-container-height)/2)` anchors the caption to the image's bottom edge; because 50vh reflows and the height var is republished by `setOverlayStyles()` on window resize, the anchor stays correct responsively. - The whole layer is hidden when the image has no caption, so those images keep the exact shipping behavior. - `actions.handleCaptionClick` keeps clicks inside the caption (text selection, links) from bubbling to the overlay's close handler; the image and surrounding area still close the lightbox. - Caption measure inherits the theme's content width (`--wp--style--global--content-size`, fallback 480px, capped at 90vw). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Start the caption panel 32px above the image's bottom edge so a short caption is visible without scrolling, and paint it with the overlay background at 80% (via color-mix) so it reads clearly while the part of the image it overlaps still shows through. Restore 24px block padding. Kept deliberately small so it can be reverted independently if the translucent-overlap direction isn't wanted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Supersedes the translucent-overlap approach after design feedback. Rather than lifting the caption over the image with a translucent panel, reserve extra breathing room around the enlarged image so the caption has space to sit below it. - `setOverlayStyles()` now adds a 24px inset on every side of the enlarged image, applied to all images (not only captioned ones) so navigating a gallery never resizes the image. - The caption anchors at the image's bottom edge again (no overlap), and the panel background is fully opaque, so a caption long enough to scroll cleanly covers the image as it moves up. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
#79114 moved the lightbox's close click off the overlay root onto `.scrim`, and made `handleTouchMove()` call `preventDefault()` on every touch gesture. Both assumptions had been baked into the caption layer. Keep the caption layer out of the way of pointer events except on the panel itself, so background clicks still reach `.scrim` and close the lightbox. Leave gestures that start on the caption to scroll natively rather than preventing them and tracking them as a swipe. Drop `handleCaptionClick()`, which only existed to stop clicks reaching the overlay's old close handler. Also move the changelog entry to the current Unreleased section, where the rebase did not carry it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The caption layer takes no pointer events outside the caption panel, so that background clicks still reach `.scrim` and gallery swipes still reach the overlay. On a pointer device that left the caption all but unreachable: the panel only begins below the enlarged image, which fills most of the overlay, so a wheel almost always landed somewhere that scrolled the page behind instead — which `handleScroll()` then snapped straight back, so nothing moved. Carry those deltas over to the caption by hand, and prevent the scroll they would otherwise have caused. A wheel over the panel already scrolls it natively and is left alone, as is a `ctrl`-wheel, which zooms the page, and an image with no caption, where no scroll layer exists. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
jasmussen
force-pushed
the
try/lightbox-captions
branch
from
October 22, 2026 09:57
7f14d46 to
ff105b8
Compare
Contributor
Author
|
I've rebased this branch, to pick up everything it was blocked on before. It's now using the same fundamental structure as #79114 moved towards: 
I discovered a bug in trunk in the process which I'll push a separate fix for, but this branch is not blocked on it. |
jasmussen
marked this pull request as ready for review
October 22, 2026 09:59
🤖 PR meta 🤖🎉 PropsIf 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. Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: +1.38 kB (+0.02%) Total Size: 9.05 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Regression: updating a specific option will only change its value and will not corrupt others in
|
Contributor
Author
|
The bug I mentioned, which pairs well with this PR: #85381. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #56587.
The lightbox ("Enlarge on click") duplicates the image into a shared overlay but has always dropped the caption. This PR carries the caption into the lightbox for single images and gallery images, with identical handling for both.
The image is not moved. A short caption sits just below/over the image; a long caption scrolls up and covers the (fixed) image, and you scroll back up to reveal it again.
Alignment inherits from theme.json global styles.elements.caption (via the wp-element-caption class) — no alignment is hardcoded. Width inherits the theme content width (--wp--style--global--content-size, i.e. theme.json settings.layout.contentSize), capped at 90vw, falling back to 480px when a theme sets none.
The panel is painted with the overlay background at 80% (color-mix) so it stays legible while the covered slice of image shows through.
The way this works is: Increase the overall safe area around the whole image, so that the caption doesn't need to cover part of it to be visible. If we do this, we can keep the opacity of the caption 100%. That will visually look much closer to the "external caption" design proposed in #56587.
We should pick one of those paths. Which one resonates?
Why?
Captions in galleries are especially useful on mobile where you might open and swipe, and if they simply disappear as they do now, we're missing an opportunity.
Testing Instructions
Add an Image block, add a caption, and enable Enlarge on click (link toolbar). Confirm the caption appears in the lightbox.
Repeat inside a Gallery; page through images and confirm each caption follows.
Give one image a very long caption and confirm it scrolls up over the fixed image; a short one should need no scroll.
Try an image with no caption — behavior should be unchanged from today.
Use of AI Tools
Claude Opus 4.8