Playlist

Embed a simple playlist.

Name: core/playlist
Category: media
API Version: 3
Block Type: Hybrid (static save + server enhancements)
Keywords: music, sound

Block Relationships

Allowed inner blocks:
– core/playlist-track

Attributes

Defined via the attributes property in block.json.

Attribute	Type	Default	Description
`type`	`string`	`"audio"`	—
`order`	`string`	`"asc"`	—
`showTracklist`	`boolean`	`true`	—
`showImages`	`boolean`	`true`	—
`showPlayButtonArtwork`	`boolean`	`false`	—
`showArtists`	`boolean`	`true`	—
`showNumbers`	`boolean`	`true`	—
`showTrackLength`	`boolean`	`true`	—
`waveformStyle`	`string`	`"bars"`	Enum: `bars`, `mirror`, `line`, `blocks`, `dots`, `seekbar`
`waveformColor`	`string`	—	—
`waveformGradient`	`string`	—	—
`waveformBackgroundColor`	`string`	—	—
`waveformBackgroundGradient`	`string`	—	—
`caption`	`string`	—	—

Supports

Defined via the supports property in block.json.

anchor: true
align: true
color:
- gradients: true
- link: true
interactivity: true
spacing:
- margin: true
- padding: true
typography:
- fontSize: true

Context

Defined via the usesContext and providesContext properties in block.json.

Provides context:

showArtists attribute showArtists
showImages attribute showImages

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

<!-- wp:core/playlist {"caption":"Sample playlist"} -->
<figure class="wp-block-playlist">
    <ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers">
        <!-- wp:core/playlist-track {"id":123,"src":"https://example.com/audio.mp3","album":"Example album","artist":"Example creator","image":"https://example.com/track-image.jpg","imageAlt":"Track image","length":"3:21","title":"Sample track"} /-->
    </ol>
    <figcaption class="wp-element-caption">Sample playlist</figcaption>
</figure>
<!-- /wp:core/playlist -->

Source

block.json (reference)
Source directory — browse edit.js, save.js, index.php, and more.

In this article