@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/src/playlist/edit.js

@@ -16,7 +16,8 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	InspectorControls,
-	InnerBlocks,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -27,9 +28,10 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
-import { audio as icon } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+import { playlist as icon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
+import { createBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -41,6 +43,35 @@ 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' },
+	{ label: _x( 'Line', 'waveform style option' ), value: 'line' },
+	{ label: _x( 'Blocks', 'waveform style option' ), value: 'blocks' },
+	{ label: _x( 'Dots', 'waveform style option' ), value: 'dots' },
+	{ 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,
@@ -54,20 +85,50 @@ const PlaylistEdit = ( {
 		showTracklist,
 		showNumbers,
 		showImages,
+		showPlayButtonArtwork,
 		showArtists,
 		showTrackLength,
+		waveformStyle = DEFAULT_WAVEFORM_STYLE,
+		waveformColor,
+		waveformGradient,
+		waveformBackgroundColor,
+		waveformBackgroundGradient,
 	} = attributes;
 
-	// Extract the waveform style from the block style variation class.
-	const waveformStyle =
-		attributes.className?.match( /is-style-([\w-]+)/ )?.[ 1 ] || 'bars';
 	const blockProps = useBlockProps();
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const waveformPanelId = `${ clientId }-waveform`;
+	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	function onUploadError( message ) {
-		createErrorNotice( message, { type: 'snackbar' } );
-	}
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const colors = useMemo(
+		() =>
+			colorGradientSettings.colors.flatMap(
+				( origin ) => origin?.colors ?? []
+			),
+		[ colorGradientSettings.colors ]
+	);
+	const gradients = useMemo(
+		() =>
+			colorGradientSettings.gradients.flatMap(
+				( origin ) => origin?.gradients ?? []
+			),
+		[ colorGradientSettings.gradients ]
+	);
+	const hasColors =
+		colors.length > 0 || ! colorGradientSettings.disableCustomColors;
+	const hasGradients =
+		gradients.length > 0 || ! colorGradientSettings.disableCustomGradients;
+	const waveformGradientValue = waveformGradient;
+	const waveformBackgroundGradientValue = waveformBackgroundGradient;
+	let waveformColorGradientChange;
+	let waveformBackgroundColorGradientChange;
+	const onUploadError = useCallback(
+		( message ) => {
+			createErrorNotice( message, { type: 'snackbar' } );
+		},
+		[ createErrorNotice ]
+	);
 	const [ currentTrackClientId, setCurrentTrackClientId ] = useState( null );
 
 	const { innerBlockTracks } = useSelect(
@@ -114,31 +175,112 @@ const PlaylistEdit = ( {
 		}
 	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
 
-	const playlistContext = useMemo(
-		() => ( { currentTrackClientId, setCurrentTrackClientId } ),
-		[ currentTrackClientId, setCurrentTrackClientId ]
-	);
-
-	const onSelectTracks = useCallback(
+	const createTrackBlocks = useCallback(
 		( media ) => {
 			if ( ! media ) {
-				return;
+				return [];
 			}
 
-			if ( ! Array.isArray( media ) ) {
-				media = [ media ];
+			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 trackList = media.map( getTrackAttributes );
+					const track = getTrackAttributes( mediaItem );
+
+					return track.src
+						? createBlock( 'core/playlist-track', track )
+						: null;
+				} )
+				.filter( Boolean );
+
+			if ( hasInvalidFile ) {
+				onUploadError(
+					__( 'Only audio files can be added to a playlist.' )
+				);
+			}
+
+			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,
+			addTracks: onAddTracks,
+		} ),
+		[ currentTrackClientId, onAddTracks, setCurrentTrackClientId ]
 	);
 
 	// Get current track data by finding the track with matching client ID.
@@ -189,17 +331,129 @@ const PlaylistEdit = ( {
 		};
 	}
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
-		[ clientId ]
+	const onChangeWaveformStyle = useCallback(
+		( newWaveformStyle ) => {
+			setAttributes( {
+				waveformStyle:
+					newWaveformStyle === DEFAULT_WAVEFORM_STYLE
+						? undefined
+						: newWaveformStyle,
+			} );
+		},
+		[ setAttributes ]
 	);
 
-	const hasAnySelected = isSelected || hasSelectedChild;
+	function updateWaveformColor( colorValue ) {
+		const isSettingColor = colorValue !== undefined;
+		if ( ! isSettingColor && waveformColorGradientChange === 'gradient' ) {
+			waveformColorGradientChange = undefined;
+			return;
+		}
+
+		waveformColorGradientChange = 'color';
+
+		setAttributes( {
+			waveformColor: colorValue,
+			waveformGradient: undefined,
+		} );
+	}
+
+	function updateWaveformGradient( gradientValue ) {
+		const isSettingGradient = gradientValue !== undefined;
+		if ( ! isSettingGradient && waveformColorGradientChange === 'color' ) {
+			waveformColorGradientChange = undefined;
+			return;
+		}
+
+		waveformColorGradientChange = 'gradient';
+
+		setAttributes( {
+			waveformGradient: gradientValue,
+			waveformColor: undefined,
+		} );
+	}
+
+	function updateWaveformBackgroundColor( colorValue ) {
+		const isSettingColor = colorValue !== undefined;
+		if (
+			! isSettingColor &&
+			waveformBackgroundColorGradientChange === 'gradient'
+		) {
+			waveformBackgroundColorGradientChange = undefined;
+			return;
+		}
+
+		waveformBackgroundColorGradientChange = 'color';
+
+		setAttributes( {
+			waveformBackgroundColor: colorValue,
+			waveformBackgroundGradient: undefined,
+		} );
+	}
+
+	function updateWaveformBackgroundGradient( gradientValue ) {
+		const isSettingGradient = gradientValue !== undefined;
+		if (
+			! isSettingGradient &&
+			waveformBackgroundColorGradientChange === 'color'
+		) {
+			waveformBackgroundColorGradientChange = undefined;
+			return;
+		}
+
+		waveformBackgroundColorGradientChange = 'gradient';
+
+		setAttributes( {
+			waveformBackgroundGradient: gradientValue,
+			waveformBackgroundColor: undefined,
+		} );
+	}
+
+	const colorSettings = [];
+	if ( hasColors || hasGradients ) {
+		colorSettings.push(
+			{
+				colorValue: hasColors ? waveformColor : undefined,
+				gradientValue: hasGradients ? waveformGradientValue : undefined,
+				label: __( 'Waveform & Play button' ),
+				onColorChange: hasColors ? updateWaveformColor : undefined,
+				onGradientChange: hasGradients
+					? updateWaveformGradient
+					: undefined,
+				isShownByDefault: true,
+				clearable: true,
+				enableAlpha: true,
+				resetAllFilter: () => ( {
+					waveformColor: undefined,
+					waveformGradient: undefined,
+				} ),
+			},
+			{
+				colorValue: hasColors ? waveformBackgroundColor : undefined,
+				gradientValue: hasGradients
+					? waveformBackgroundGradientValue
+					: undefined,
+				label: __( 'Waveform background' ),
+				onColorChange: hasColors
+					? updateWaveformBackgroundColor
+					: undefined,
+				onGradientChange: hasGradients
+					? updateWaveformBackgroundGradient
+					: undefined,
+				isShownByDefault: true,
+				clearable: true,
+				enableAlpha: true,
+				resetAllFilter: () => ( {
+					waveformBackgroundColor: undefined,
+					waveformBackgroundGradient: undefined,
+				} ),
+			}
+		);
+	}
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender: false,
 	} );
 
 	if ( tracks.length === 0 ) {
@@ -219,6 +473,7 @@ const PlaylistEdit = ( {
 					onSelect={ onSelectTracks }
 					accept="audio/*"
 					multiple
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -230,13 +485,11 @@ const PlaylistEdit = ( {
 		<>
 			<BlockControls group="other">
 				<MediaReplaceFlow
-					name={ __( 'Edit' ) }
-					onSelect={ onSelectTracks }
+					name={ __( 'Add' ) }
+					onSelect={ onAddTracks }
 					accept="audio/*"
 					multiple
-					mediaIds={ tracks
-						.filter( ( track ) => track.id )
-						.map( ( track ) => track.id ) }
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -251,13 +504,14 @@ const PlaylistEdit = ( {
 							showNumbers: true,
 							showTrackLength: true,
 							showImages: true,
+							showPlayButtonArtwork: false,
 							order: 'asc',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Show Tracklist' ) }
+						label={ __( 'Show tracklist' ) }
 						isShownByDefault
 						hasValue={ () => showTracklist !== true }
 						onDeselect={ () =>
@@ -265,7 +519,7 @@ const PlaylistEdit = ( {
 						}
 					>
 						<ToggleControl
-							label={ __( 'Show Tracklist' ) }
+							label={ __( 'Show tracklist' ) }
 							onChange={ toggleAttribute( 'showTracklist' ) }
 							checked={ showTracklist }
 						/>
@@ -273,7 +527,7 @@ const PlaylistEdit = ( {
 					{ showTracklist && (
 						<>
 							<ToolsPanelItem
-								label={ __( 'Show artist name in Tracklist' ) }
+								label={ __( 'Show artist name in tracklist' ) }
 								isShownByDefault
 								hasValue={ () => showArtists !== true }
 								onDeselect={ () =>
@@ -282,7 +536,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show artist name in Tracklist'
+										'Show artist name in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showArtists'
@@ -291,7 +545,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show number in Tracklist' ) }
+								label={ __(
+									'Show track numbers in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showNumbers !== true }
 								onDeselect={ () =>
@@ -299,7 +555,9 @@ const PlaylistEdit = ( {
 								}
 							>
 								<ToggleControl
-									label={ __( 'Show number in Tracklist' ) }
+									label={ __(
+										'Show track numbers in tracklist'
+									) }
 									onChange={ toggleAttribute(
 										'showNumbers'
 									) }
@@ -307,7 +565,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show track length in Tracklist' ) }
+								label={ __(
+									'Show track duration in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showTrackLength !== true }
 								onDeselect={ () =>
@@ -316,7 +576,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show track length in Tracklist'
+										'Show track duration in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showTrackLength'
@@ -327,7 +587,7 @@ const PlaylistEdit = ( {
 						</>
 					) }
 					<ToolsPanelItem
-						label={ __( 'Show images' ) }
+						label={ __( 'Show tracklist images' ) }
 						isShownByDefault
 						hasValue={ () => showImages !== true }
 						onDeselect={ () =>
@@ -335,11 +595,27 @@ const PlaylistEdit = ( {
 						}
 					>
 						<ToggleControl
-							label={ __( 'Show images' ) }
+							label={ __( 'Show tracklist images' ) }
 							onChange={ toggleAttribute( 'showImages' ) }
 							checked={ showImages }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Show track image on play button' ) }
+						isShownByDefault
+						hasValue={ () => showPlayButtonArtwork === true }
+						onDeselect={ () =>
+							setAttributes( { showPlayButtonArtwork: false } )
+						}
+					>
+						<ToggleControl
+							label={ __( 'Show track image on play button' ) }
+							onChange={ toggleAttribute(
+								'showPlayButtonArtwork'
+							) }
+							checked={ showPlayButtonArtwork === true }
+						/>
+					</ToolsPanelItem>
 					<ToolsPanelItem
 						label={ __( 'Order' ) }
 						isShownByDefault
@@ -358,31 +634,91 @@ const PlaylistEdit = ( {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<InspectorControls group="styles">
+				<ToolsPanel
+					label={ __( 'Waveform' ) }
+					resetAll={ () => {
+						setAttributes( {
+							waveformStyle: undefined,
+							waveformColor: undefined,
+							waveformGradient: undefined,
+							waveformBackgroundColor: undefined,
+							waveformBackgroundGradient: undefined,
+						} );
+					} }
+					panelId={ waveformPanelId }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ colorSettings.length > 0 && (
+						<div className="wp-block-playlist__waveform-color-controls">
+							<ColorGradientSettingsDropdown
+								__experimentalIsRenderedInSidebar
+								settings={ colorSettings }
+								panelId={ waveformPanelId }
+								{ ...colorGradientSettings }
+							/>
+						</div>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Shape' ) }
+						isShownByDefault
+						hasValue={ () =>
+							waveformStyle !== DEFAULT_WAVEFORM_STYLE
+						}
+						onDeselect={ () =>
+							onChangeWaveformStyle( DEFAULT_WAVEFORM_STYLE )
+						}
+						panelId={ waveformPanelId }
+					>
+						<SelectControl
+							label={ __( 'Shape' ) }
+							value={ waveformStyle }
+							options={ WAVEFORM_STYLE_OPTIONS }
+							onChange={ onChangeWaveformStyle }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
 			<figure { ...blockProps }>
+				<MediaPlaceholder
+					onSelect={ onAddTracks }
+					accept="audio/*"
+					multiple
+					handleUpload={ false }
+					disableMediaButtons
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					onError={ onUploadError }
+				/>
 				<Disabled isDisabled={ ! isSelected }>
 					<WaveformPlayer
 						src={ currentTrackData?.src }
 						title={ currentTrackData?.title }
 						artist={ currentTrackData?.artist }
 						image={ currentTrackData?.image }
+						imageAlt={ currentTrackData?.imageAlt }
 						waveformStyle={ waveformStyle }
+						color={ waveformColor }
+						gradient={ waveformGradientValue }
+						backgroundColor={ waveformBackgroundColor }
+						backgroundGradient={ waveformBackgroundGradientValue }
 						onEnded={ onTrackEnded }
+						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,6 +1,5 @@
-.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;
+	row-gap: 0;
 }

package/src/playlist/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { audio as icon } from '@wordpress/icons';
+import { playlist as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies