Playlist block

[carolinan]

What?

A proof of concept for an audio playlist block.
For #805

⚠️ THIS PR DESCRIPTION IS OUT OF DATE ⚠️ 13th of November

Of the suggestions listed here, #805 (comment)
I have not added the following feature:

If the files being uploaded don't have album art, we should allow people to upload some.

I like this suggestion, but I wanted to get the basic block working first.

Screenshots or screencast

playlist.mp4

Why?

The audio 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.

The reason why I did not use audio blocks as inner blocks for the tracklist -the list of tracks below the currently playing track- is that 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.

When testing if the audio block could be used, I found the following:
What we gain by using audio blocks for the tracklist is:

• The ability to add new tracks directly with an inserter.
• The ability to rearrange the items in the tracklist by moving the inner blocks.

The issues I encountered were:

• It is possible to create a template for the inner blocks that display the artist, song title, and track length in the caption of the audio block. But because users can turn the audio block caption on and off individually, the Tracklist option for hiding or showing artist names did not work.
• The autoplay option in the audio block is problematic since the user can set all inner blocks to autoplay, playing them all at the same time.
• When the audio block is placed inside the playlist, it has an alignment option that does nothing.
• The currently playing track should be highlighted in the Tracklist. The current track can be highlighted by adding a conditional CSS class to the inner block. But, to add and remove the class when the current song changes, the template would need to be re-rendered.

It may be possible to add a filter that removes the alignment, loop, and caption options from
the audio block when inside the playlist, but I did not attempt this because it felt hacky and not optimal.
An alternative to using audio blocks would be a separate inner "playlist item" block. I did not attempt this because, well, I keep being asked to keep the blocks simpler.

This PR replaces #50243.
This PR does not connect the playlist block to the Media Library playlist options nor adds a new media frame.
If you are not familiar with the playlist Media Library screen, you are not alone; several people I spoke to did not even know this screen existed, which is one of the reasons why I did not continue my attempt to add the media frame.
I mean this screen, which you can open by having multiple audio files, adding a classic block, and selecting "Add media" from the toolbar:

The issue I ran into was that I was not able to pass the data from the media library checkbox options to the editor, so the options did not match.

Testing Instructions

Enable the experimental blocks option from the Gutenberg > Experiments plugin menu.
Upload a couple of audio files to the media library.
For these files, add title, artist and album to some but not all.
Insert the playlist block in the editor.

1. There should be a 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 displayed and that the first file is presented above the tracklist.
3. Select the Edit button in the toolbar and upload an audio file. Confirm that the new track is added to the tracklist.
4. Please test the alignment options in the block toolbar.
5. Clicking on the play button in the audio element should play the track.
6. Clicking on a track in the track list should switch the tracks and show the selected track above the tracklist.
7. Try the sidebar options:

• 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 (The image can be added through the Media Library)
• Order -change the order of the tracks

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.

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 a list with 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 to the media library.
For these files, add title, artist, and album to some but not all.

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.
After selecting 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 again will select the next track in the tracklist and so on until you reach the last track.

Replacing or adding tracks:

Press Shift + Tab to open the block toolbar.
Use the arrow keys to navigate to the button named "Edit". 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

The block also has options in the block sidebar, 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.

Questions:

• Is it an issue that the screen reader does not announce the number of tracks in the tracklist? It is not apparent when you have reached the last track.

• I couldn't figure out how to navigate to the timeline, volume, or the audio element built-in menu when using the keyboard.

[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

[ramonjd]

Just dropping by to test the progress, as I'm excited about this block!

The innerblocks are feeling really natural to me. I love that I can reorder the tracks too. ❤️

Kapture.2024-11-14.at.14.59.21.mp4