WIP Add a playlist block #50243
Closed
WIP Add a playlist block #50243
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
|
Size Change: +2.14 kB (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5112865. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4955298622
|
Draft
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 basic POC for a playlist block that does not use audio blocks as inner blocks.
For #805
Why?
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, is that I picured 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 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.
Because users can turn the audio block caption on and off individually, the Tracklist option for hiding or showing artist names did not work.
It may be doable by adding a new attribute to the audio block and then updating it for all child blocks, depending on the parent block setting. But I am unsure how to update all child block attributes depending on the parent block setting.
If the Tracklist contained audio blocks but with a visually hidden audio element, users could turn the caption with the track information off, and nothing would be displayed in the editor, making the block difficult to select.
When the audio block is placed inside the playlist, it has an alignment option that does nothing.
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.
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, 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 my blocks simpler.
Yet another alternative is to create a "text only" variation of the playlist block (where the text is the track information). One that can only be inserted into the playlist.
You may also be asking why I am not using the Interactivity directives for the functionality on the front. That is because I don't know enough about this feature yet.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast