Skip to content

Gallery: Let a click on an overlaid caption reach the image - #85381

Open
jasmussen wants to merge 1 commit into
trunkfrom
fix/gallery-caption-covers-image
Open

jasmussen wants to merge 1 commit into
trunkfrom
fix/gallery-caption-covers-image

Conversation

@jasmussen

Copy link
Copy Markdown
Contributor

What?

While working on #81500, I discovered what is arguably a bug: if you set images in a gallery to open in a lightbox, any captions you put on the gallery images block a click to open. Clicking the text just shows the text caret.

This PR applies pointer-events: none; to just the caption, and only when the image is using "Expand on click":

state

Why?

Choosing "Expand on click" is a choice to make your gallery interactive, so it should be trivial to open thumbnail images, even when they have caption overlays.

The pointer-events issue does mean that if your overlay caption is long enough to scroll, you can't scroll it inside the thumbnail. That's the primary tradeoff, but this still works if you toggle off expand on click. And if/when we land #81500, the story is much clearer: if you want to read the caption, simply click the thumbnail to see the caption LARGE and legible below the full image in the lightbox, rather than as a tiny bit of overlay text.

Test

Create a gallery, set all images to expand on click, add LONG captions to at least one of the images, then click around in a preview.

Use of AI Tools

Claude Opus 5.

@jasmussen
jasmussen requested a review from a team October 22, 2026 10:24
@jasmussen jasmussen self-assigned this Oct 22, 2026
@jasmussen jasmussen added the [Type] Bug An existing feature does not function as intended label Oct 22, 2026
@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

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 props-bot label to refresh.

📦 Bundle size

Size Change: +168 B (0%)

Total Size: 9.06 MB

📦 View Changed
Filename Size Change
build/styles/block-library/gallery/style-rtl.css 3.04 kB +30 B (+1%)
build/styles/block-library/gallery/style-rtl.min.css 1.94 kB +23 B (+1.2%)
build/styles/block-library/gallery/style.css 3.04 kB +30 B (+1%)
build/styles/block-library/gallery/style.min.css 1.94 kB +24 B (+1.25%)
build/styles/block-library/style-rtl.css 22.8 kB +16 B (+0.07%)
build/styles/block-library/style-rtl.min.css 19.4 kB +16 B (+0.08%)
build/styles/block-library/style.css 23 kB +13 B (+0.06%)
build/styles/block-library/style.min.css 19.4 kB +16 B (+0.08%)

1751959 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric ca9ae91 trunk % Change
timeToFirstByte 36.45 ms +12.76% -2.33% 35.6 ms +16.43% -3.51% 2.39%
largestContentfulPaint 66 ms +3.03% -3.03% 64 ms +9.38% -6.25% 3.13%
lcpMinusTtfb 27.55 ms +13.97% -7.8% 26 ms +20.96% -4.62% 5.96%
wpBeforeTemplate 19.33 ms +7.04% -1.5% 18.87 ms +15.79% -2.6% 2.44%
wpTemplate 14 ms +11.64% -4.21% 13.46 ms +5.2% -4.83% 4.01%
wpTotal 33.2 ms +14.04% -2.05% 32.64 ms +16.61% -3.8% 1.72%
wpMemoryUsage 7.67 MB +0% -0% 7.64 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric ca9ae91 trunk % Change
timeToFirstByte 28.5 ms +14.39% -3.33% 26.75 ms +12.15% -2.24% 6.54%
largestContentfulPaint 68 ms +2.94% -5.88% 60 ms +6.67% -0% 13.33%
lcpMinusTtfb 36.9 ms +5.83% -2.3% 33.9 ms +3.54% -0.74% 8.85%
wpBeforeTemplate 18.04 ms +15.24% -4.88% 16.59 ms +10.97% -1.51% 8.74%
wpTemplate 8.2 ms +4.88% -4.51% 7.56 ms +11.51% -2.12% 8.47%
wpTotal 26.1 ms +14.56% -3.98% 24.4 ms +12.66% -2.54% 6.97%
wpMemoryUsage 6.25 MB +0% -0% 6.22 MB +0% -0% 0.54%
wpDbQueries 9 +0% -0% 9 +0% -0% 0%

media-processing

Metric ca9ae91 trunk % Change
mediaProcessingJpeg 237.63 ms +0.63% -0.45% 227.82 ms +1.94% -0.69% 4.31%
mediaProcessingAvif 3904.12 ms +0.79% -0.66% 3680.97 ms +2.24% -0.88% 6.06%
mediaProcessingJpegToAvif 2675.75 ms +0.57% -1.84% 2568.03 ms +1.38% -1.28% 4.19%

media-upload

Metric ca9ae91 trunk % Change
jpegUploadProcessing 1409.8 ms +0.95% -1.74% 1375.99 ms +1.83% -32.96% 2.46%
pngUploadProcessing 173.13 ms +1.07% -1.5% 178.13 ms +1.13% -2.28% -2.81%
largeJpegUploadProcessing 1395.1 ms +0.87% -0.64% 1400.1 ms +1.03% -0.64% -0.36%
multipleImageUploadProcessing 1465.59 ms +2.29% -0.89% 1470.75 ms +0.55% -1.13% -0.35%

post-editor

Metric ca9ae91 trunk % Change
serverResponse 523.17 ms +0.4% -8.42% 508.35 ms +3.71% -8.58% 2.92%
firstPaint 302.1 ms +72.38% -12.59% 501.34 ms +3.91% -12.9% -39.74%
domContentLoaded 1210.73 ms +1.77% -4.06% 1200.28 ms +1.19% -2.66% 0.87%
loaded 1211.81 ms +1.78% -4.04% 1201.27 ms +1.22% -2.62% 0.88%
firstContentfulPaint 518.9 ms +3.84% -1.92% 520.72 ms +1.51% -4.12% -0.35%
firstBlock 3535.45 ms +2.32% -3.01% 3494.7 ms +3.34% -1.1% 1.17%
type 17.44 ms +7.74% -2.41% 18.2 ms +3.79% -5.22% -4.18%
typeWithoutInspector 18.72 ms +2.88% -5.88% 17.88 ms +0.89% -3.19% 4.7%
typeWithTopToolbar 22.6 ms +2.74% -2.74% 22.63 ms +7.47% -2.61% -0.13%
typeContainer 9.26 ms +2.81% -4.97% 7.7 ms +13.9% -2.73% 20.26%
focus 130.74 ms +6.42% -9.55% 113.37 ms +3.06% -2.35% 15.32%
firstFocus 251.73 ms +0% -0% 229.66 ms +0% -0% 9.61%
selectAll 606.48 ms +0.89% -0.23% 576.04 ms +1.99% -2.39% 5.28%
listViewOpen 84.66 ms +4.37% -5.22% 83.02 ms +8.53% -11.41% 1.98%
inserterOpen 41.77 ms +9.29% -5% 40.01 ms +5.47% -1% 4.4%
inserterHover 11.67 ms +12.25% -6.43% 12.37 ms +6.71% -8.81% -5.66%
inserterSearch 8.09 ms +10.14% -8.16% 8.2 ms +5.49% -7.93% -1.34%
loadPatterns 637.58 ms +0.89% -4.66% 655.59 ms +2.22% -0.54% -2.75%
wpTotal 513.48 ms +0.45% -8.56% 498.58 ms +3.83% -8.72% 2.99%
wpMemoryUsage 14.71 MB +0% -0% 14.67 MB +0% -0% 0.24%
wpDbQueries 55 +0% -1.82% 55 +0% -1.82% 0%

site-editor

Metric ca9ae91 trunk % Change
serverResponse 510.21 ms +6.44% -2.11% 517.53 ms +2.59% -7.91% -1.41%
firstPaint 262.54 ms +17.89% -13.99% 279.52 ms +7.67% -12.28% -6.07%
domContentLoaded 1332.63 ms +0.22% -1.4% 1279.58 ms +1.61% -0.94% 4.15%
loaded 1333.75 ms +0.23% -1.38% 1280.69 ms +1.61% -0.94% 4.14%
firstContentfulPaint 545.09 ms +0.95% -4.67% 503.97 ms +5.86% -4.92% 8.16%
firstBlock 4911.55 ms +1.37% -0.84% 4718.6 ms +0.5% -0.92% 4.09%
type 20.41 ms +1.42% -4.21% 18.79 ms +5.96% -3.25% 8.62%
navigate 129.57 ms +11.97% -5.49% 130.98 ms +10.22% -8.35% -1.08%
loadPatterns 1414.69 ms +5.04% -7.19% 1310.17 ms +5.35% -2.99% 7.98%
loadPages 986.49 ms +6.61% -2.21% 1019.25 ms +0.62% -1.82% -3.21%
wpTotal 500.52 ms +6.65% -2.11% 508.34 ms +2.59% -8.13% -1.54%
wpMemoryUsage 12.72 MB +0% -0% 12.69 MB +0% -0% 0.27%
wpDbQueries 44 +2.27% -0% 44 +2.27% -0% 0%

1751959 Run

🏁 Flaky tests

Some 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 /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt.
Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35

1751959 Run

@jameskoster

Copy link
Copy Markdown
Contributor

If the caption contains a link does that mean it no longer receives the cursor pointer on hover?

Not all themes display the caption as an overlay, is there anyway to only apply this in themes that do?

@jasmussen
jasmussen force-pushed the fix/gallery-caption-covers-image branch from 7e89676 to 5efd7af Compare October 23, 2026 09:09
@jasmussen

Copy link
Copy Markdown
Contributor Author

Good notes. I had a think and landed on this:

state

When captions are outside, it's just like old times. When captions are overlaid and the gallery image is lightboxed, they are now entirely non-interactive. The argument: we have to land #81500 as well, which provides the more accessible and legible way to read long overlay captions anyway: under the image, large, with space.

What do you think?

A gallery caption is laid over the bottom of its image and may grow to
cover it entirely. With "Enlarge on click" the lightbox opens from a
click on the `img`, so a caption that covered the image took every one
of those clicks and left no way to open it. The only way in was the
Enlarge button, which is invisible until the image is hovered, and so
absent on touch.

Let the whole caption click through to the image, as the blur scrim over
it already does. The tile becomes one surface carrying the zoom cursor
throughout, and the caption is read in the lightbox, where it is legible
and selectable, rather than four lines at a time in a thumbnail. This
takes in any link the caption holds: `pointer-events` is inherited, so a
link stops being clickable here too, which keeps one cursor and one
behaviour across the whole image.

The rounded and bordered styles put the caption under the image rather
than over it, where it covers nothing and there is nothing to click
through to, so they are excluded and keep their captions scrollable and
selectable. `wp-lightbox-container` is added when the block is rendered,
so captions in the editor, and in galleries without the lightbox, are
untouched as well.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@jasmussen
jasmussen force-pushed the fix/gallery-caption-covers-image branch from 5efd7af to 1751959 Compare October 23, 2026 09:12

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants