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 oner 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 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. Select a track block and move it up and down the tracklist.

8. Delete a track block.

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

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

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

12. Select a 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

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 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

[carolinan]

A list of some known bugs:

• Multiselect:
  Moving more than one selected track causes a JavaScript error.
  Changing the track information using the sidebar options causes a JavaScript error.
  (The Replace option in the block toolbar works).

• When two instances of the same tracks are placed in the playlist, and one is the current track, then the editor and front shows different tracks as the current track. In the editor, it is the first of the two tracks. On the front it is the last.

• When two instances of the same tracks are placed in the playlist, the editor shows both items with a bold text style, which is a style used to indicate which track is the current track. On the front, only the actual current track uses bold.

• Tracks with no title, artist or album show placeholder texts in the editor but not the front.
  Update: I add a single placeholder for the title because I feel that it is a valid option to leave some fields like the album name blank.

I believe this needs to be the next step to solve this:

generate an array containing unique IDs for each track on the server, which can be used to know which audio is playing, which one is next, etc.