Upload Media: render srcset on the front end for client-side-media uploads#78359
Open
adamsilverstein wants to merge 1 commit into
Open
Upload Media: render srcset on the front end for client-side-media uploads#78359adamsilverstein wants to merge 1 commit into
adamsilverstein wants to merge 1 commit into
Conversation
PR #78038 moved big-image threshold scaling out of prepareItem() into a post-upload sideload, so the create-item response now carries the URL of the unscaled original. The block stores that URL via onChange, and the scaled-sideload step's server-side update_attached_file() never makes its way back to the client — mediaFinalize() is typed as Promise<void> and discards the REST response. The block then persists the unscaled URL, so on the front end wp_calculate_image_srcset() compares the block's src (IMG_0441.jpg) to each size file (IMG_0441-225x300.jpg, IMG_0441-768x1024.jpg, …) via str_contains() and matches none of them. $src_matched stays false and the function returns false — no srcset attribute is emitted. Make mediaFinalize() return the REST attachment (transformed so source_url maps to url), and have finalizeItem() forward it to finishOperation. The reducer merges it into item.attachment, and the next processItem pass fires onChange with the scaled URL, which is what the block needs to land a src that matches a known size. Adds a unit test for the new mediaFinalize return value, a regression test for finalizeItem forwarding the attachment to the reducer, and an e2e test that publishes an oversized CSM upload and asserts the rendered <img> ships with a srcset of at least two width descriptors. Fixes #78358
|
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 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. |
|
Size Change: +52 B (0%) Total Size: 7.97 MB 📦 View Changed
ℹ️ View Unchanged
|
3 tasks
adamsilverstein
added
[Type] Bug
|
Flaky tests detected in 4a2b483. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25929107727
|
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?
Fix a regression introduced by #78038 where oversized client-side-media uploads render on the front end without a
srcsetattribute. Server-side uploads of the same image still produce the full responsivesrcset.Fixes #78358.
Why?
#78038 moved big-image threshold scaling from a pre-upload
prepareItem()step to a post-upload sideload, so the unscaled original is now what's POSTed towp/v2/media. The create-item response carries the original's URL;onChangefires; the block stores it.Server-side, the scaled-sideload step already updates
_wp_attached_fileto the-scaledfile. The RESTfinalizeendpoint returns the up-to-date attachment. But on the JS sidemediaFinalize()was typed asPromise<void>and discarded the response, so the queue'sitem.attachment.urlnever refreshed. The block ended up persisting the unscaled URL.Then on the front end,
wp_calculate_image_srcset()does:against each entry in
$image_meta['sizes']. With the block'ssrcset toIMG_0441.jpgand sizes namedIMG_0441-225x300.jpg,IMG_0441-768x1024.jpg, etc., no size file is a substring of the src —$src_matchedstays false and the function returns false → nosrcsetattribute is emitted.How?
Two small changes on the JS side; server side was already correct.
packages/editor/src/utils/media-finalize/index.js— return the REST response transformed viatransformAttachment(sosource_url→url), instead of swallowing it.packages/upload-media/src/store/private-actions.ts:finalizeItem— take that returned attachment and pass it tofinishOperation. The reducer merges it intoitem.attachment. The subsequentprocessItempass then firesonChangewith the scaled URL, and the block updates itssrcbefore the save lock is released.wp_calculate_image_srcset()can now match a known size.The
mediaFinalizesettings type was widened toPromise<Partial<Attachment> | void>.Testing Instructions
core/imageblock and upload an image larger thanbig_image_size_threshold(default 2560px on the long edge).<img>carries asrcsetattribute referencing the sub-sizes and asizesattribute. Before this fix the<img>ships with nosrcset.Also check a non-oversized upload (e.g. a 1024×768 image): behavior is unchanged.
Automated coverage
packages/upload-media/src/store/test/private-actions.js— new regression test:finalizeItemforwards the finalized attachment tofinishOperation.packages/editor/src/utils/media-finalize/test/index.js— updated existing tests and added a case asserting the transformed attachment is returned (withurlset fromsource_url).test/e2e/specs/editor/various/client-side-media-processing.spec.js— new e2e test: publish an oversized CSM upload, visit the front end, and assert the<img>has asrcsetwith at least two width descriptors. Also asserts the block's stored URL has been updated to the-scaledfile post-finalize.Types of changes
Bug fix.
Checklist