Playlist block #50664
Draft
Playlist block #50664
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
New Block
|
Size Change: +3.49 kB (+0.2%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
carolinan
commented
May 21, 2023
| src={ | ||
| ids[ trackListIndex ]?.image.src | ||
| ? ids[ trackListIndex ]?.image.src | ||
| : '/wp-includes/images/media/audio.png' |
There was a problem hiding this comment.
I need some help with coming up with a better way to add the placeholder image.
This image is missing when the file is uploaded and not selected from the Media Library.
carolinan
commented
May 21, 2023
| ids[ trackListIndex ]?.title | ||
| ), | ||
| } } | ||
| /> |
There was a problem hiding this comment.
dangerouslySetInnerHTML, safeHTML are needed because the Media Library and the "classic" playlist allows using some HTML here, like making the text bold.
|
Flaky tests detected in d9ff601. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10054929398
|
|
I am keeping this is a draft because I am seeing a problem where when you add the block and select more than one file from the media library, the track information with the artist, album and length is only added for one track, not all. |
|
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 |
|
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:
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. |
|
I can see if I can find time to help with a fresh mockup, btw, I've a few other things to handle but it's possible I can find time next week. Let me know if that would be helpful. |
|
It does not need to be prioritised for this release even, I wanted to show that it was not completely abandoned :) |
|
In any case, I'm subscribed here, happy to help! |
|
Is there room to pick this up for 6.7 or 6.8? I saw that there were discussions around styling the audio block. |
|
I think the next step might be to ping @WordPress/gutenberg-core, perhaps. |
|
I've added a new flag on the experiments page for Experimental blocks, because I don't think we need a separate experiment for each block (though I left the form blocks experiment in place, for now). Would you like to use it for the Playlist block? I'm going to be AFK for a few weeks, but will plan to take a closer look at this PR when I get back later in August! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
A proof of concept for an audio playlist block.
For #805
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:
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 issues I encountered were:
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 Playlist experiment from the Gutenberg 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.
View the front of the website.
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 Playlist experiment from the Gutenberg 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.
Screenshots or screencast
Coming soon