Playlist: Improve audio conversion and track selection

[getdave]

What

Closes #80920
Closes #80921

• Allow Audio blocks to transform into a one-track Playlist, using the audio filename as the track title.
• Allow Playlist Track blocks to transform back into Audio blocks.
• Let people select multiple audio files from the Media Library without holding Shift or Command.

The dedicated Playlist Track icon has been split out to #80959.

Why

These changes make it easier to turn existing audio into a Playlist, add several tracks at once, and return an individual track to Audio when needed.

How

The Audio transform creates a Playlist containing a Playlist Track that retains the audio source, optional attachment ID, layout settings, and file name as the track title. The reverse transform restores an Audio block with the track source data. The Media Library flows use checkbox-style multi-selection.

Caveats

• Audio blocks do not retain the full media metadata required to populate Playlist Track fields such as artist, album, duration, and artwork. The transform uses the file name for the track title and preserves the available source data.

Testing Instructions

1. Add an Audio block and select an audio file.
2. Open the block toolbar’s Transform menu and choose Playlist.
3. Confirm the resulting Playlist contains a playable track using the same audio source and displays the audio filename as its track title.
4. Select the Playlist Track, open the block toolbar’s Transform menu, and choose Audio. Confirm the resulting Audio block uses the same audio source.
5. Add a new Playlist and open the Media Library. Click several audio files individually, without holding Shift or Command, then insert them.
6. Confirm every selected audio file is added as a track.
7. With an existing Playlist selected, use the toolbar’s Add control and repeat the multi-select check.

[getdave]

@jasmussen @fcoveram would it be possible to have a dedicated icon for the Playlist Track? The feedback is that having it use the same as the audio block might be confusing. Happy to be corrected/advised otherwise.

[github-actions]

Size Change: +280 B (0%)

Total Size: 7.81 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-library/index.min.js	356 kB	+280 B (+0.08%)

_{compressed-size-action}

[fcoveram]

While running the PR, I noticed that playing a track from a playlist block prevents playing a track from another playlist block. However, it does allow playing a single audio file at the same time. Notice in the last part of the following video how a track from a playlist and a single track are playing at the same time.

Audio.and.playlist.block.test.mp4

Regarding the icon, I know @jasmussen has something cooking.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Copilot.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Copilot.

Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jobthomas <jobthomas@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[getdave]

However, it does allow playing a single audio file at the same time.

@fcoveram I wasn't sure of the replication steps here. I'm also not completely clear. Are you saying you can play an Audio block at the same time as a Playlist track? Or is it something else? 🙏

[fcoveram]

Are you saying you can play an Audio block at the same time as a Playlist track?

Yes. And I can't play a playlist track when another one is already being played from another playlist block. I hope I'm explaining it correctly.

[getdave]

Are you saying you can play an Audio block at the same time as a Playlist track?

Yes. And I can't play a playlist track when another one is already being played from another playlist block. I hope I'm explaining it correctly.

@scruffian @jeryj This needs fixing separately from this PR.

[Copilot]

Pull request overview

Improves the Playlist block’s usability by enabling (1) transforming an Audio block into a one-track Playlist and (2) checkbox-style multi-selection when adding audio tracks from the Media Library.

Changes:

• Add an Audio → Playlist transform that creates a Playlist with a single Playlist Track preserving src/id/blob and mapping Audio caption to Playlist caption.
• Update Playlist / Playlist Track Media Library flows to use multiple="add" so users can click-select multiple items without modifier keys.
• Add/adjust unit tests to cover the new transform and multiple="add" behavior.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/block-library/src/playlist/transforms.js	Adds the core/audio → core/playlist block transform.
packages/block-library/src/playlist/test/transforms.js	Adds unit coverage for the new Audio → Playlist transform.
packages/block-library/src/playlist/test/edit-component.js	Updates mocks and asserts Media Library props for multi-select behavior.
packages/block-library/src/playlist/index.js	Wires the new transforms into the Playlist block registration.
packages/block-library/src/playlist/edit.js	Switches Media Library selection props to multiple="add" for Playlist flows.
packages/block-library/src/playlist-track/edit.js	Switches the “Add” MediaReplaceFlow to multiple="add" for Playlist Track.
packages/block-library/src/playlist-track/test/edit.js	Adds an assertion covering multiple="add" on the track “Add” flow.
packages/block-library/src/playlist-track/index.js	Changes the Playlist Track block icon (noted as a scope/description mismatch).
packages/block-library/CHANGELOG.md	Documents the Playlist enhancements (transform + multi-select).

[github-actions]

Flaky tests detected in a16daa2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31092811117
📝 Reported tests:

should load styles added through enqueue_block_assets in /test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js, passed after 1 failed attempt.

[scruffian]

Do we think its a good idea to backport this? On the one hand this would be a good addition to 7.1 but on the other hand things work fine without it, so it could go into 7.2 without delivering a bad experience, and we are risking introducing more bugs.

[scruffian]

While running the PR, I noticed that playing a track from a playlist block prevents playing a track from another playlist block. However, it does allow playing a single audio file at the same time. Notice in the last part of the following video how a track from a playlist and a single track are playing at the same time.

Which behaviour do you think is correct? Should we allow multiple playing, which could potentially have some utility but most of the time is just annoying, or prevent it, which in most cases will be more useful but does make the system more restrictive.

My instinct says we should prevent one block playing when another starts. That should probably be true for videos as well.

[fcoveram]

I agree that it can be annoying.

I would apply a systematic approach here. If playing multiple audio files is allowed, it should not distinguish between individual audio files and audio files in a playlist.

I'm leaning toward restricting it to playing one at a time. And apply this to videos as well.

[scruffian]

Thanks for the work on this, its looks great. I just have a couple of issues:

Firstly, the track name should take the name of the file - at the moment it ends up in the player, but the media name doesn't have it - is that possible to fix? The PR description says the name goes into the caption but the block doesn't have a caption anymore....

Secondly, I think we should also add a transform to go from a playlist track block back to an audio block. That can be a followup though.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Suppressed comments (1)

packages/block-library/CHANGELOG.md:10

• This release note claims a label change that this PR does not make: edit.js and its tests still use “Add track.” Remove this unrelated entry or include the corresponding code change.

-   Playlist: Shorten the track toolbar button label from "Add track" to "Add".

[t-hamano]

Audio to Playlist

It should be possible to transform multiple selected audio files into a single playlist.

Playlist to Audio

The transformation is not working. Following Copilot's review, I believe this transformation should be done on the Playlist block, not the Playlist track block.

[t-hamano]

I will soon start the release process for 7.1 RC1. Let's consider releasing this PR for RC2 if possible.

[t-hamano]

Suggested change

- Playlist: Shorten the track toolbar button label from "Add track" to "Add".

I don't think this is implemented in this PR.

[t-hamano]

Suggested change

	{
	type: 'block',
	blocks: [ 'core/audio' ],
	transform: ( audio ) => {
	return createBlock(
	'core/playlist',
	getPlaylistAttributes( audio ),
	[ createPlaylistTrack( audio ) ]
	);
	},
	},
	{
	type: 'block',
	isMultiBlock: true,
	blocks: [ 'core/audio' ],
	transform: ( attributes ) => {
	const [ firstAudio ] = attributes;
	return createBlock(
	'core/playlist',
	getPlaylistAttributes( firstAudio ),
	attributes.map( createPlaylistTrack )
	);
	},
	},
	{
	type: 'block',
	isMultiBlock: true,
	blocks: [ 'core/audio' ],
	transform: ( attributes ) =>
	createBlock(
	'core/playlist',
	{ ...attributes[ 0 ] },
	attributes.map( ( { blob, id, src } ) =>
	createBlock( 'core/playlist-track', {
	blob,
	id,
	src,
	title: getFilename( src ),
	} )
	)
	),
	},

These two transformations should be combined into a simpler one.

• Transformations with isMultiBlock set to true also support single-block transformations.
• sanitizeBlockAttributes automatically discards unnecessary attributes for the target block, so manual mapping should not be required.

[t-hamano]

Suggested change

	transform: (
	{ align, anchor, caption, style },
	[
	{
	attributes: { blob, id, src },
	},
	]
	) =>
	createBlock( 'core/audio', {
	blob,
	src,
	caption,
	...( align && { align } ),
	...( anchor && { anchor } ),
	...( style?.spacing && {
	style: { spacing: style.spacing },
	} ),
	...( id !== undefined && { id } ),
	} ),
	transform: ( { style, ...attributes }, [ track ] ) =>
	createBlock( 'core/audio', {
	...attributes,
	...( style?.spacing && {
	style: { spacing: style.spacing },
	} ),
	blob: track.attributes.blob,
	id: track.attributes.id,
	src: track.attributes.src,
	} ),