Audio components improvement

[fcoveram]

Problem

From the audio control update requested in #2602, the following components need to be updated to incorporate the button in a clean way.

• Box (large, and medium)
• Row (large, medium, and small)
• Global

Proposal

All components and their variants mentioned above have new spacing, size, and style values. Before diving into each, here is a set of all pages involved in the component update.

Search results. All content

Search results. Audio

Single result page

Components

Audio box

The new box audio component has the following main changes:

• The component was reduced to two variants: Large and Small. The medium size was not needed for Figma mockups.
• The audio control is size: small .
• Both large and small variants allow users to control the audio with the current play, pause, and repeat actions.
• Only large variant shows the wave area.
• All texts styles were updated to be consistent with other library changes.

Small	Large

Audio row

For the main audio component, the following changes were applied:

Size: Large

• The current variant named “Medium” is now “Large”. This change comes from the variant used per breakpoint.
• The audio control is size: large.
• Cover image is now 64px to match the audio control button
• All texts styles were updated to be consistent with other library changes.
• Spacings in the audio text info were updated.

Size: Medium

• The current variant named “Large” is now “Medium”. This change comes from the variant used per breakpoint.
• The audio control is size: medium.
• Cover image is the height formed by the sum of text info and wave area. In Figma it was set as 95px, but this should be revisited in code to meet a visual balance.
• All texts styles were updated to be consistent with other library changes.
• Spacings in the audio text info were updated.

Size: Small

• The current variant named “Large” is now “Medium”. This change comes from the variant used per breakpoint.
• The audio control is size: medium.
• Audio control is now placed in the left-bottom area to be consistent with the Audio box action.
• Cover image is the height formed by the sum of text info and wave area. In Figma it was set as 95px, but this should be revisited in code to meet a visual balance.
• All texts styles were updated to be consistent with other library changes.
• Spacings in the audio text info were updated.

Global player

• Cover image is now 48px to meet other library changes.
• The audio control is size: medium.
• There is a new style for the component border.
• In page context, the component has a new position to prevent the blending effect with the browser area. See the mockups shared above.
• There is a new style for long audio titles.
• The current style for playing changed to solve interaction issues.

Mockups

Figma file: Audio components improvement

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[fcoveram]

Labeling with high priority as it is blocking #2602

[fcoveram]

In addition to the new styles described above for the global player, here I show three interaction changes that keep the current core idea.

Closing the component

Closing the component is an VIconButton in size: small / style: transparent / color: gray.

Seeking audio time

The time-seeking interaction is now only in the wave area. The current player uses the whole yellow area to interact with time but it impedes going to the audio details page.

Going to audio single page

In line with the previous point, audio title is now a link to its single result page. In hover the link is underlined, like a regular link.

Component background color

Finally, reinforce that the component background is white. This fixes a style missed in the initial design.