Gutenberg: Add Block: Audio

[jasmussen]

Splitting this out from #283 .

Attributes

• None, Left, Right, Center, Full Width.
• Caption

States

Placeholder:

Neutral:

Selected:

[westonruter]

See also the new Audio widget which is now in trunk:

• https://github.com/WordPress/wordpress-develop/blob/master/tests/phpunit/tests/widgets/media-audio-widget.php
• https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/js/widgets/media-widgets.js
• https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/js/widgets/media-audio-widget.js

[timmyc]

@jasmussen should this block be similar to the audio widget where we allow users to select audio from the library, or are you thinking of just having the URL input?

[jasmussen]

It was designed as a replacement for the audio shortcode, which allows you to hotlink URLs. But maybe it should indeed be the new widget, I like the idea of not having two blocks that do the same. Can you insert a sound file from a URL in the widget?

[timmyc]

You can insert a url in the audio widget, it is kind of buried in the media modal though:

Seems like your original design is much quicker to insert the URL - I can pursue that in the first iteration of this block.

[westonruter]

It seems the main thing missing is selecting the file from the media library.

Beware, however, that there are many more inspector-style settings for audio, including the selection of alternate HTML5 audio sources, configuring preloading, looping, and autoplay:

[jasmussen]

Hmm. Maybe it does make sense to have a separate "Embed Music" block, or someting in that vein. I can't quite wrap my head around it.

The thing is, I think there's a legit use case for both the one from the media library, and the one where you just have a URL that is hotlinked. As @iseulde suggested yesterday, a hotlinked URL is an embed, in a way.

CC: @melchoyce for thoughts also.

[melchoyce]

Maybe we could consider something like this:

[timmyc]

Quick screen grab of progress thus far, will hopefully push up a branch/create a pr later today:

[getsource]

The current progress screenshot makes it look a bit like the insert button is referencing the URL entry box.

I think the route @melchoyce suggested with having a separator in between the two options makes it clearer what the controls will do.

Edit: Sorry, I was really unclear which designs I was referencing in the original comment.

[mtias]

Done in #2299. Further improvements in new issues.