Blocks: Add Upload button to audio and video blocks

[gziolo]

Description

As suggested by @youknowriad here:

Add an "Upload" button to the audio and video blocks (similar to the image and gallery blocks)

This PR adds the Upload button for the audio and video blocks.

I also added a few refactorings to make code more generic and work properly with the new requirements. mediaUpload util accepts a type of file as a param to work with audio and video formats.

I also fixed a broken behavior of the edit button which did nothing when the placeholder was displayed in the audio or video block. I updated the logic to display the button only when the file is selected.

This should conclude pre-requirements to make it possible to merge #5211.

How Has This Been Tested?

Manually:

• Make sure there are no regression for the following blocks: image, gallery and cover image.
• Use new Upload button to add a new audio file in he audio block.
• Use new Upload button to add a new video file in the video block.
• Make sure that Edit button is not visible when in the edit mode for audio and video blocks.

Screenshots (jpeg or gifs if applicable):

Please ignore wide and full buttons in the block's toolbar - I used 2 different websites to create screenshots :)

Audio - file selected

Audio - editing

Before

After

Video - file selected

Video - editing

Before

After

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[youknowriad]

Do you think, this could be renamed "MediaPlaceholder" to make the experience even more similar? and provide a media type?

[gziolo]

As a next iteration, we could bring those two closer by doing proper refactoring. Actually, this was the first step I took, but then I backed off, because I didn't want to change too much in one PR.

[gziolo]

Also see my comment #5431 (comment), you were too fast :)

[youknowriad]

Should we rename onImagesChange => onChange or onMediaChange

[gziolo]

I missed that :(

[gziolo]

I picked onFileChange to reflect the param's description.

[gziolo]

Further improvements to consider

@karmatosed and @jasmussen - are there any plans to iterate further on the media-related blocks? Speaking myself, it seems like this PR bring images and other media formats closer in terms of UX. However, there are a couple of things we could tackle in the follow-up PRs I noticed when testing my changes:

• 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 image using url similar to what we propose in case of audio or video?
• Should we make Edit button work in a similar fashion for all media types?

[jasmussen]

are there any plans to iterate further on the media-related blocks?

Media is sort of the forgotten space. Yes, there are many plans to improve, including a few tracked in #4108, #2439 and #5256.

It's not for a lack of desire to improve, unify, enhance things around media related blocks, it's purely a lack of resources, and so because they work, they haven't been prioritized.

Your list looks good, though, and I'd thumb up those improvements if they were made.

[gziolo]

Your list looks good, though, and I'd thumb up those improvements if they were made.

It's not for this week, but I will keep it on my todo list :)

[karmatosed]

👍 for this and also agree, this is a small but significant media improvement we can make.

[gziolo]

Opened a follow-up issue as discussed above: #5456.