Media Fields: add ThumbnailView fallback #74024
Conversation
…error handling - Added a FallbackView component to display an icon and filename when the image fails to load or is not of image type. - Integrated state management to track image loading errors. - Updated the storybook to include a sample media item representing a broken image, demonstrating the new error handling functionality.
ramonjd
added
[Type] Enhancement
There was a problem hiding this comment.
Pull request overview
This PR adds fallback handling to the MediaThumbnailView component to gracefully handle images that fail to load by displaying an icon and filename instead of a broken image.
Key Changes:
- Introduced error state tracking with
useStateto detect image load failures - Refactored component to extract fallback UI into a reusable
FallbackViewcomponent - Added
onErrorhandler to the<img>element to trigger fallback display - Added test data with a broken image URL to demonstrate the fallback behavior in Storybook
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/media-fields/src/media_thumbnail/view.tsx | Adds error handling with useState hook, extracts FallbackView component, and implements onError callback for graceful degradation |
| packages/media-fields/src/stories/index.story.tsx | Adds sampleMediaItemBrokenImage test fixture with a non-existent image URL to demonstrate fallback behavior |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { getMediaTypeFromMimeType } from '../utils/get-media-type-from-mime-type'; | ||
| import type { MediaItem } from '../types'; | ||
|
|
||
| function FallbackView( { |
There was a problem hiding this comment.
So this doesn't really add much to what was already there, it just forks when there's an image load error.
There was a problem hiding this comment.
I like it as a separate component, though, it improves readability 👍
|
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. |
| } | ||
| sizes={ config?.sizes || '100vw' } | ||
| alt={ featuredMedia.alt_text || featuredMedia.title.raw } | ||
| onError={ () => setImageError( true ) } |
There was a problem hiding this comment.
Oh, that's awesome! TIL: I did not know the img tag supported a native error handler like this... great stuff
|
Flaky tests detected in 6866a24. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20255361375
|
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Thanks for adding this in, it adds a really nice level of polish to the field 👍
Also looks good in Grid layout:
LGTM! 🚀
| import { getMediaTypeFromMimeType } from '../utils/get-media-type-from-mime-type'; | ||
| import type { MediaItem } from '../types'; | ||
|
|
||
| function FallbackView( { |
There was a problem hiding this comment.
I like it as a separate component, though, it improves readability 👍
What?
Related to #72612 (comment) and partial follow up to #73071
Update
MediaThumbnailViewto gracefully handle images that fail to load by falling back to icon + filename display.The fallback handles existing non-image file types, which is the current behaviour.
Why?
Just in case the image doesn't load, yo!
How?
Using the existing mediaType icon as fallback.
Testing Instructions
Fire up StoryBook
npm run storybook:devHead to http://localhost:50240/?path=/story/fields-media-fields--data-views-preview
Check that non-image icons are present (see the file icon above)