Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the error in the image block to use snackbars #18978

Closed
wants to merge 1 commit into from

Conversation

@scruffian
Copy link
Contributor

scruffian commented Dec 6, 2019

Description

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.

Screenshots

Screenshot 2019-12-06 at 14 56 15

Types of changes

UI Improvement

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
@talldan

This comment has been minimized.

Copy link
Contributor

talldan commented Dec 9, 2019

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've added Needs Design Feedback and Needs Accessibility Feedback labels so that those teams can feed back.

@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Dec 9, 2019

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.

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Dec 9, 2019

@karmatosed Halloo!! 👋

@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:

via https://material.io/components/snackbars/#

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.

@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Dec 9, 2019

@ItsJonQ right now we use the default WordPress error styling by the block. I think if there is a will to create a snackbar type error it should be used throughout. My issue is this introduces a new pattern.

@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Dec 9, 2019

For context, adding what we have now as message options (including existing patterns):

image

@shaunandrews

This comment has been minimized.

Copy link

shaunandrews commented Dec 9, 2019

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.

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.

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

ItsJonQ commented Dec 9, 2019

Thanks for the thoughts and context @karmatosed + @shaunandrews !

In that case, since the inline messaging alert exists, using it would probably be better.

As @shaunandrews had mentioned, having the prompt be localized to the block gives much better awareness of what went wrong.

@scruffian

This comment has been minimized.

Copy link
Contributor Author

scruffian commented Dec 9, 2019

Seems like we have consensus, thanks all :)

@scruffian scruffian closed this Dec 9, 2019
@scruffian scruffian deleted the scruffian:update/image-error branch Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.