Add Block: Playlist

[jasmussen]

Splitting this out from #283. See also #804.

Attributes

• None, Left, Right, Center, Full Width.
• Caption

States

Placeholder:

Neutral:

Selected:

[karmatosed]

Is the idea this is both video and audio? To make sure we have the same as existing editor we would need to have both video and audio playlists.

[StaggerLeee]

I never liked how it force itself to use 100% article content width. And it is most used case an User will put it in the Post.

Playlist is perfect for sidebars, widgets. And maybe some list of podcasts in Posts. Not even then it looks nice enlarged to 100% width.

Playlist could use a bit of new philosophy and rewrite of code. I mean not necessary prevent 100% width, nothing wrong with it. But rearange things, elements, to make it more modern and fitting.

I dont know, bigger thumbnail at the left of song, not at top.
Some new elements, etc... Not necessary any element anyone so desperately needs. But just to make it appear better when say it is 700px width in the Post. (Or worst, today modern websites without sidebars, and imagine Playlist 1000px - 1200px wide)

[StaggerLeee]

Here is how it looks compared to SoundCloud widgets. They use nothing extraordinary and revolutionary. Just different appearance and clever arrangements.

[youknowriad]

Some technical issues here:

• How to get the duration of an audio file (without some heavy JavaSript)
• we also need to load JavaScript to the frontend to be able to switch the played track (something we didn't do yet IIRC)

[paaljoachim]

I am wondering if we need to first off improve the current Audio block with among other focuses being able to use inner/child blocks as part of a Play list. Similar to Image blocks that are a part of the Image Gallery block being worked on. #25940

[gwwar]

This was discussed in the Feb 3, 2021 core-editor chat (https://wordpress.slack.com/archives/C02QB2JS7/p1612363563122800):

This issue is still a low priority for being implemented by the team, but the project welcomes contributions if someone has a passion for driving this issue forward. For next steps: one way to experiment, might be to start with a plugin. Note that the mock ups and approach in the summary need rethinking and updating. It may also help to close this issue and create a fresh one for clarity.

[maddisondesigns]

@gwwar Closing this issue and creating a new one will simply put it back even further in the queue. At least by keeping it open you can see how long people have been waiting for this functionality. It's disappointing that feature parity with the Classic Editor isn't being made a priority before new features are implemented. People are using this functionality today, so it's sad to see that there's little priority in making their transition to Gutenberg a lot easier. Users shouldn't have to find a plugin to replace functionality that has been in the Classic Editor for years, and for functionality that users were promised that would exist in the new editor. Not only is that a really bad suggestion, but you'd be forcing people to re-edit all their past content so as to make it work with any plugin they decided to use.

[ralphonz]

I agree with @maddisondesigns on this. The existing playlist functionality is vital part of existing music and podcast websites. New Gutenberg implementation of the playlist feature needs to be backwards compatible with existing content as much as possible. Currently, the only other options (other than 3rd party plugins) are to embed spotify or soundcloud playlists which both take users away from the site.

[kiwipaulrob]

Chiming in to support the request to bring back the functionality we used to enjoy.

…

On Fri, 5 Feb 2021, 10:59 pm Ralph, ***@***.***> wrote: I agree with @maddisondesigns <https://github.com/maddisondesigns> on this. The existing playlist functionality is vital part of existing music and podcast websites. New Gutenberg implementation of the playlist feature needs to be backwards compatible with existing content as much as possible. Currently, the only other options (other than 3rd party plugins) are to embed spotify or soundcloud playlists which both take users away from the site. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#805 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF6ELUY2SR3NMOES3MSPVCLS5O6QPANCNFSM4DLRUGRQ> .

[paaljoachim]

There are so many projects going on in Gutenberg. Adding a Playlist block is pretty low on that list.
At the moment the best method to get this into Gutenberg is dig up a developer with the skills and the want to add a Playlist block into Gutenberg. It might need to start out as a Playlist plugin and then gradually get added to the Gutenberg plugin.

In the mean time use this method to add a Playlist into Gutenberg.

1. Drag the audio files to the media library.
2. Go to the page/post you want a Playlist.
3. Insert the Classic block.
4. Click the Add Media icon. (first row left of the Toolbar Toggle icon.)
5. The Add Media modal popups up.
6. On the left side click Create audio playlist.
7. Select the audio files you want to add into a playlist.
8. Bottom right. Click the Create a new playlist button.
9. Reorder the tracks and adjust the name if you choose. Then click Insert audio playlist.
10. Notice the Playlist in the classic block.

Add-playlist-Classic-block.mp4

[kiwipaulrob]

Thanks for the playlist summary. This used to be a feature of Wordpress but as I recall, it was not working for a while. Good to see it back!

[JoshuaGoode]

We've been encountering use cases on WordPress.com where a block that utilizes the old playlist shortcode system would be very helpful. Especially since some themes make heavy use of the shortcodes and it is very difficult for new users to get the shortcodes they need.

[deborah86]

My suggestion would be for a user to be able to add links to the playlist so that files hosted elsewhere are available in the playlist block when it finally becomes available.

[celloexpressions]

Because playlist feature parity is a prerequisite to enabling the block editor for audio-oriented post types (and sites), I looked into creating block patterns with content embedded in classic blocks. This bizarrely works, and inserts a blank classic playlist "block" placeholder embedded in a classic block:

// Register a playlist pattern for improved UX until core supports a playlist block to replace the shortcode.
register_block_pattern( 'plugin-slug/playlist', array(
	'title' => __( 'Audio Playlist', 'text-domain' ),
	'description' => __(  'Audio playlist shortcode placeholder to simplify the workflow of inserting a classic block and then adding a playlist through the media modal. Playlist content is managed in the media model through the process introduced in WordPress 3.6.', 'text-domain' ),
	'content' => '[playlist]'
) );

Clicking on the placeholder's edit icon opens the media modal UI for uploading/selecting media and creating the playlist.

This could be added to core, or the pattern directory, as an interim improvement while we wait for a real playlist block. A downside is that if you "convert to blocks", then the inline preview goes away and you're back to a difficult-to-use shortcode block.

[cuemarie]

Had a chat today with a someone looking for this functionality on WordPress.com - still would be great to see.

The workaround we used (for their WordPress.com site) was to create a Media Playlist widget (legacy), then copy the shortcode from that widget and embed it into a page using the Shortcode block.

Next time, I might end up recommending the Classic block workaround, as that may be fewer steps, and doesn't require a different area of the site (widgets + page editor).

[jasmussen]

Given this issue has not seen movement for a long time, and the mockups are completely outdated, in order to see if it can gain traction I've added it as a suggestion for core blocks here: #58773 (comment), and close this out so when it gets traction there, we can open a new issue with fresh mockups.

[celloexpressions]

It is alarming to see this issue closed as "completed" without actually addressing the problem or providing a clear link to next steps (the linked issue above is very broad and only tangentially related).

There is a fundamental disconnect here between the functionality in the classic editor and the block editor. The classic editor offers a robust media library and playlist interface to give audio content an equivalent to image galleries. Playlists were introduced to WordPress core a decade ago in WordPress 3.9; playlists were identified as a feature gap before the block editor shipped and remain missing 5+ years later. Audio-oriented sites need to know the workarounds to continue using this core feature (hidden into a "classic block"), rely on plugins, or turn to platforms other than WordPress.

If the decision is to formally deprecate the playlist feature set, then that should be formally announced and documented. I'd rather see this core functionality exposed, or even better, integrated to the next iteration of the media library in an improved form. Quietly closing what was the oldest open issue in this repository without resolution has negative connotations.

While it's true that the mockups (and likely the technical work toward implementation) early in this issue are outdated, that should not be the only basis for tracking issues. Closing this issue silences the many voices that have contributed to the discussion here, largely advocating for parity with the classic editor and the continued need for playlist functionality.

[jasmussen]

Cool, reopened.

[fcoveram]

I was looking at #50664, and could be worth exploring showing the audio waves/bars in a more predominant way.

The audio results page made for Openverse and the Podcast index page for WordPress.org site have interesting designs. Here below are quick screenshots.

Openverse. Audio results

WordPress.org. Podcast index

[melchoyce]

Placeholder

After audio is selected in the media library

Playing a song

Some notes:

• I'm using the Openverse audio player here instead of the default browser player because it feels like it would be good for us to standardize our media players, but if that's an issue, we could use the existing player instead. The Openverse audio player doesn't have a volume control, but I don't think that's a dealbreaker.
• Instead of showing the album, artist, and current song in the playlist header, I've opted just for the album and artist. I think we should allow these to be editable in the case where someone is uploading audio files without associated metadata, or if they're creating a playlist of unrelated files.
• If the files being uploaded don't have album art, we should allow people to upload some.
• I've included the existing playlist settings that appear in the media library into the sidebar. We'll want to think more about what design settings should be included.
• In terms of the block toolbar, I've included width and caption settings.
• The block is currently mocked up with the audio block icon, but we could make a custom playlist icon.

You can see the full mockups in Figma.

[carolinan]

Who can provide me with the background information of and source code of this Openverse audio player? As far as I can tell, it is not a block.

[fcoveram]

One of the folks from @WordPress/openverse-maintainers might provide more accurate info, but so far I can share the storybook component and the Openverse repo.

[sarayourfriend]

@carolinan You are correct, it is not a block, the code is written in Vue, so would need to be rewritten in React to use as a block. (Edit: blocks do not use React)

Here is a direct link to the code for the audio track component: https://github.com/WordPress/openverse/tree/main/frontend/src/components/VAudioTrack

The player works in terms of different layouts that compose shared underlying components. You can see those layouts in this part of the code: https://github.com/WordPress/openverse/tree/main/frontend/src/components/VAudioTrack/layouts

Styles for Openverse's frontend are written with tailwind, so should be possible to convert 1-to-1 with SASS or CSS-in-JS (whichever WordPress blocks are using these days, it's been a while since I've looked 😅)

[melchoyce]

Okay, so in this case it might be best to use the default audio player for the playlist block, and then make a follow-up issue to upgrade the audio block to use the Openverse design.

Here's an updated mockup with the default Chrome player:

[mtias]

@sarayourfriend we don't use React on the frontend of blocks so this would need to be rewritten anyways in plain JS or with the interactivity API. Could be a good candidate for the latter since we can ensure it integrates with client navigation if it's turned on.