New block: Playlist

docs/reference-guides/core-blocks.md

@@ -588,6 +588,15 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 -	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** slug
 
+## Playlist
+
+Display an audio playlist. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist))
+
+-	**Name:** core/playlist
+-	**Category:** media
+-	**Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
+-	**Attributes:** autoplay, items, loop, showItemList
+
 ## 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

@@ -88,6 +88,7 @@ function gutenberg_reregister_core_block_types() {
 				'page-list.php'                    => 'core/page-list',
 				'page-list-item.php'               => 'core/page-list-item',
 				'pattern.php'                      => 'core/pattern',
+				'playlist.php'                     => 'core/playlist',
 				'post-author.php'                  => 'core/post-author',
 				'post-author-name.php'             => 'core/post-author-name',
 				'post-author-biography.php'        => 'core/post-author-biography',

packages/block-library/package.json

@@ -32,6 +32,7 @@
 		"./form/view": "./build-module/form/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-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";

packages/block-library/src/index.js

@@ -108,6 +108,7 @@ import * as queryPaginationPrevious from './query-pagination-previous';
 import * as queryTitle from './query-title';
 import * as queryTotal from './query-total';
 import * as quote from './quote';
+import * as playlist from './playlist';
 import * as reusableBlock from './block';
 import * as readMore from './read-more';
 import * as rss from './rss';
@@ -152,6 +153,7 @@ const getAllBlocks = () => {
 		// Register all remaining core blocks.
 		archives,
 		audio,
+		playlist,
 		button,
 		buttons,
 		calendar,

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

@@ -0,0 +1,61 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/playlist",
+	"title": "Playlist",
+	"category": "media",
+	"description": "Display an audio playlist.",
+	"keywords": [ "audio", "music", "sound", "tracks" ],
+	"textdomain": "default",
+	"attributes": {
+		"items": {
+			"type": "array",
+			"default": [],
+			"items": {
+				"type": "number"
+			}
+		},
+		"autoplay": {
+			"type": "boolean",
+			"default": false
+		},
+		"loop": {
+			"type": "boolean",
+			"default": false
+		},
+		"showItemList": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": false,
+				"style": true,
+				"width": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"editorStyle": "wp-block-playlist-editor",
+	"style": "wp-block-playlist",
+	"viewScriptModule": "@wordpress/block-library/playlist/view"
+}