@wordpress/block-library 10.2.0 → 10.4.0

package/src/playlist/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	store as blockEditorStore,
@@ -16,7 +9,6 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	InspectorControls,
-	InnerBlocks,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
@@ -32,10 +24,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { __, _x } from '@wordpress/i18n';
 import { playlist as icon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
+import { createBlobURL } from '@wordpress/blob';
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { WaveformPlayer } from '../utils/waveform-player';
@@ -43,7 +32,10 @@ import { PlaylistContext } from './context';
 import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+const AUDIO_FILE_EXTENSION =
+	/\.(aac|aif|aiff|flac|m4a|m4b|mp3|oga|ogg|opus|wav|weba)$/i;
 const DEFAULT_WAVEFORM_STYLE = 'bars';
+const FILE_LIST_OBJECT_NAME = '[object FileList]';
 const WAVEFORM_STYLE_OPTIONS = [
 	{ label: _x( 'Bars', 'waveform style option' ), value: 'bars' },
 	{ label: _x( 'Mirror', 'waveform style option' ), value: 'mirror' },
@@ -53,6 +45,23 @@ const WAVEFORM_STYLE_OPTIONS = [
 	{ label: _x( 'Seekbar', 'waveform style option' ), value: 'seekbar' },
 ];
 
+function isFile( value ) {
+	return (
+		Object.prototype.toString.call( value ) === '[object File]' ||
+		( typeof File !== 'undefined' && value instanceof File )
+	);
+}
+
+function isAudioFile( file ) {
+	return file.type
+		? file.type.startsWith( 'audio/' )
+		: AUDIO_FILE_EXTENSION.test( file.name );
+}
+
+function getTrackIdentifier( track ) {
+	return track.id ?? track.src ?? track.blob;
+}
+
 const PlaylistEdit = ( {
 	attributes,
 	setAttributes,
@@ -77,7 +86,7 @@ const PlaylistEdit = ( {
 
 	const blockProps = useBlockProps();
 	const waveformPanelId = `${ clientId }-waveform`;
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
@@ -103,9 +112,12 @@ const PlaylistEdit = ( {
 	const waveformBackgroundGradientValue = waveformBackgroundGradient;
 	let waveformColorGradientChange;
 	let waveformBackgroundColorGradientChange;
-	function onUploadError( message ) {
-		createErrorNotice( message, { type: 'snackbar' } );
-	}
+	const onUploadError = useCallback(
+		( message ) => {
+			createErrorNotice( message, { type: 'snackbar' } );
+		},
+		[ createErrorNotice ]
+	);
 	const [ currentTrackClientId, setCurrentTrackClientId ] = useState( null );
 
 	const { innerBlockTracks } = useSelect(
@@ -152,31 +164,111 @@ const PlaylistEdit = ( {
 		}
 	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
 
-	const playlistContext = useMemo(
-		() => ( { currentTrackClientId, setCurrentTrackClientId } ),
-		[ currentTrackClientId, setCurrentTrackClientId ]
-	);
-
-	const onSelectTracks = useCallback(
+	const createTrackBlocks = useCallback(
 		( media ) => {
 			if ( ! media ) {
-				return;
+				return [];
+			}
+
+			let mediaItems = [ media ];
+			if (
+				Object.prototype.toString.call( media ) ===
+				FILE_LIST_OBJECT_NAME
+			) {
+				mediaItems = Array.from( media );
+			} else if ( Array.isArray( media ) ) {
+				mediaItems = media;
 			}
+			let hasInvalidFile = false;
+
+			const blocks = mediaItems
+				.map( ( mediaItem ) => {
+					if ( isFile( mediaItem ) ) {
+						if ( ! isAudioFile( mediaItem ) ) {
+							hasInvalidFile = true;
+							return null;
+						}
+
+						return createBlock( 'core/playlist-track', {
+							blob: createBlobURL( mediaItem ),
+							title: mediaItem.name,
+						} );
+					}
+
+					const track = getTrackAttributes( mediaItem );
 
-			if ( ! Array.isArray( media ) ) {
-				media = [ media ];
+					return track.src
+						? createBlock( 'core/playlist-track', track )
+						: null;
+				} )
+				.filter( Boolean );
+
+			if ( hasInvalidFile ) {
+				onUploadError(
+					__( 'Only audio files can be added to a playlist.' )
+				);
 			}
 
-			const trackList = media.map( getTrackAttributes );
+			return blocks;
+		},
+		[ onUploadError ]
+	);
+
+	const onSelectTracks = useCallback(
+		( media ) => {
+			const newBlocks = createTrackBlocks( media );
+			if ( newBlocks.length === 0 ) {
+				return;
+			}
 
-			const newBlocks = trackList.map( ( track ) =>
-				createBlock( 'core/playlist-track', track )
-			);
 			setCurrentTrackClientId( newBlocks[ 0 ]?.clientId ?? null );
 			// Replace the inner blocks with the new tracks.
 			replaceInnerBlocks( clientId, newBlocks );
 		},
-		[ replaceInnerBlocks, clientId, setCurrentTrackClientId ]
+		[
+			clientId,
+			createTrackBlocks,
+			replaceInnerBlocks,
+			setCurrentTrackClientId,
+		]
+	);
+
+	const onAddTracks = useCallback(
+		( media ) => {
+			const existingIds = new Set(
+				validTracks
+					.map( ( block ) => getTrackIdentifier( block.attributes ) )
+					.filter( Boolean )
+			);
+			const newBlocks = createTrackBlocks( media ).filter(
+				( block ) =>
+					! existingIds.has( getTrackIdentifier( block.attributes ) )
+			);
+			if ( newBlocks.length === 0 ) {
+				return;
+			}
+
+			const nextBlocks = [ ...validTracks, ...newBlocks ];
+			setCurrentTrackClientId( newBlocks[ 0 ].clientId );
+			replaceInnerBlocks( clientId, nextBlocks );
+			selectBlock( newBlocks[ 0 ].clientId );
+		},
+		[
+			clientId,
+			createTrackBlocks,
+			replaceInnerBlocks,
+			selectBlock,
+			setCurrentTrackClientId,
+			validTracks,
+		]
+	);
+
+	const playlistContext = useMemo(
+		() => ( {
+			currentTrackClientId,
+			setCurrentTrackClientId,
+		} ),
+		[ currentTrackClientId, setCurrentTrackClientId ]
 	);
 
 	// Get current track data by finding the track with matching client ID.
@@ -305,14 +397,6 @@ const PlaylistEdit = ( {
 		} );
 	}
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
-		[ clientId ]
-	);
-
-	const hasAnySelected = isSelected || hasSelectedChild;
-
 	const colorSettings = [];
 	if ( hasColors || hasGradients ) {
 		colorSettings.push(
@@ -357,7 +441,7 @@ const PlaylistEdit = ( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender: false,
 	} );
 
 	if ( tracks.length === 0 ) {
@@ -376,7 +460,8 @@ const PlaylistEdit = ( {
 					} }
 					onSelect={ onSelectTracks }
 					accept="audio/*"
-					multiple
+					multiple="add"
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -386,15 +471,13 @@ const PlaylistEdit = ( {
 
 	return (
 		<>
-			<BlockControls group="other">
+			<BlockControls group="other" __experimentalShareWithChildBlocks>
 				<MediaReplaceFlow
-					name={ __( 'Edit' ) }
-					onSelect={ onSelectTracks }
+					name={ __( 'Add track' ) }
+					onSelect={ onAddTracks }
 					accept="audio/*"
-					multiple
-					mediaIds={ tracks
-						.filter( ( track ) => track.id )
-						.map( ( track ) => track.id ) }
+					multiple="add"
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -585,6 +668,15 @@ const PlaylistEdit = ( {
 				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
+				<MediaPlaceholder
+					onSelect={ onAddTracks }
+					accept="audio/*"
+					multiple="add"
+					handleUpload={ false }
+					disableMediaButtons
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					onError={ onUploadError }
+				/>
 				<Disabled isDisabled={ ! isSelected }>
 					<WaveformPlayer
 						src={ currentTrackData?.src }
@@ -601,20 +693,20 @@ const PlaylistEdit = ( {
 						showPlayButtonArtwork={ showPlayButtonArtwork === true }
 					/>
 				</Disabled>
-				{ showTracklist && (
-					<ol
-						className={ clsx( 'wp-block-playlist__tracklist', {
-							'wp-block-playlist__tracklist-show-numbers':
-								showNumbers,
-							'wp-block-playlist__tracklist-length-is-hidden':
-								! showTrackLength,
-						} ) }
-					>
-						<PlaylistContext.Provider value={ playlistContext }>
-							{ innerBlocksProps.children }
-						</PlaylistContext.Provider>
-					</ol>
-				) }
+				<ol
+					className={ clsx( 'wp-block-playlist__tracklist', {
+						'wp-block-playlist__tracklist-is-hidden':
+							! showTracklist,
+						'wp-block-playlist__tracklist-show-numbers':
+							showNumbers,
+						'wp-block-playlist__tracklist-length-is-hidden':
+							! showTrackLength,
+					} ) }
+				>
+					<PlaylistContext.Provider value={ playlistContext }>
+						{ innerBlocksProps.children }
+					</PlaylistContext.Provider>
+				</ol>
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }

package/src/playlist/editor.scss

@@ -1,10 +1,3 @@
-.wp-block-playlist {
-	li.block-list-appender.block-list-appender {
-		position: initial;
-		margin-top: var(--wp--preset--spacing--30, 1em);
-	}
-}
-
 .wp-block-playlist__waveform-color-controls {
 	display: grid;
 	grid-column: 1 / -1;

package/src/playlist/index.js

@@ -1,15 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { playlist as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +12,7 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/playlist/index.php

@@ -8,7 +8,7 @@
 /**
  * Renders the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
@@ -37,13 +37,18 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				$playlist_tracks[] = $track_id;
 
 				// Extract track metadata from block attributes.
-				$title      = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' );
-				$artist     = $track_attributes['artist'] ?? '';
-				$album      = $track_attributes['album'] ?? '';
-				$image      = $track_attributes['image'] ?? '';
-				$image_alt  = $track_attributes['imageAlt'] ?? '';
-				$url        = $track_attributes['src'] ?? '';
-				$aria_label = $title;
+				$track_title_attr = $track_attributes['title'] ?? null;
+				$track_artist     = $track_attributes['artist'] ?? null;
+				$track_album      = $track_attributes['album'] ?? null;
+				$track_image      = $track_attributes['image'] ?? null;
+				$track_src        = $track_attributes['src'] ?? null;
+				$title            = ! empty( $track_title_attr ) && is_string( $track_title_attr ) ? $track_title_attr : __( 'Unknown title' );
+				$artist           = is_string( $track_artist ) ? $track_artist : '';
+				$album            = is_string( $track_album ) ? $track_album : '';
+				$image            = is_string( $track_image ) ? $track_image : '';
+				$image_alt        = $track_attributes['imageAlt'] ?? '';
+				$url              = is_string( $track_src ) ? $track_src : '';
+				$aria_label       = $title;
 
 				if ( $title && $artist && $album ) {
 					$aria_label = sprintf(
@@ -197,7 +202,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 /**
  * Registers the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  */
 function register_block_core_playlist() {
 	register_block_type_from_metadata(

package/src/playlist/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/playlist/save.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	RichText,
 	useBlockProps,

package/src/playlist/style.scss

@@ -4,6 +4,9 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;

package/src/playlist/test/edit-component.js

@@ -0,0 +1,220 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useDispatch, useSelect } from '@wordpress/data';
+import PlaylistEdit from '../edit';
+
+let mediaPlaceholderProps;
+let mediaReplaceFlowProps;
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	store: {},
+	BlockControls: ( { children } ) => <div>{ children }</div>,
+	BlockIcon: () => <span />,
+	InspectorControls: ( { children } ) => <div>{ children }</div>,
+	MediaPlaceholder: ( props ) => {
+		mediaPlaceholderProps = props;
+		return <div />;
+	},
+	MediaReplaceFlow: ( props ) => {
+		mediaReplaceFlowProps = props;
+		return (
+			<button
+				onClick={ () =>
+					props.onSelect( {
+						id: 2,
+						url: 'https://example.com/second-track.mp3',
+						title: 'Second track',
+					} )
+				}
+			>
+				{ props.name }
+			</button>
+		);
+	},
+	useBlockProps: () => ( { className: 'wp-block-playlist' } ),
+	useInnerBlocksProps: ( blockProps ) => ( {
+		...blockProps,
+		children: <li data-testid="playlist-track" />,
+	} ),
+	__experimentalColorGradientSettingsDropdown: () => <div />,
+	__experimentalUseMultipleOriginColorsAndGradients: () => ( {
+		colors: [],
+		gradients: [],
+		disableCustomColors: true,
+		disableCustomGradients: true,
+	} ),
+} ) );
+
+jest.mock( '@wordpress/blocks', () => ( {
+	createBlock: jest.fn( ( name, attributes ) => ( {
+		name,
+		attributes,
+		clientId: 'new-track',
+	} ) ),
+} ) );
+
+jest.mock( '@wordpress/blob', () => ( {
+	createBlobURL: jest.fn( () => 'blob:track' ),
+} ) );
+
+jest.mock( '@wordpress/components', () => ( {
+	Disabled: ( { children } ) => <div>{ children }</div>,
+	SelectControl: () => <div />,
+	ToggleControl: () => <div />,
+	__experimentalToolsPanel: ( { children } ) => <div>{ children }</div>,
+	__experimentalToolsPanelItem: ( { children } ) => <div>{ children }</div>,
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn(),
+	useSelect: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/i18n', () => ( {
+	__: ( text ) => text,
+	_x: ( text ) => text,
+} ) );
+
+jest.mock( '@wordpress/icons', () => ( {
+	playlist: 'playlist',
+} ) );
+
+jest.mock( '@wordpress/notices', () => ( {
+	store: {},
+} ) );
+
+jest.mock( '../../utils/caption', () => ( {
+	Caption: () => <figcaption />,
+} ) );
+
+jest.mock( '../../utils/hooks', () => ( {
+	useToolsPanelDropdownMenuProps: () => ( {} ),
+} ) );
+
+jest.mock( '../../utils/waveform-player', () => ( {
+	WaveformPlayer: () => <div />,
+} ) );
+
+const defaultAttributes = {
+	order: 'asc',
+	showTracklist: true,
+	showNumbers: true,
+	showImages: true,
+	showPlayButtonArtwork: false,
+	showArtists: true,
+	showTrackLength: true,
+};
+
+describe( 'PlaylistEdit', () => {
+	let replaceInnerBlocks;
+	let selectBlock;
+
+	beforeEach( () => {
+		mediaPlaceholderProps = undefined;
+		mediaReplaceFlowProps = undefined;
+		replaceInnerBlocks = jest.fn();
+		selectBlock = jest.fn();
+		useDispatch.mockReturnValue( {
+			createErrorNotice: jest.fn(),
+			replaceInnerBlocks,
+			selectBlock,
+		} );
+		useSelect.mockReturnValue( {
+			innerBlockTracks: [
+				{
+					clientId: 'track-1',
+					attributes: {
+						id: 1,
+						src: 'https://example.com/audio.mp3',
+						title: 'Sample track',
+					},
+				},
+			],
+		} );
+	} );
+
+	it( 'lets users select audio tracks individually from the Media Library', () => {
+		useSelect.mockReturnValue( {
+			innerBlockTracks: [],
+		} );
+
+		render(
+			<PlaylistEdit
+				attributes={ defaultAttributes }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		expect( mediaPlaceholderProps.multiple ).toBe( 'add' );
+	} );
+
+	it( 'lets users select additional audio tracks individually from the Media Library', () => {
+		render(
+			<PlaylistEdit
+				attributes={ defaultAttributes }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		expect( mediaReplaceFlowProps.multiple ).toBe( 'add' );
+	} );
+
+	it( 'keeps track blocks mounted when the tracklist is hidden', () => {
+		render(
+			<PlaylistEdit
+				attributes={ {
+					...defaultAttributes,
+					showTracklist: false,
+				} }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		const tracklist = screen.getByRole( 'list' );
+
+		expect( tracklist ).toHaveClass(
+			'wp-block-playlist__tracklist-is-hidden'
+		);
+		expect( screen.getByTestId( 'playlist-track' ) ).toBeInTheDocument();
+	} );
+
+	it( 'adds tracks from the add track control', () => {
+		render(
+			<PlaylistEdit
+				attributes={ defaultAttributes }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		fireEvent.click(
+			screen.getByRole( 'button', {
+				name: 'Add track',
+			} )
+		);
+
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'playlist-1', [
+			expect.objectContaining( { clientId: 'track-1' } ),
+			expect.objectContaining( {
+				clientId: 'new-track',
+				name: 'core/playlist-track',
+				attributes: expect.objectContaining( {
+					id: 2,
+					src: 'https://example.com/second-track.mp3',
+					title: 'Second track',
+				} ),
+			} ),
+		] );
+		expect( selectBlock ).toHaveBeenCalledWith( 'new-track' );
+	} );
+} );

package/src/playlist/test/edit.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getTrackAttributes } from '../utils';
 
 describe( 'Playlist block edit utilities', () => {
@@ -46,6 +43,36 @@ describe( 'Playlist block edit utilities', () => {
 			expect( result.imageAlt ).toBeUndefined();
 		} );
 
+		it( 'should transform raw uploaded attachment data to track attributes', () => {
+			const media = {
+				id: 123,
+				source_url: 'https://example.com/song.mp3',
+				title: { raw: 'My & Song' },
+				media_details: {
+					artist: 'Media Details Artist',
+					album: 'Media Details Album',
+					length_formatted: '4:30',
+				},
+				image: {
+					source_url: 'https://example.com/cover.jpg',
+					alt_text: 'A black and white portrait',
+				},
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result ).toEqual( {
+				id: 123,
+				src: 'https://example.com/song.mp3',
+				title: 'My & Song',
+				artist: 'Media Details Artist',
+				album: 'Media Details Album',
+				length: '4:30',
+				image: 'https://example.com/cover.jpg',
+				imageAlt: 'A black and white portrait',
+			} );
+		} );
+
 		it( 'should fall back to meta.artist when artist is not available', () => {
 			const media = {
 				url: 'https://example.com/song.mp3',