Block audit: Audio

[sarahmonster]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Audio
Description: Embed an audio file and a simple audio player.
Category: Common blocks
CSS class: wp-block-audio in frontend or editor
Can be converted to: file

States

Empty:

Selected:

With a caption:

With a caption and right-aligned:

Unselected:

Placeholder:

Primary (toolbar) settings

Align: left, centre, right, edit
For captions: bold, italic, strikethrough, link

Secondary (sidebar) settings

Audio Settings: Autoplay, Loop, Preload
Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Bugs/errors

Individual issues will be opened for these soon

• Same float issues as image block. (Left- or right-aligning block-level elements leads to unexpected behaviour #8293) Here, they're actually a bit worse, because the left- and right-aligned versions of the player are so small, it becomes impossible to select anything. (Especially if you have a caption!)

• Converting to a file isn't undoable via the toolbar, and also causes issues with the edit icon moving from the right to the left. (@kjellr, 2/28/19: Unable to reproduce in master, so crossing this out for now.)

• Converting a formatted caption to a file creates some weird JS [object Object]-y-ness. (Converting from an audio block with a formatted caption to a file block results in an incorrect file link #7626)

• Setting an audio file to display full-width (which, honestly, feels a bit like an odd choice) causes it to overflow its container. (Audio block: setting alignment to full width causes horizontal scroll #8717)

Suggestions

Individual issues will be opened for these soon

• What does "Preload" mean? It gives the options for Auto|Metadata|None. (Audio "Preload" settings copy in the editor are unclear #7726)

• Good to see that Autoplay is untoggled by default. It could be nice to add a little note, a la colour contrast warnings, when people toggle this, to warn them to be careful autoplaying anything lest they annoy their users. (Audio and Video Block: Consider adding an accessibility notice to the autoplay option.  #13550)

• I didn't expect left- and right-aligning the block to change the layout of the audio player so dramatically. (@kjellr: Thankfully, this is alleviated somewhat by the fact that the editor mimics the front end: at least you'll get to see the change right away)

• Empty state could be improved from a consistency standpoint. (Improve consistency of empty states for media blocks #8409)

[n2questdev]

How to prohibit download option? I don't want users to download my audio files. Please suggest..

[kjellr]

All of the bugs/errors noted here have been filed as individual issues.

I'm not going to open an individual issue for that last suggestion at this point, but it's recorded here for reference. If we want to pursue in the future, we can open a new issue.

Closing this in the meantime. 👍

[carolynrosner]

Like ajuluri above, I'd like to see a way to disable audio file downloading by hiding the control at far right. I tried to do it with CSS but there is no way to target that one behavior. I have not found a plugin that does the job either. Please consider reopening this issue. Thanks.