Playlist block

docs/reference-guides/core-blocks.md

@@ -543,6 +543,28 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 -	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** slug
 
+## Playlist
+
+Embed a simple playlist. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist))
+
+-	**Name:** core/playlist
+-	**Experimental:** true
+-	**Category:** media
+-	**Allowed Blocks:** core/playlist-track
+-	**Supports:** align, anchor, color (background, gradients, link, text), interactivity, spacing (margin, padding)
+-	**Attributes:** caption, currentTrack, order, showArtists, showImages, showNumbers, showTracklist, tracks, type
+
+## Playlist track
+
+Playlist track. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist-track))
+
+-	**Name:** core/playlist-track
+-	**Experimental:** true
+-	**Category:** media
+-	**Parent:** core/playlist
+-	**Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~
+-	**Attributes:** blob, id, src
+
 ## Author
 
 Display post author details such as name, avatar, and bio. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author))

lib/blocks.php

@@ -31,6 +31,8 @@ function gutenberg_reregister_core_block_types() {
 				'more',
 				'nextpage',
 				'paragraph',
+				'playlist',
+				'playlist-track',
 				'preformatted',
 				'pullquote',
 				'quote',
@@ -88,6 +90,8 @@ function gutenberg_reregister_core_block_types() {
 				'post-author.php'                  => 'core/post-author',
 				'post-author-name.php'             => 'core/post-author-name',
 				'post-author-biography.php'        => 'core/post-author-biography',
+				'playlist.php'                     => 'core/playlist',
+				'playlist-track.php'               => 'core/playlist-track',
 				'post-comment.php'                 => 'core/post-comment',
 				'post-comments-count.php'          => 'core/post-comments-count',
 				'post-comments-form.php'           => 'core/post-comments-form',

packages/block-library/package.json

@@ -30,6 +30,7 @@
 		"./file/view": "./build-module/file/view.js",
 		"./image/view": "./build-module/image/view.js",
 		"./navigation/view": "./build-module/navigation/view.js",
+		"./playlist/view": "./build-module/playlist/view.js",
 		"./query/view": "./build-module/query/view.js",
 		"./search/view": "./build-module/search/view.js"
 	},

packages/block-library/src/editor.scss

@@ -31,6 +31,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./playlist/editor.scss";
 @import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";

packages/block-library/src/index.js

@@ -74,6 +74,8 @@ import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
+import * as playlist from './playlist';
+import * as playlistTrack from './playlist-track';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
 import * as postAuthorBiography from './post-author-biography';
@@ -239,6 +241,11 @@ const getAllBlocks = () => {
 		blocks.push( formSubmissionNotification );
 	}
 
+	if ( window?.__experimentalEnableBlockExperiments ) {
+		blocks.push( playlist );
+		blocks.push( playlistTrack );
+	}
+
 	// When in a WordPress context, conditionally
 	// add the classic block and TinyMCE editor
 	// under any of the following conditions:

packages/block-library/src/playlist-track/block.json

@@ -0,0 +1,34 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/playlist-track",
+	"title": "Playlist track",
+	"category": "media",
+	"parent": [ "core/playlist" ],
+	"description": "Playlist track.",
+	"keywords": [ "music", "sound" ],
+	"textdomain": "default",
+	"usesContext": [ "showArtists", "currentTrack" ],
+	"attributes": {
+		"blob": {
+			"type": "string",
+			"role": "local"
+		},
+		"id": {
+			"type": "number"
+		},
+		"src": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"reusable": false
+	},
+	"editorStyle": "wp-block-playlist-track-editor",
+	"style": "wp-block-playlist-track"
+}