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:

https://github.com/WordPress/gutenberg/assets/25607244/36aaee6f-622d-4c57-9731-5e104d38d48d

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 https://github.com/WordPress/gutenberg/issues/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:

https://github.com/WordPress/gutenberg/assets/25607244/36aaee6f-622d-4c57-9731-5e104d38d48d

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 ?

[jasmussen]

Yes, that would potentially work. We'd probably use the existing aspect ratio control which doesn't yet have a proper counterpart in Figma. It's a dropdown, but it's close enough:

If need be, it'd default to "1:1".

You might want to call the "Settings" panel "Dimensions" instead. It may be a stretch, since they are properties for an aspect of a single block, rather than just block-wide controls, but Dimensions is where Cover block places the aspect ratio. Those are small details, though, that can easily be worked out in a PR, or a followup.

@docpop would you mind if I edit the original issue here to include Cris' mockups? That'll let me add the "Needs dev" label and signal boost this as being ready for someone to take a look at, without necessarily having to find the latest mockup in the commentary.

[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 https://github.com/WordPress/gutenberg/issues/56837#issuecomment-2182692930, 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 (https://github.com/WordPress/gutenberg/issues/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: