Playlist block

docs/reference-guides/core-blocks.md

@@ -543,6 +543,15 @@ 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
+-	**Category:** media
+-	**Supports:** align, anchor, color (background, gradients, link, text), spacing (margin, padding)
+-	**Attributes:** artists, ids, images, order, tracklist, tracknumbers, type
+
 ## 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,7 @@ function gutenberg_reregister_core_block_types() {
 				'more',
 				'nextpage',
 				'paragraph',
+				'playlist',
 				'preformatted',
 				'pullquote',
 				'quote',
@@ -88,6 +89,7 @@ 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',
 				'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

@@ -34,6 +34,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/index.js

@@ -74,6 +74,7 @@ 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 postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
 import * as postAuthorBiography from './post-author-biography';
@@ -239,6 +240,10 @@ const getAllBlocks = () => {
 		blocks.push( formSubmissionNotification );
 	}
 
+	if ( window?.__experimentalEnableBlockExperiments ) {
+		blocks.push( playlist );
+	}
+
 	// When in a WordPress context, conditionally
 	// add the classic block and TinyMCE editor
 	// under any of the following conditions:

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

@@ -0,0 +1,70 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/playlist",
+	"title": "Playlist",
+	"category": "media",
+	"description": "Embed a simple playlist.",
+	"keywords": [ "music", "sound" ],
+	"textdomain": "default",
+	"attributes": {
+		"ids": {
+			"type": "array"
+		},
+		"type": {
+			"type": "string",
+			"default": "audio"
+		},
+		"order": {
+			"type": "string",
+			"default": "ASC"
+		},
+		"tracklist": {
+			"type": "boolean",
+			"default": true
+		},
+		"tracknumbers": {
+			"type": "boolean",
+			"default": true
+		},
+		"images": {
+			"type": "boolean",
+			"default": true
+		},
+		"artists": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"interactivity": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
+	},
+	"editorStyle": "wp-block-playlist-editor",
+	"style": "wp-block-playlist"
+}