Add retry logic, network resilience, and missing image sizes UI for media uploads#76765
Add retry logic, network resilience, and missing image sizes UI for media uploads#76765adamsilverstein wants to merge 3 commits intotrunkfrom
Conversation
Adds automatic retry with exponential backoff for transient upload failures (network errors, timeouts, server errors). Also adds a hook to detect and regenerate missing image sub-sizes when the editor loads. Key features: - ErrorCode enum for error classification and retry decisions - Exponential backoff with jitter to prevent thundering herd - PendingRetry status and retry selectors for state tracking - useMissingSizesCheck hook for missing image sub-size detection - queueMissingSizeGeneration action for client-side sub-size generation Depends on #74917 for error handling infrastructure. Co-Authored-By: Claude Opus 4.6 (1M context) <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. |
|
Size Change: +3.22 kB (+0.04%) Total Size: 7.67 MB
ℹ️ View Unchanged
|
- Remove automatic missing sizes generation on editor load - Add info icon indicator on images with missing sub-sizes in the editor - Add "Missing image sizes" panel in pre-publish checks with Generate action - Add network reconnection handling to pause/resume upload queue on offline/online Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
@andrewserong I took another pass at how we could handle resiliency by introducing some user facing UI for the case when uploads have failed for some reason and there are missing image sizes. I also added some resilience if the browser goes offline in the middle of processing and then comes back online, the processing should continue. Probably need some design feedback here, I wanted to give it a try to see how it feels verses to "automatic" missing size generation which might be unexpected for users as you pointed out. |
|
Flaky tests detected in 796baa6. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23450398987
|
|
@jasmussen Since you are digging into client side media, I would appreciate your feedback on the UI I am proposing here! |
|
@andrewserong I noticed during testing that it is now possible to save during uploads. previously this was prevented. Its really only possible to reproduce the broken upload issue if you save with a partially complete upload. If you just refresh the browser, the uploading image will not be saved in the page at all. I personally feel its better to prevent saving during image processing, in which case we can probably close this issue/pr as not planned since images should either upload completely or not be included in the post. What do you think? |
|
Follow up to fix post locking saving during uploads (again): #76971 |
|
I guess one other way you can wind up with missing image sizes is if you change themes, if a new theme adds some sizes, all existing uploads will lack the size. this would give users a way to generate those sizes on the fly, although admittedly its probably better suited for the media library as a bulk action. |
Yes, I'd agree, I think preventing saving during the upload should be the main priority. Being able to retry / add missing image sizes is a neat feature, though...
I think this is a good point. Perhaps with some of these ideas, it sort of points towards features we might like to add if/when we get to implementing client-side media processing in the media library proper. That could be a good place to have admin / utility-like behaviour to review missing sizes, perform bulk actions and the like 👍 |
|
Thanks for all of this work. What you are doing in general is fundamentally working on quality of life improvements for users, and relief for servers. Kudos, this is in-engine work that when it works well is invisible to most, but transformative. A thankless job, so here's a thank you. As has become a habit of mine, I'm going to ask a question that could easily fall into the category of dumb/obvious, based on lacking a full understanding, I hope in advance you'll forgive this. Today when you upload an image, n sizes will be created across thumbnail, medium, large, and any other sizes you might have registered, in addition to the full source. These are created by the server, always, and in many cases these dimensions will never be used. The new approach generates these on the client-side, when needed. Can these not just be created while you are publishing the post? This may already be the case, and what this extra PR does is explained here:
That the overlay is in addition to those generated on first publish. Is that correct? If yes, then my instinct as it has been in a couple of other issues, is to embrace a linting tool for additional visibility. There hasn't yet been a dedicated issue for this, so I went ahead and created one: #76996 In this case, that would mean any image block that's missing generated sizes would get its own Note with information about the issue. Possibly a button to fix it? TBD. I know that's a lot to start, and it doesn't need to be the only solution. But what I'd do in the meantime is make the error much more obvious: I'd possibly move the actual "Generate missing images" button the block toolbar, and add a red border around the image block itself. |
How are you imagining this? Triggering upload during "Publish" means the user will to have to wait for a while until everything is finished, i.e., they must not navigate away or close the page. That doesn't sound like a good experience to me. |
Thanks!
The sub sizes are created when you upload the image using the client side approach, just on the client instead of the server. So not on publish or when needed, but on upload.
Yes. This could happen if you change themes and the theme includes new sizes. The new sizes will be missing from all previously uploaded images. You can use a plugin to regenerate images and fill in those missing images. Deleting older/removed sizes is riskier, because there could be references to those images in published posts.
I like this idea generally, makes way more sense from a user from perspective - one button to click to fix all of the images. I'd put this button in the publish panel, but the toolbar could work as well. It would only show if images were missing sizes. I'm not sure about a red border idea - besides not being accessible, it feels a bit alarming. Missing images isn't really a huge issue - WordPress can and will substitute another image size. A small (red!) alert icon might work better, and only shown when using the feature (eg when you first click the button to fix it). |
Exactly why we process at upload, then the processing can happen in the background while the user continues working on their post. |




Summary
Fixes #76790
Enhances client-side media processing with three reliability improvements:
Missing Image Sizes — User Flow
Instead of auto-generating missing sizes silently on editor load, this PR gives users control:
Image Block — Info Icon Indicator
An info icon badge appears at the top-right corner of images with missing sub-sizes:
Popover — Generate Action
Clicking the icon opens a popover with a Generate link to create missing sizes:
Pre-Publish Panel — Missing Sizes Warning
The pre-publish panel shows a suggestion to generate missing sizes for all images:
Pre-Publish Panel — Generation In Progress
After clicking Generate, a spinner shows until all sizes are processed:
Retry Flow
flowchart LR A[Upload] --> B[Processing] B --> C{Success?} C -->|Yes| D[Complete] C -->|No| E{Retryable?} E -->|No| F[Failed] E -->|Yes| G{Attempts < 3?} G -->|No| F G -->|Yes| H[Wait with backoff] H -->|1s / 2s / 4s| BNetwork Resilience
flowchart LR A[Upload Queue] --> B{Browser Online?} B -->|Yes| C[Continue Processing] B -->|No| D[Pause Queue] D --> E[Wait for reconnect] E -->|online event| F[Resume Queue] F --> C C --> G[Complete]Missing Sizes User Flow
flowchart TD A[Editor Loads] --> B[Fetch attachment data via REST API] B --> C{Missing image sizes?} C -->|No| D[Normal editing] C -->|Yes| E[Show info icon on image] E --> F[User clicks icon] F --> G["Popover: Some sizes missing — Generate"] G --> H[User clicks Generate] H --> I[Fetch original image] I --> J[Process missing sizes client-side] J --> K[Sideload to server] K --> L[Invalidate cache & hide indicator] A --> M[User opens pre-publish panel] M --> N{Any images with missing sizes?} N -->|Yes| O["Show Missing image sizes panel"] O --> P[User clicks Generate] P --> Q[Process all missing sizes] Q --> R[Spinner until complete]Screenshots
icon

generate option

generating spinner

Test plan