Playlist block

[carolinan]

What?

Adds a playlist and it's inner playlist track block.

Closes #805

Why?

The playlist block has been requested since 2017. Without the block, a playlist can be added by using the classic block, but that is overly complicated.

How?

For this block, I started with one media type, audio, rather than trying to build it for both audio and video because it would increase the complexity.

I pictured that the playlist should work similarly to the "classic" WordPress playlist.
Meaning:

• There would be only one audio element followed by an optional Tracklist with information like song title, artist, and track length.
• Clicking on a track in the Tracklist should play that track.
• When one track ends, the next track in the Tracklist should start.
• The block options should match the playlist options in the Media Library.

Testing Instructions

Audio file for testing: https://wpthemetestdata.files.wordpress.com/2008/06/originaldixielandjazzbandwithalbernard-stlouisblues.mp3

Enable the experimental blocks option from the Gutenberg > Experiments plugin menu.
Upload a couple of audio files through the Media Library.
Edit the files in the Media Library and add title, artist and album to some files but not all.
Add a featured image to at least one file.

Insert the playlist block in the editor.

1. There should be a media placeholder from which you can open the media library and select audio files. Hold down Shift to select more than one file.

2. Confirm that all selected files are inserted in the block and that the first file is presented at the top of the block, above the tracklist.

3. Select the Edit button in the toolbar of the Playlist block . Upload or select a one or more files from the media library. Confirm that the files you choose replaces the current items in the block.

4. Please test the alignment options in the block toolbar.

5. Clicking on the play button of the audio element should be disabled.

6. Clicking on a playlist track should select the inner block and the block settings sidebar should show the options for the track, not the playlist itself.

7. Confirm that you can select one or more playlist track blocks and move them up and down using the move down, move up, or drag options.

8. Confirm that there are no issues/errors when deleting or duplicating a playlist track block.

9. Select a playlist track block and edit the title, album and artist by editing the text directly on the inner block in the canvas.

10. Select a playlist track block and edit the title, album and artist by editing the text using the options in the sidebar.

11. Select a playlist track block and delete all text contents. Confirm that placeholder texts are showing.

12. Select a playlist track block and upload an album cover image.

13. Replace the album cover image.

14. Remove the album cover image.

15. Try the sidebar options: Select the parent playlist block.

• Show Tracklist -hides and shows the tracklist.
• Show artists in Tracklist -hides and shows artists in the tracklist if the artist info is available.
• Show number in Tracklist -hides and shows the number in the tracklist.
• Show images -hides and shows the image for the track.
• Order -change the order of the tracks.
• In the Styles tab, change colors, spacing and borders.

View the front of the website.

• Confirm that clicking the play button plays the track.
• When a track ends, the next track plays until you reach the last track.
• Clicking on a track in the tracklist switches the current track.
• The current track is marked in bold in the tracklist.
• Repeat this step with more than one playlist block placed on the same page.

Screen Readers

Description of the block:

The block has three different sections.
At the top, there is an image, for example, an album cover, which is set to decorative with an empty alt attribute.
Next to the image is information about the current track: Title, album, and artist.
Below is a native audio HTML element with the standard controls for playing, pausing, volume, etc.
Below the audio element is the tracklist.
It is a list with buttons inside. Each list item and button represents a track and the button text is the song title, artist, and the length of the track.
The currently selected track: The one that is at the top of the block, has aria-current=true.
Activating a button selects that track.

Instructions

(I have only tested these steps with VoiceOver on mac)

Enable the experimental blocks option from the Gutenberg > Experiments plugin menu.
Upload a couple of audio files through the Media Library.
Edit the files in the Media Library and add title, artist and album to some but not all.
Add a featured image to at least oner file.

Add a playlist block in the block editor.
Focus is moved to an upload button in the block's placeholder.
Instructions about uploading an audio file or selecting one from the media library are announced.
Pressing the right arrow key or the tab key moves the focus from the Upload button to the Media Library button. Each button opens its respective file selection flow.
Confirm that it is possible to select multiple files.
When clicking on the button with the text "Select", the modal for the Media Library is closed.

After adding the audio files, the focus is moved away from the block to the editor canvas and one has to navigate to the block again to select it. (I found this confusing, but learned that other media placeholders do the same)

Navigate to the block in the editor.
The block name is announced.
Pressing the down arrow key or the right arrow key moves focus to the audio element inside the playlist block.
The element type, the track title, the artist name, and the album name are announced if this information is available. Some tracks will only have a title. The same information that is announced is printed above the audio element, available to sighted users.

Pressing the spacebar or Enter key will play the track, and pressing the spacebar or Enter again will pause the track.
Let me know if playing the track in the editor should be disabled.

Pressing the down arrow key will move the focus to the button of the first track in the tracklist. The screen reader should announce the title, the band, the length of the track (if available), and the instructions "Select to play this track".

• Pressing the down arrow key now selects the richText element for editing the song title.
• Pressing the down arrow key now selects the second richText element, which is for editing the artist name.

Pressing the down arrow key again will select the next track in the tracklist, and so on, until you reach the last track.

Replacing or adding tracks

Because the tracks are inner blocks, there will be two block toolbars where you can edit tracks.
From the block toolbar of the inner block, you can replace the individual, single track.
From the block toolbar of the parent block, the playlist, you can add multiple new tracks at once.

Press Shift + Tab to open the block toolbar.
Use the arrow keys to navigate to the button named "Edit" or "Replace" respectively.
Activating the button opens a dropdown with two options: Open Media Library, and Upload.
Each option opens its respective file selection.
When the selection is complete, the screen reader announces that the media has been replaced.
(This is not accurate if you are adding a file, not replacing it, but I don't know if this can be solved?)
The focus is returned to the Edit button.

Block Sidebar

Both the playlist block and the inner track block has options in the block sidebar.

The Playlist has options both in the settings tab and styles tab.
Some of these options are visual, such as padding and margin and hiding the decorative image.
Optionally, test the first option in the settings tab, which is a toggle used to hide and show the tracklist:
With the block selected, press the tab key to move the focus to the sidebar.
Navigate to the block settings sidebar, past the Close button and the button that opens the Settings tab,
and the button that opens the Settings panel.
Find the checkbox option for "Show tracklist". Uncheck the checkbox.
Press the tab key repeatedly until you reach the "Skip to the selected block" button.
With the block selected, confirm that using the down arrow key does not move focus to the tracklist, since it has been turned off in the option.

The track has options in the settings tab.
With the block selected, press the tab key to move the focus to the sidebar.
Navigate to the block settings sidebar, past the Close button and the button that opens the Settings tab,
and the button that opens the Settings panel.
There will be three text input fields where you can update artist, album and title.
Below is an option for selecting an album cover image from the Media Library.

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/blocks.php
❔ lib/experimental/editor-settings.php
❔ lib/experiments-page.php

[jasmussen]

Thanks for the ping. Nice! Works well. Here's a GIF showing the placeholder, the inspector options, selecting items:

There are a couple of small things:

• Can probably add the border control to the inspector, rather than outputting a CSS file just for this block.
• In fact ideally we can remove as much of this CSS as possible, and rely on core block editor features. Both padding, block spacing, margin, border, radius, background, foreground colors come to mind, that would afford a great deal of pattern extensibility.
• Not sure if it's a box-sizing thing, but there's a curious behavior when applying padding to this one, moving it outwards instead of inwards, which is unlike how the Audio block works.

Quick instinct, this is not far from being able to work well. What do you think about next steps? Should I reopen the issue I just closed? Should we open a new one? Do you think it fits better as a canonical block? It may be a perfect candidate for a canonical block based on my gut instinct that fewer people in these days upload audio files and add them to playlists.

[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: @StaggerLeee, @anthonyburchell, @antpb, @kiwipaulrob, @keramch, @qantumthemes, @ralphonz, @X-Raym, @b-shchuko, @bricedupuy, @gwwar, @deborah86.

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: StaggerLeee, anthonyburchell, antpb, kiwipaulrob, keramch, qantumthemes, ralphonz, X-Raym, b-shchuko, bricedupuy, gwwar, deborah86.

Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: themightymo <themightymo@git.wordpress.org>
Co-authored-by: aaronjorbin <jorbin@git.wordpress.org>
Co-authored-by: Soean <soean@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: 1000camels <1000camels@git.wordpress.org>
Co-authored-by: kathrynwp <zoonini@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: celloexpressions <celloexpressions@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: maddisondesigns <ahortin@git.wordpress.org>
Co-authored-by: JoshuaGoode <verygoode@git.wordpress.org>
Co-authored-by: cuemarie <plari@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: melchoyce <melchoyce@git.wordpress.org>
Co-authored-by: sarayourfriend <sarayourfriend@git.wordpress.org>

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

[ramonjd]

Thank you for working on this @carolinan

I think it's a great idea and from what I've tested, the implementation is working well.

Just a couple of thoughts, feel free to ignore them.

What do you think about an "add track" button in the editor?

Another nice iteration would also be to be able to move tracks around in the list and delete them in place.

Also, I think it would be clearer to have the Track name as the main title, with the artist and album as the sub titles.

Before	After

[carolinan]

To manage the tracks individually, they would need to be inner blocks. Either the audio block with several modifications, or a new block. This is mentioned in the PR description.

I did not include this because the repeated feedback I get on my blocks is that they are not simple enough (like the details block).

[t-hamano]

Let's delete these temporary files 😄

[scruffian]

Ooops! Done in #75061