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:** album, artist, id, image, length, title, type, url
+
 ## 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/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,49 @@
+{
+	"$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": {
+		"id": {
+			"type": "number"
+		},
+		"type": {
+			"type": "string",
+			"default": "audio"
+		},
+		"album": {
+			"type": "string"
+		},
+		"artist": {
+			"type": "string"
+		},
+		"image": {
+			"type": "string"
+		},
+		"length": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"url": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"reusable": false
+	},
+	"editorStyle": "wp-block-playlist-track-editor",
+	"style": "wp-block-playlist-track"
+}

packages/block-library/src/playlist-track/edit.js

@@ -0,0 +1,244 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+import {
+	MediaPlaceholder,
+	MediaReplaceFlow,
+	MediaUpload,
+	MediaUploadCheck,
+	BlockIcon,
+	useBlockProps,
+	BlockControls,
+	InspectorControls,
+	RichText,
+} from '@wordpress/block-editor';
+import {
+	Button,
+	PanelBody,
+	TextControl,
+	BaseControl,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { audio as icon } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+const ALBUM_COVER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
+	const { id, album, artist, image, length, title, url } = attributes;
+	const showArtists = context?.showArtists;
+	const currentTrack = context?.currentTrack;
+	const imageButton = useRef();
+	const blockProps = useBlockProps();
+	const { createErrorNotice } = useDispatch( noticesStore );
+	function onUploadError( message ) {
+		createErrorNotice( message, { type: 'snackbar' } );
+	}
+
+	const onSelectTrack = useCallback(
+		( media ) => {
+			if ( ! media ) {
+				return;
+			}
+			setAttributes( {
+				id: media.id,
+				artist:
+					media.artist ||
+					media?.meta?.artist ||
+					__( 'Unknown artist' ),
+				album:
+					media.album || media?.meta?.album || __( 'Unknown album' ),
+				// Prevent using the default media attachment icon as the track image.
+				image:
+					media?.image?.src &&
+					media?.image?.src.endsWith( '/images/media/audio.svg' )
+						? ''
+						: media?.image?.src,
+				length: media.fileLength,
+				title: media.title,
+				url: media.url,
+			} );
+		},
+		[ setAttributes ]
+	);
+
+	function onSelectAlbumCoverImage( coverImage ) {
+		setAttributes( { image: coverImage.url } );
+	}
+
+	function onRemoveAlbumCoverImage() {
+		setAttributes( { image: undefined } );
+
+		// Move focus back to the Media Upload button.
+		imageButton.current.focus();
+	}
+
+	if ( ! id ) {
+		return (
+			<div { ...blockProps }>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					labels={ {
+						title: __( 'Track' ),
+						instructions: __(
+							'Upload an audio file or pick one from your media library.'
+						),
+					} }
+					onSelect={ onSelectTrack }
+					accept="audio/*"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					value={ attributes }
+					onError={ onUploadError }
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					name={ __( 'Replace' ) }
+					onSelect={ ( value ) => onSelectTrack( value ) }
+					accept="audio/*"
+					addToPlaylist
+					mediaIds={ id }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					value={ attributes }
+					onError={ onUploadError }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Artist' ) }
+						value={ artist ? stripHTML( artist ) : '' }
+						onChange={ ( artistValue ) => {
+							setAttributes( { artist: artistValue } );
+						} }
+					/>
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Album' ) }
+						value={ album ? stripHTML( album ) : '' }
+						onChange={ ( albumValue ) => {
+							setAttributes( { album: albumValue } );
+						} }
+					/>
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Title' ) }
+						value={ title ? stripHTML( title ) : '' }
+						onChange={ ( titleValue ) => {
+							setAttributes( { title: titleValue } );
+						} }
+					/>
+					<MediaUploadCheck>
+						<div className="editor-video-poster-control">
+							<BaseControl.VisualLabel>
+								{ __( 'Album cover image' ) }
+							</BaseControl.VisualLabel>
+							{ !! image && (
+								<img
+									src={ image }
+									alt={ __(
+										'Preview of the album cover image'
+									) }
+								/>
+							) }
+							<MediaUpload
+								title={ __( 'Select image' ) }
+								onSelect={ onSelectAlbumCoverImage }
+								allowedTypes={ ALBUM_COVER_ALLOWED_MEDIA_TYPES }
+								render={ ( { open } ) => (
+									<Button
+										__next40pxDefaultSize
+										variant="primary"
+										onClick={ open }
+										ref={ imageButton }
+									>
+										{ ! image
+											? __( 'Select' )
+											: __( 'Replace' ) }
+									</Button>
+								) }
+							/>
+							{ !! image && (
+								<Button
+									__next40pxDefaultSize
+									onClick={ onRemoveAlbumCoverImage }
+									variant="tertiary"
+								>
+									{ __( 'Remove' ) }
+								</Button>
+							) }
+						</div>
+					</MediaUploadCheck>
+				</PanelBody>
+			</InspectorControls>
+			<li { ...blockProps }>
+				<Button
+					className="wp-block-playlist-track__button"
+					__next40pxDefaultSize
+					data-playlist-track-url={ url }
+					data-playlist-track-title={ stripHTML( title ) }
+					data-playlist-track-artist={ stripHTML( artist ) }
+					data-playlist-track-album={ stripHTML( album ) }
+					data-playlist-track-image-src={ image ?? null }
+					aria-current={ currentTrack === id ? 'true' : 'false' }
+				>
+					<RichText
+						tagName="span"
+						className="wp-block-playlist-track__title"
+						value={ title }
+						placeholder={ __( 'Add title' ) }
+						onChange={ ( value ) =>
+							setAttributes( { title: value } )
+						}
+						keepPlaceholderOnFocus
+						allowedFormats={ [] }
+						withoutInteractiveFormatting
+					/>
+					{ showArtists && (
+						<RichText
+							tagName="span"
+							className="wp-block-playlist-track__artist"
+							value={ artist }
+							placeholder={ __( 'Add artist' ) }
+							onChange={ ( value ) =>
+								setAttributes( { artist: value } )
+							}
+							keepPlaceholderOnFocus
+							allowedFormats={ [] }
+							withoutInteractiveFormatting
+						/>
+					) }
+					<span className="wp-block-playlist-track__length">
+						{ length && (
+							<span className="screen-reader-text">
+								{
+									/* translators: %s: Visually hidden label for the track length (screen reader text). */
+									__( 'Length:' )
+								}
+							</span>
+						) }
+						{ length }
+					</span>
+					<span className="screen-reader-text">
+						{ __( 'Select to play this track' ) }
+					</span>
+				</Button>
+			</li>
+		</>
+	);
+};
+
+export default PlaylistTrackEdit;

packages/block-library/src/playlist-track/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { audio as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );