Video block: consolidate error styling

[sarahmonster]

The video block currently suffers from a sort of mishmash of different error messages, reactions, and styles.

It would be ideal if we could audit all the error states, styles, and messaging across the new editor, but for now, I'm going to start with this one block.

The error styling in general feels a bit out of sync with the new editor, but it does match with the overall .org styling, which I suspect is the idea. I'm going to focus primarily on the copy, to ensure it's as helpful and jargon-free as possible.

I suspect there may be some error states I haven't managed to pull up as well—please feel free to include any I may have missed here!

Uploaded a file that's too big:

filename.mp4 exceeds the maximum upload size for this site.

Suggestion:

filename.mp4 is too big. Please upload a file smaller than [limit].

Empty file:

File is empty. Please upload something more substantial. This error could also be caused by uploads being disabled in your php.ini or by post_max_size being defined as smaller than upload_max_filesize in php.ini.

Suggestion:

Honestly, I'm sort of at a loss for how to make this one more user-friendly, and I'm not entirely sure how I managed to get it. What about:

It looks like you've uploaded an empty file. Please try again.

....plus a link to a more technical support page?

Unsupported file format

If I use the URL option, and link to a file that my browser doesn't support:

If I try to upload a file that my browser doesn't support, I don't get any kind of error at all, it just doesn't work at all:

Suggestion:

That file format isn't supported. Please upload a .mp4, .mov, or .wappu file.

Additional suggestions:

1. List supported file formats, if not in the empty state, then at least at the first error instance.
2. Instead of showing a browser error, show a custom error that's Gutenberg-styled.
3. We should always display an error when something hasn't worked.

[michelleweber]

Ooh, the "empty file" one is rough. I like your instinct to pare back on the detail and link to more info. How about something like:

It looks like you've uploaded an empty file -- double-check the file and try again. If the file definitely has content, there may be settings in your site's code that need tweaking.

Where "settings in your site's code" links to technical documentation.

I like your changes to the too big and unsupported file errors.