Improve consistency of empty states for media blocks

[sarahmonster]

For the most part, the media blocks use pretty consistent empty states, but there are a few areas where they could be fine-tuned.

Image

Cover image

Gallery

Video

Audio

File

Suggestions

1. The "Use URL" option is great. Can we use it for all media blocks?

2. The copy is a bit jargony—not everyone understands URL. Can we make this a bit friendlier? Additionally, are there accessibility concerns with using a placeholder instead of a label here? Something along these lines, perhaps:

3. "Upload" is very desktop-centric. Could we use "add" instead?

4. Can we improve the format of this sentence, used across all blocks here? "Drag an audio, upload a new one or select a file from your library." There are actually four options for [most] blocks: link, upload, drag, and select from library, but the first three are more or less the same effect. Perhaps instead "Add a new [whatever] file or select a file from your library."?

[michelleweber]

+1 for changing "Drag an audio, upload a new one or select a file from your library." I'd still specify all the options, though to be super clear. I'm thinking something like:

Add a new file to your media library -- you can drag and drop it here, or click "Add" to select one -- or choose a file you've already added.

Add a new file to your media library -- you can drag and drop it here, or click "Add" to select one -- choose a file you've already added, or insert a link to the file.

On the "upload" point -- am I not still uploading a file to my site when I add it via the app? It wouldn't occur to me that this work is desktop-specific, so I would love to understand more. And does the "drag a file" instruction have the same problem re: desktop-centricness? Does mobile actually need a whole other set of copy?

[kjellr]

Add a new file to your media library -- you can drag and drop it here, or click "Add" to select one -- or choose a file you've already added.

This is getting a little too long for my taste, and it's missing the URL option... I wonder if we can keep it light, and let the buttons/fields speak for themselves?

On the "upload" point -- am I not still uploading a file to my site when I add it via the app? It wouldn't occur to me that this work is desktop-specific, so I would love to understand more.

Yeah, I think upload is fine here. Even on mobile, you're uploading.

does the "drag a file" instruction have the same problem re: desktop-centricness? Does mobile actually need a whole other set of copy?

This does feel a little desktop-centric. Swapping out the copy on mobile might be a good route to take.

[michelleweber]

It looked like some blocks include the URL and some don't, so there are two versions. That said, yeah, it is longer. We can go with Sarah's "Add a new X file here, or pick one from your media library."

[kjellr]

It looked like some blocks include the URL and some don't, so there are two versions.

Ah, sorry — I somehow missed that second version.

We can go with Sarah's "Add a new X file here, or pick one from your media library."

Sounds good to me. 👍

[kjellr]

Hey folks! Just want to confirm the phrasing here. Most of these have URL options, and I think it's getting little wordy:

cc @michelleweber

[michelleweber]

I'd delete the "here" to save a few characters. Seeing it now, it's not needed. "Pick one from your media library" could also be "browse your media library."