Media Upload Modal: Try an uploading state with popover in the footer#76228
Draft
andrewserong wants to merge 4 commits intotrunkfrom
Draft
Media Upload Modal: Try an uploading state with popover in the footer#76228andrewserong wants to merge 4 commits intotrunkfrom
andrewserong wants to merge 4 commits intotrunkfrom
Conversation
andrewserong
added
[Type] Enhancement
|
Size Change: +2.28 kB (+0.03%) Total Size: 6.88 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 46368dc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22749616764
|
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
1 participant
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.
Related to:
What?
This PR tries out an idea from #73085 (comment) of an uploading status button in the footer of the experimental medial upload modal.
It displays a spinner and uploading status. If you click on the button, you'll see a popover of all the files being uploaded.
If the popover is open, it'll stay open even after uploads have completed until you click out to close it.
If an error occurs during an upload, the popover will auto open to show the error state.
Why?
Right now (and to satisfy #74837) we use a snackbar notice when uploads begin, which feels a bit unresponsive and doesn't properly indicate "something is in progress".
Additionally, the idea of using transient/temporary items within the grid itself to flag in progress uploads is quite tricky as we don't necessarily know which level of pagination someone is on, so injecting a loading grid item isn't necessarily going to be reliable.
Also, as in other web apps like Google Drive, sometimes folks will want more granular data about the upload, its progress, and a place to pause or retry uploads (eventually). So even if we do add transient items in the grid to indicate uploading status, I think a footer status area here is going to be useful.
How?
This PR is still a work in progress, and I'm keen to hear feedback on how it feels / whether it's a decent direction. For now it's implemented by:
DataViewsPicker— this allows us to inject the footer upload status when we need toNote: I did have to refactor things a bit to get this working, so very happy for feedback on the approach, and if this looks dodgy.
If you'd like to hard-code the popover state so that you can see how it works without uploading lots of files, you can use the following snippet somewhere around line 193 of the
media-upload-modal/index.tsxfile. Basically, set the default of the setUploadingFiles useState to the following instead of an empty array:Testing Instructions
Enable the new media modal experiment:
Screenshots or screencast
2026-03-06.13.04.16.mp4