Add color and other style options to the Audio Block

[docpop]

What problem does this address?

There is no option for customizing the Audio Block. It should have style options, like other blocks.

What is your proposed solution?

The proposal you’ll see below aims to:

1. Work with each theme’s default color scheme and typography styles
2. Allow audio title and audio description customization
3. Let writers add a custom cover for each

Here's the prototype:

audio-block-lettre.mp4

Based on feedback, here's a slightly adjusted version of that:

This one uses a completely vanilla/unstyled audio player, similar to how the video block uses an unstyled video player. Title, description, and poster image, are taken from the media file's metadata in the media library, though can also be edited in the inspector.

Figma.

Props @docpop @crisbusquets for the work.

Issue updated Jun 20th.

Previous version of this issue

What problem does this address?

There is no option for customizing the Audio Block in WordPress. Most blocks offer the ability to customize that block by changing it's color, or the color of the font, or rounding the edges, or aligning within the block, but these are missing from the Audio Block's style tab.

What is your proposed solution?

Add the following options to the Audio Block and put them in the block's Style Tab.

• Change the background color of the block
• Change the color of the font
• Select the types of corners you'd like the block to have (rounded or default)
• Modify the text using the same typography options in a normal Paragraph Block

As an example, I've created a mockup of how the Audio Block Styles tab could appear:

[ramonjd]

This would be a neat feature!

Styling audio elements isn't, unfortunately, straight forward.

Adding color block supports/CSS doesn't change the colors of the controls or player itself

A customized HTML5 audio player, on the other hand, would allow greater control. There are a few in the plugins directory.

[crisbusquets]

Hi there,

I've been working on a design proposal to solve what is mentioned in this issue and also this #55715 (allow adding a featured image).

The proposal you’ll see below aims to:

1. Work with each theme’s default color scheme and typography styles
2. Allow audio title and audio description customization
3. Let writers add a custom cover for each

Here's the prototype:

audio-block-lettre.mp4

I'd love to hear your feedback :)

[jasmussen]

Nice, that looks great! I appreciate how you've used existing design tools like border and text color, making it work on any set of colors, but with additional customization options, presumably available both locally and globally. As far as I'm concerned, this is ready for a dev.

Nevertheless, let me ping a bit more broadly so we can get some visibility. CC: @WordPress/gutenberg-design

Thank you for the contribution!

[jarekmorawski]

Looks good to me! About the featured image, does it appear in the List View as a separate block? Could I move it to the left or right or rearrange the block's content in any way? If so, perhaps it'd be a Cover image block (or a variation of it) that'd inherit all of its awesome customization options?

[docpop]

This looks fantastic. Great job, @crisbusquets!

[crisbusquets]

Looks good to me! About the featured image, does it appear in the List View as a separate block? Could I move it to the left or right or rearrange the block's content in any way? If so, perhaps it'd be a Cover image block (or a variation of it) that'd inherit all of its awesome customization options?

Hi @jarekmorawski !

I envisioned it behaving as the Site Logo block, because it has the right ratio (usually audio covers are squares).
For alignment, I imagined we could keep it on the left side for the first iteration.

What do you think?

[jasmussen]

I wonder if technically it could have the aspect ratio control, but default to 1:1? Cris makes a great point that square is pretty uniformly standard for audio metadata images, but if you could optionally set a portrait orientation, it might be neat for audiobooks?

[jarekmorawski]

but if you could optionally set a portrait orientation, it might be neat for audiobooks?

Or author portraits for podcasts. 🤔 Does that mean it should be an inner block or a section in the parent block?

[jasmussen]

It can be built-in, just like it is in Media & Text. Though it would need a custom aspect ratio control on the parent block, "Thumbnail aspect ratio". That's likely still simpler than an inner-block you'd have to select. They're already hard to select since the whole clickable area is a button to upload.

[crisbusquets]

I've checked the Figma file and realized that I already had the Aspect Ration inside Settings, but for some reason I didn't include it on the prototype I shared above 😅

Would something like this work, @jasmussen @jarekmorawski ?