Show spinner when replacing media via drag-and-drop#76245
Merged
youknowriad merged 1 commit intotrunkfrom Mar 12, 2026
Merged
Conversation
…and media-text blocks When dragging a file onto an existing image/cover/media-text block to replace the media, there was no visual feedback during upload. The blocks already had spinner UI in place but it only triggered for initial uploads via MediaPlaceholder's `handleUpload` mechanism. The fix adds an `onFilesPreUpload` callback to MediaPlaceholder in all three blocks. When files are dropped, this callback creates a blob URL immediately and calls the block's media handler with it, triggering the existing `temporaryURL`/`is-transient` spinner UI before the actual upload begins. For image block: creates blob URL and sets `temporaryURL` state For cover and media-text blocks: creates blob URL and calls `onSelectMedia`, which sets temporary media state (`!id && isBlobURL(url)`) Also fixed a bug in the image block where `onUploadError` didn't clear `temporaryURL`, leaving the spinner visible on error. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
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. |
youknowriad
added
the
[Type] Bug
|
Size Change: +106 B (0%) Total Size: 6.87 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 6a0cc07. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22764478044
|
Contributor
|
Should this be backported to WP 7.0? There's related work for client-side media processing and fixes (e.g. #76514), so I just wondered if it should be included, too. (FYI: @adamsilverstein) |
6 tasks
adamsilverstein
added a commit
that referenced
this pull request
Mar 16, 2026
Already added by #76245 on trunk.
adamsilverstein
added a commit
that referenced
this pull request
Mar 17, 2026
* Enable server-side format conversion for HEIC uploads When uploading HEIC files, the client delegates sub-size generation to the server via generate_sub_sizes: true. However, convert_format defaulted to false, which disabled the image_editor_output_format filter on the server. This prevented HEIC sub-sizes from being converted to JPEG. * Fix server upload errors not surfacing to users Three issues prevented server-side upload errors (e.g. HEIC rejection) from reaching the user: 1. uploadItem's onFileChange crashed on empty arrays when the upload failed, preventing onError from ever being called. 2. The block editor provider's onError wrapper assumed errors were always objects, but received strings from the editor's mediaUpload wrapper. 3. The image block's onUploadError didn't clear temporaryURL state, leaving the spinner visible after an error. * Revert unneeded onError and temporaryURL changes Only the uploadItem onFileChange guard was needed to fix server upload error surfacing. * Revert "Revert unneeded onError and temporaryURL changes" This reverts commit 9db6be1. * Add inline comment for setTemporaryURL in onUploadError * Update packages/block-editor/src/components/provider/index.js Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-editor/src/components/provider/index.js Co-authored-by: Weston Ruter <weston@ruter.net> * Remove duplicate setTemporaryURL in onUploadError Already added by #76245 on trunk. --------- Co-authored-by: Weston Ruter <weston@ruter.net>
gutenbergplugin
pushed a commit
that referenced
this pull request
Mar 17, 2026
* Enable server-side format conversion for HEIC uploads When uploading HEIC files, the client delegates sub-size generation to the server via generate_sub_sizes: true. However, convert_format defaulted to false, which disabled the image_editor_output_format filter on the server. This prevented HEIC sub-sizes from being converted to JPEG. * Fix server upload errors not surfacing to users Three issues prevented server-side upload errors (e.g. HEIC rejection) from reaching the user: 1. uploadItem's onFileChange crashed on empty arrays when the upload failed, preventing onError from ever being called. 2. The block editor provider's onError wrapper assumed errors were always objects, but received strings from the editor's mediaUpload wrapper. 3. The image block's onUploadError didn't clear temporaryURL state, leaving the spinner visible after an error. * Revert unneeded onError and temporaryURL changes Only the uploadItem onFileChange guard was needed to fix server upload error surfacing. * Revert "Revert unneeded onError and temporaryURL changes" This reverts commit 9db6be1. * Add inline comment for setTemporaryURL in onUploadError * Update packages/block-editor/src/components/provider/index.js Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-editor/src/components/provider/index.js Co-authored-by: Weston Ruter <weston@ruter.net> * Remove duplicate setTemporaryURL in onUploadError Already added by #76245 on trunk. --------- Co-authored-by: Weston Ruter <weston@ruter.net>
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?
Add visual feedback (spinner) when dragging files onto existing media blocks to replace them. Currently only initial uploads show a spinner—replacements happen silently.
Why?
When users drag-and-drop a file onto an existing image, cover, or media-text block, the media upload can take several seconds, but there's no loading indicator. Users don't know if anything is happening, making the experience feel broken or slow.
How?
Added
onFilesPreUploadcallback to MediaPlaceholder in all three affected blocks (image, cover, media-text). This callback creates a blob URL immediately when files are dropped, which triggers the existing spinner/opacity UI (temporaryURLstate +is-transientCSS class).Also fixed a bug in the image block where
onUploadErrordidn't cleartemporaryURL, leaving the spinner visible on error.Testing Instructions
Testing Instructions for Keyboard
/imagecommand)