Skip to content

[WP 7.2] Image: measure the lightbox container, not the image's parent (#82312) - #85491

Open
adamsilverstein wants to merge 2 commits into
wp/7.2from
backport/82312-wp-7.2
Open

[WP 7.2] Image: measure the lightbox container, not the image's parent (#82312)#85491
adamsilverstein wants to merge 2 commits into
wp/7.2from
backport/82312-wp-7.2

Conversation

@adamsilverstein

@adamsilverstein adamsilverstein commented Oct 23, 2026

Copy link
Copy Markdown
Member

Backport of #82312 to wp/7.2, following the failed automatic cherry-pick: #82312 (comment)

Claude handled the cherry-pick, notes below:

What?

Position the Image block's lightbox trigger button against the .wp-lightbox-container figure instead of the image's parent element. Fixes #82283 for WordPress 7.2.

Why?

When a plugin wraps the img in <picture style="display: contents"> (eg. Modern Image Formats, see WordPress/performance#1918), the parent element generates no box, so its clientWidth and clientHeight read 0. The button lands outside the figure and adds horizontal scroll to the page.

How?

Cherry-pick of 3405e58319f112f87785e7bbb13aefbf5315ccb2. The only conflict was packages/block-library/CHANGELOG.md: the trunk commit's context included a Page List entry that isn't on wp/7.2. The Image entry is kept under Unreleased > Bug Fixes and the Page List line is dropped. view.js, the e2e plugin, and image.spec.js applied cleanly.

Testing Instructions

  1. Run the regression test: npm run test:e2e -- test/e2e/specs/editor/blocks/image.spec.js -g "when a plugin wraps the image".
  2. Or manually: activate the Gutenberg Test Image Picture Wrapper e2e plugin, add a large image with the lightbox enabled, view the post at a narrow viewport, and confirm the expand button sits in the top right corner of the image with no horizontal scroll.

AI Use

The cherry-pick and this description were done with 🤖 Claude Code. I will review and test.

🤖 Generated with Claude Code

https://claude.ai/code/session_019j1u2QLDpVyA8f7CYFsawP

@adamsilverstein @t-hamano sanketio
Image: measure the lightbox container, not the image's parent (#82312)
1fd6ea0 
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: sanketio <sanketparmar@git.wordpress.org>
@adamsilverstein adamsilverstein added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Oct 23, 2026
@github-actions github-actions Bot added [Package] Block library /packages/block-library [Package] E2E Tests /packages/e2e-tests labels Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •
edited
Loading

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: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: sanketparmar <sanketparmar@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +12 B (0%)

Total Size: 9.04 MB

📦 View Changed
Filename Size Change
build/modules/block-library/image/view.min.js 3.47 kB +12 B (+0.35%)

68ee347 Run

@adamsilverstein adamsilverstein mentioned this pull request Oct 23, 2026
Merged
t-hamano
t-hamano approved these changes Oct 24, 2026
View reviewed changes

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pre-approving this. Once #85499 is merged into wp/7.2, all CI errors should be resolved.

@adamsilverstein
Merge remote-tracking branch 'origin/wp/7.2' into backport/82312-wp-7.2
68ee347 
# Conflicts:
#	packages/block-library/CHANGELOG.md

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

Reviewers

@t-hamano t-hamano t-hamano approved these changes
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

No one assigned

Labels

[Block] Image Affects the Image Block [Package] Block library /packages/block-library [Package] E2E Tests /packages/e2e-tests [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adamsilverstein @t-hamano