@wordpress/block-library 10.1.0 → 10.2.0

package/src/playlist/edit.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { v4 as uuid } from 'uuid';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
@@ -18,6 +17,8 @@ import {
 	BlockControls,
 	InspectorControls,
 	InnerBlocks,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -28,8 +29,8 @@ 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';
 
 /**
@@ -38,9 +39,19 @@ import { createBlock } from '@wordpress/blocks';
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { WaveformPlayer } from '../utils/waveform-player';
+import { PlaylistContext } from './context';
 import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+const DEFAULT_WAVEFORM_STYLE = 'bars';
+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' },
+];
 
 const PlaylistEdit = ( {
 	attributes,
@@ -54,23 +65,48 @@ const PlaylistEdit = ( {
 		showTracklist,
 		showNumbers,
 		showImages,
+		showPlayButtonArtwork,
 		showArtists,
 		showTrackLength,
-		currentTrack,
+		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, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const waveformPanelId = `${ clientId }-waveform`;
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	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;
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const [ currentTrackClientId, setCurrentTrackClientId ] = useState( null );
 
 	const { innerBlockTracks } = useSelect(
 		( select ) => {
@@ -82,61 +118,44 @@ const PlaylistEdit = ( {
 		[ clientId ]
 	);
 
-	// Ensure that each inner block has a unique ID,
-	// even if a track is duplicated.
-	useEffect( () => {
-		const seen = new Set();
-		let hasDuplicates = false;
-		const updatedBlocks = innerBlockTracks.map( ( block ) => {
-			if ( seen.has( block.attributes.uniqueId ) ) {
-				hasDuplicates = true;
-				return {
-					...block,
-					attributes: {
-						...block.attributes,
-						uniqueId: uuid(),
-					},
-				};
-			}
-			seen.add( block.attributes.uniqueId );
-			return block;
-		} );
-		if ( hasDuplicates ) {
-			replaceInnerBlocks( clientId, updatedBlocks );
-		}
-	}, [ innerBlockTracks, clientId, replaceInnerBlocks ] );
-
 	// Create a list of tracks from the inner blocks,
-	// but skip blocks that do not have a uniqueId attribute, such as the media placeholder.
-	const validTracks = innerBlockTracks.filter(
-		( block ) => !! block.attributes.uniqueId
+	// but skip blocks that do not have a source, such as the media placeholder.
+	const validTracks = useMemo(
+		() =>
+			innerBlockTracks.filter(
+				( block ) => !! block.attributes.src || !! block.attributes.blob
+			),
+		[ innerBlockTracks ]
+	);
+	const tracks = useMemo(
+		() =>
+			validTracks.map( ( block ) => ( {
+				...block.attributes,
+				clientId: block.clientId,
+			} ) ),
+		[ validTracks ]
 	);
-	const tracks = validTracks.map( ( block ) => block.attributes );
-	const firstTrackId = validTracks[ 0 ]?.attributes?.uniqueId;
 
-	// updateBlockAttributes is used to force updating the parent playlist block
-	// when the currentTrack changes. Using setAttributes directly does not update
-	// the currentTrack when multiple tracks are moved at the same time.
 	useEffect( () => {
-		if ( tracks.length === 0 ) {
-			// If there are no tracks but currentTrack is set, set it to null.
-			if ( currentTrack !== null ) {
-				updateBlockAttributes( clientId, { currentTrack: null } );
+		if ( validTracks.length === 0 ) {
+			if ( currentTrackClientId !== null ) {
+				setCurrentTrackClientId( null );
 			}
-		} else if (
-			// If the currentTrack is not the first track, update it to the first track.
-			firstTrackId &&
-			firstTrackId !== currentTrack
-		) {
-			updateBlockAttributes( clientId, { currentTrack: firstTrackId } );
+			return;
+		}
+
+		const currentTrackExists = validTracks.some(
+			( block ) => block.clientId === currentTrackClientId
+		);
+		if ( ! currentTrackExists ) {
+			setCurrentTrackClientId( validTracks[ 0 ].clientId );
 		}
-	}, [
-		tracks,
-		currentTrack,
-		firstTrackId,
-		clientId,
-		updateBlockAttributes,
-	] );
+	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
+
+	const playlistContext = useMemo(
+		() => ( { currentTrackClientId, setCurrentTrackClientId } ),
+		[ currentTrackClientId, setCurrentTrackClientId ]
+	);
 
 	const onSelectTracks = useCallback(
 		( media ) => {
@@ -149,41 +168,32 @@ const PlaylistEdit = ( {
 			}
 
 			const trackList = media.map( getTrackAttributes );
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				currentTrack:
-					trackList.length > 0 ? trackList[ 0 ].uniqueId : null,
-			} );
 
 			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 );
 		},
-		[
-			__unstableMarkNextChangeAsNotPersistent,
-			setAttributes,
-			replaceInnerBlocks,
-			clientId,
-		]
+		[ replaceInnerBlocks, clientId, setCurrentTrackClientId ]
 	);
 
-	// Get current track data by finding the track with matching uniqueId.
-	const currentTrackData = tracks.find(
-		( track ) => track.uniqueId === currentTrack
-	);
+	// Get current track data by finding the track with matching client ID.
+	const currentTrackData =
+		tracks.find( ( track ) => track.clientId === currentTrackClientId ) ??
+		tracks[ 0 ];
 
 	// Handle track end - advance to next track or loop to first.
 	const onTrackEnded = useCallback( () => {
 		const currentIndex = tracks.findIndex(
-			( track ) => track.uniqueId === currentTrack
+			( track ) => track.clientId === currentTrackClientId
 		);
 		const nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];
-		if ( nextTrack?.uniqueId ) {
-			setAttributes( { currentTrack: nextTrack.uniqueId } );
+		if ( nextTrack?.clientId ) {
+			setCurrentTrackClientId( nextTrack.clientId );
 		}
-	}, [ currentTrack, tracks, setAttributes ] );
+	}, [ currentTrackClientId, setCurrentTrackClientId, tracks ] );
 
 	const onChangeOrder = useCallback(
 		( trackOrder ) => {
@@ -196,22 +206,18 @@ const PlaylistEdit = ( {
 				}
 				return titleB.localeCompare( titleA );
 			} );
-			const firstUniqueId = sortedBlocks[ 0 ]?.attributes?.uniqueId;
 			replaceInnerBlocks( clientId, sortedBlocks );
+			setCurrentTrackClientId( sortedBlocks[ 0 ]?.clientId ?? null );
 			setAttributes( {
 				order: trackOrder,
-				currentTrack:
-					firstUniqueId && firstUniqueId !== currentTrack
-						? firstUniqueId
-						: currentTrack,
 			} );
 		},
 		[
 			clientId,
-			currentTrack,
 			innerBlockTracks,
 			replaceInnerBlocks,
 			setAttributes,
+			setCurrentTrackClientId,
 		]
 	);
 
@@ -221,6 +227,84 @@ const PlaylistEdit = ( {
 		};
 	}
 
+	const onChangeWaveformStyle = useCallback(
+		( newWaveformStyle ) => {
+			setAttributes( {
+				waveformStyle:
+					newWaveformStyle === DEFAULT_WAVEFORM_STYLE
+						? undefined
+						: newWaveformStyle,
+			} );
+		},
+		[ setAttributes ]
+	);
+
+	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 hasSelectedChild = useSelect(
 		( select ) =>
 			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
@@ -229,6 +313,48 @@ const PlaylistEdit = ( {
 
 	const hasAnySelected = isSelected || hasSelectedChild;
 
+	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,
@@ -283,13 +409,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={ () =>
@@ -297,7 +424,7 @@ const PlaylistEdit = ( {
 						}
 					>
 						<ToggleControl
-							label={ __( 'Show Tracklist' ) }
+							label={ __( 'Show tracklist' ) }
 							onChange={ toggleAttribute( 'showTracklist' ) }
 							checked={ showTracklist }
 						/>
@@ -305,7 +432,7 @@ const PlaylistEdit = ( {
 					{ showTracklist && (
 						<>
 							<ToolsPanelItem
-								label={ __( 'Show artist name in Tracklist' ) }
+								label={ __( 'Show artist name in tracklist' ) }
 								isShownByDefault
 								hasValue={ () => showArtists !== true }
 								onDeselect={ () =>
@@ -314,7 +441,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show artist name in Tracklist'
+										'Show artist name in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showArtists'
@@ -323,7 +450,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show number in Tracklist' ) }
+								label={ __(
+									'Show track numbers in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showNumbers !== true }
 								onDeselect={ () =>
@@ -331,7 +460,9 @@ const PlaylistEdit = ( {
 								}
 							>
 								<ToggleControl
-									label={ __( 'Show number in Tracklist' ) }
+									label={ __(
+										'Show track numbers in tracklist'
+									) }
 									onChange={ toggleAttribute(
 										'showNumbers'
 									) }
@@ -339,7 +470,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show track length in Tracklist' ) }
+								label={ __(
+									'Show track duration in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showTrackLength !== true }
 								onDeselect={ () =>
@@ -348,7 +481,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show track length in Tracklist'
+										'Show track duration in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showTrackLength'
@@ -359,7 +492,7 @@ const PlaylistEdit = ( {
 						</>
 					) }
 					<ToolsPanelItem
-						label={ __( 'Show images' ) }
+						label={ __( 'Show tracklist images' ) }
 						isShownByDefault
 						hasValue={ () => showImages !== true }
 						onDeselect={ () =>
@@ -367,11 +500,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
@@ -379,7 +528,6 @@ const PlaylistEdit = ( {
 						onDeselect={ () => setAttributes( { order: 'asc' } ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Order' ) }
 							value={ order }
 							options={ [
@@ -391,6 +539,51 @@ 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 }>
 				<Disabled isDisabled={ ! isSelected }>
 					<WaveformPlayer
@@ -398,8 +591,14 @@ const PlaylistEdit = ( {
 						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 && (
@@ -411,7 +610,9 @@ const PlaylistEdit = ( {
 								! showTrackLength,
 						} ) }
 					>
-						{ innerBlocksProps.children }
+						<PlaylistContext.Provider value={ playlistContext }>
+							{ innerBlocksProps.children }
+						</PlaylistContext.Provider>
 					</ol>
 				) }
 				<Caption

package/src/playlist/editor.scss

@@ -4,3 +4,9 @@
 		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