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:

[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 ?

[docpop]

Go ahead and add Cris's mockup.

[jasmussen]

I've gone ahead and updated this issue to ideally woo a dev to take on the task. Design feedback is still entirely welcome, but the issue should now be more actionable. Thanks for all the work!

[jameskoster]

Please correct me if I'm wrong, but I believe media files like audio and video accept a Featured Image (like posts and pages). With that in mind I'd consider omitting the cover image initially, or at least working out how to connect it with the featured image.

Given we have a dedicated Featured Image block, I wonder if we should lean more on patterns for its inclusion here.

It's not clear from the mockup, but ideally it would be possible to directly manipulate the title/description on the canvas, similar to Image captions. There may even be an argument for these to also be separate blocks (bits?), for greater design expression.

[docpop]

I don't think the current audio block allows you to add an image. If it does, I can't find it. As far as the cover image, I think it makes sense to ask the user to pick a cover image from their media library. If they'd like to use the same image as the featured image, they can choose it from their media library, This way, you wouldn't need two different workflows (one for using an image from the library and the other for selecting the featured image of that particular post). This does bring up a different question about adding an image; what happens if the image isn't square? Does it automatically crop from the center? Does the cover image match the aspect ratio of the selected image?

…

On Fri, Jun 21, 2024 at 5:49 AM James Koster ***@***.***> wrote: Please correct me if I'm wrong, but I believe media files like audio and video accept a Featured Image (like posts and pages). With that in mind I'd consider omitting the cover image initially, or at least working out how to connect it with the featured image. Given we have a dedicated Featured Image block, I wonder if we should lean more on patterns for its inclusion here. It's not clear from the mockup, but ideally it would be possible to directly manipulate the title/description on the canvas, similar to Image captions. There may even be an argument for these to also be separate blocks (bits?), for greater design expression. — Reply to this email directly, view it on GitHub <#56837 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJT3GAOGWGX5FO4M6SRXC3ZIQOO7AVCNFSM6AAAAABJNVOQGGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBSGY4TEOJTGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Doctor M. Popular 415-724-9267 www.docpop.org

[jameskoster]

I don't think the current audio block allows you to add an image. If it
does, I can't find it.

Sorry, I should have been more specific. I'm referring to featured images attached to media files:

My point is; if you insert an audio file from the media library, and that file has a featured image, that should probably be connected to the 'cover' option somehow.

[dhanson-wp]

one for using an image from the library and the other for selecting the featured image of that particular post

This would be my expectation as a user. That gives you flexibility to have a custom image or reuse the featured image.

I find the player controls to be too small, especially on mobile. What if there were some settings to control the size of the play/pause icon?

[jasmussen]

My point is; if you insert an audio file from the media library, and that file has a featured image, that should probably be connected to the 'cover' option somehow.

Good point. Here's an updated mockup to address that:

Note how, in order to make this issue more immediately actionable, this one also uses a completely vanilla/unstyled audio player, similar to how the video block uses an unstyled video player. I also slightly updated the inspector to orient itself similarly to the video player. If no-one objects, I'll update this issue to reflect this one!

Figma.

[jameskoster]

The 'Metadata' panel seems like a good idea, and will conceptually align with any future inspector-based media file editing UI (#55238).

On that note I wonder if it would make sense to re-use the featured image UI from the page inspector?

[jasmussen]

It could! For now I took inspiration from the existing Video block UI, ideally improvements we could apply to both: