Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Update the error in the image block to use snackbars #18978
Now we have snackbar messages available we can use this in the image block for notifying users when their upload fails.
How has this been tested?
Try uploading an SVG to the image block. You should see a snackbar message telling you that it didn't work.
Types of changes
I'm not convinced this is the right pattern for the image uploads, as for a fairly critical error the warning doesn't seem obvious enough. I think the snackbar works best for simple messages that are quick to read.
I think we need to take a step back and decide what type of messages we have in which situation. For example, we currently have 'by the block' errors for other issues like gallery and other blocks. If we work on a methodical plan here then we might end up with snackbars here, but we also might not.
I will note the use of snackbars tends to more 'single notice, closing' over having to know contents of error as @talldan points out.
cc @ItsJonQ to look at this from a system view.
@scruffian Thank you for making this update! Handling error states/edge-cases with UI interactions is so important.
Re: Snackbar interactions.
Using the Snackbar component to handle errors seems standard, example:
Whether it's the best/desired pattern, that I'm unsure of. For "oh no, something went wrong" type notifications, I found Snackbars to be too subtle for desktop UI. This is often because they appear much farther away from the interaction that triggered it.
The alternative UI to show for errors would be a dismissable alert banner, which is appropriately disruptive to let the user know something went wrong.
@karmatosed correct me if I'm wrong, but I don't think we have that global alert-like pattern in Gutenberg yet. The Snackbar appears to be the closest one. The catch-all for alert handling. (good and bad).
TLDR: I vote that this is okay for now.
It uses an existing pattern/component, and users can benefit from this notice until we establish improved patterns for escalating error handling.
I can't emphasize this enough. Material is super focused on mobile devices, often at the detriment of larger screens.
My opinion is that adopting the Snackbar pattern in web-native Gutenberg/Core is likely a mistake overall.