Blocks: Unify UX for the core blocks that manage media files

[gziolo]

Issue Overview

The changes introduced in #5431 bring images and other media formats closer in terms of UX. However, there are a couple of things we could further improve:

• Audio & video blocks don't support drag & drop for files. I was able to add that feature with a few lines of code when doing some explorations.
• The drop area doesn't take into account media type, we would need to add this capability.
• Should it be possible to specify using an image URL similar to what we have in case of the audio or video block?
• Should we make Edit button work in a similar fashion for all media types?

Screenshots / Video

Audio - file selected

Audio - editing

Gallery - files selected

Gallery - editing

Video - file selected

Video - editing

Related Issues and/or PRs

#5431

[karmatosed]

Thanks for looking into this it's so great to do unification like this.

Audio & video blocks don't support drag & drop for files. I was able to add that feature with a few lines of code when doing some explorations.
The drop area doesn't take into account media type, we would need to add this capability.

Let's have all support drag and drop, that's awesome.

Should it be possible to specify using an image URL similar to what we have in case of the audio or video block?

Yes, it should and I think that unifies. It was something requested but closed because of time. If we have time this is amazing!

Should we make Edit button work in a similar fashion for all media types?

Yes, more unification the better!

[GeekZebre]

I make an example. What do you think ?

[GeekZebre]

For the utility of the "Edit Button" -> my question is :
What is the difference between :

• block not selected
• block selected
• block in edit mode ?

[karmatosed]

@GeekZebre thanks for taking a look at this. I don't think that having the large buttons, along with a lot of 'or's' and everything centered improves things though.

In your visual example scanability is very difficult so let's look at how we can have unifying of the elements but not neutralise everything visually. In this case we are talking about unifying functionality over the design.

[karmatosed]

I have done some work on this to just make them all similar. One note I think is that with regards to unifying editing, lets make video and audio go to the media library, that seems a solid consistency.

[ahmadawais]

@karmatosed I think we should have three buttons

1. Upload
2. Add from media
3. Add External image → on click it opens up an input box to fill in the URL.

[gziolo]

Add External image

Add from URL - might fit better. Good idea BTW. It might be a better idea to design it as editable inline because you will have to be able to update it later.

[karmatosed]

I am not sure about having 3 buttons. I think it's nice to have this input for uses, over adding a step not needed. In test feedback people are really wanting this. I have a lot of concerns over visual confusion with 3 same buttons, I am not super comfy with 2 same but comfier than 3 :)

One thing I am pondering is order of the actions. If we say 'drag or add from library' we should have the input below the buttons. That actually could work out very well visually too, going down in action priority.

[ahmadawais]

@karmatosed do you have the source design files that I can edit and let you know what I am talking about?

[karmatosed]

@ahmadawais feel free to just do a sketch if you want to visually show, it's easier than sharing files and being sure you have the application I use/libraries/fonts and so on. Just a rough doodle will work or even copy and pasting (I do that myself to save time on mocks when just want to throw an idea out).

I standby that I think visually showing the link box is a good idea for adding a URL, the issue I have is showing 3 actions, whilst hiding an interaction that in this case makes sense to surface and we already do.