@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.41.0

package/src/playlist/edit.js

@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useEffect } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
@@ -23,15 +23,13 @@ import {
 	ToggleControl,
 	Disabled,
 	SelectControl,
-	Spinner,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { audio as icon } from '@wordpress/icons';
-import { safeHTML, __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -39,99 +37,42 @@ import { createBlock } from '@wordpress/blocks';
  */
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { WaveformPlayer } from '../utils/waveform-player';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
-const CurrentTrack = ( { track, showImages, onTrackEnd } ) => {
-	/**
-	 * dangerouslySetInnerHTML and safeHTML are used because
-	 * the media library allows using some HTML tags in the title, artist, and album fields.
-	 */
-	const trackTitle = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML( track?.title ? track.title : __( 'Untitled' ) ),
-		},
-	};
-	const trackArtist = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML(
-				track?.artist ? track.artist : __( 'Unknown artist' )
-			),
-		},
-	};
-	const trackAlbum = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML(
-				track?.album ? track.album : __( 'Unknown album' )
-			),
-		},
+/**
+ * Transform media library data into track block attributes.
+ *
+ * @param {Object} media - Media object from the media library.
+ * @return {Object} Track attributes for the playlist-track block.
+ */
+function getTrackAttributes( media ) {
+	return {
+		id: media.id || media.url, // Attachment ID or URL.
+		uniqueId: uuid(), // Unique ID for the track.
+		src: media.url,
+		title: media.title,
+		artist:
+			media.artist ||
+			media?.meta?.artist ||
+			media?.media_details?.artist ||
+			__( 'Unknown artist' ),
+		album:
+			media.album ||
+			media?.meta?.album ||
+			media?.media_details?.album ||
+			__( 'Unknown album' ),
+		length: media?.fileLength || media?.media_details?.length_formatted,
+		// Prevent using the default media attachment icon as the track image.
+		// Note: Image is not available when a new track is uploaded.
+		image:
+			media?.image?.src &&
+			media?.image?.src.endsWith( '/images/media/audio.svg' )
+				? ''
+				: media?.image?.src,
 	};
-
-	let ariaLabel;
-	if ( track?.title && track?.artist && track?.album ) {
-		ariaLabel = stripHTML(
-			sprintf(
-				/* translators: %1$s: track title, %2$s artist name, %3$s: album name. */
-				_x(
-					'%1$s by %2$s from the album %3$s',
-					'track title, artist name, album name'
-				),
-				track?.title,
-				track?.artist,
-				track?.album
-			)
-		);
-	} else if ( track?.title ) {
-		ariaLabel = stripHTML( track.title );
-	} else {
-		ariaLabel = stripHTML( __( 'Untitled' ) );
-	}
-
-	return (
-		<>
-			<div className="wp-block-playlist__current-item">
-				{ showImages && track?.image && (
-					<img
-						className="wp-block-playlist__item-image"
-						src={ track.image }
-						alt=""
-						width="70px"
-						height="70px"
-					/>
-				) }
-				<div>
-					{ ! track?.title ? (
-						<span className="wp-block-playlist__item-title">
-							<Spinner />
-						</span>
-					) : (
-						<span
-							className="wp-block-playlist__item-title"
-							{ ...trackTitle }
-						/>
-					) }
-					<div className="wp-block-playlist__current-item-artist-album">
-						<span
-							className="wp-block-playlist__item-artist"
-							{ ...trackArtist }
-						/>
-						<span
-							className="wp-block-playlist__item-album"
-							{ ...trackAlbum }
-						/>
-					</div>
-				</div>
-			</div>
-			<audio
-				controls="controls"
-				src={ track?.url ? track.url : '' }
-				onEnded={ onTrackEnd }
-				aria-label={ ariaLabel }
-				tabIndex={ 0 }
-			/>
-		</>
-	);
-};
+}
 
 const PlaylistEdit = ( {
 	attributes,
@@ -148,7 +89,6 @@ const PlaylistEdit = ( {
 		showArtists,
 		currentTrack,
 	} = attributes;
-	const [ trackListIndex, setTrackListIndex ] = useState( 0 );
 	const blockProps = useBlockProps();
 	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -235,33 +175,7 @@ const PlaylistEdit = ( {
 				media = [ media ];
 			}
 
-			const trackAttributes = ( track ) => ( {
-				id: track.id || track.url, // Attachment ID or URL.
-				uniqueId: uuid(), // Unique ID for the track.
-				src: track.url,
-				title: track.title,
-				artist:
-					track.artist ||
-					track?.meta?.artist ||
-					track?.media_details?.artist ||
-					__( 'Unknown artist' ),
-				album:
-					track.album ||
-					track?.meta?.album ||
-					track?.media_details?.album ||
-					__( 'Unknown album' ),
-				length:
-					track?.fileLength || track?.media_details?.length_formatted,
-				// Prevent using the default media attachment icon as the track image.
-				// Note: Image is not available when a new track is uploaded.
-				image:
-					track?.image?.src &&
-					track?.image?.src.endsWith( '/images/media/audio.svg' )
-						? ''
-						: track?.image?.src,
-			} );
-
-			const trackList = media.map( trackAttributes );
+			const trackList = media.map( getTrackAttributes );
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
 				currentTrack:
@@ -282,29 +196,21 @@ const PlaylistEdit = ( {
 		]
 	);
 
-	const onTrackEnd = useCallback( () => {
-		/* If there are tracks left, play the next track */
-		if ( trackListIndex < tracks.length - 1 ) {
-			if ( tracks[ trackListIndex + 1 ]?.uniqueId ) {
-				setTrackListIndex( trackListIndex + 1 );
-				setAttributes( {
-					currentTrack: tracks[ trackListIndex + 1 ].uniqueId,
-				} );
-			}
-		} else {
-			setTrackListIndex( 0 );
-			if ( tracks[ 0 ].uniqueId ) {
-				setAttributes( { currentTrack: tracks[ 0 ].uniqueId } );
-			} else if ( tracks.length > 0 ) {
-				const validTrack = tracks.find(
-					( track ) => track.uniqueId !== undefined
-				);
-				if ( validTrack ) {
-					setAttributes( { currentTrack: validTrack.uniqueId } );
-				}
-			}
+	// Get current track data by finding the track with matching uniqueId.
+	const currentTrackData = tracks.find(
+		( track ) => track.uniqueId === currentTrack
+	);
+
+	// Handle track end - advance to next track or loop to first.
+	const onTrackEnded = useCallback( () => {
+		const currentIndex = tracks.findIndex(
+			( track ) => track.uniqueId === currentTrack
+		);
+		const nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];
+		if ( nextTrack?.uniqueId ) {
+			setAttributes( { currentTrack: nextTrack.uniqueId } );
 		}
-	}, [ setAttributes, trackListIndex, tracks ] );
+	}, [ currentTrack, tracks, setAttributes ] );
 
 	const onChangeOrder = useCallback(
 		( trackOrder ) => {
@@ -317,16 +223,13 @@ const PlaylistEdit = ( {
 				}
 				return titleB.localeCompare( titleA );
 			} );
-			const sortedTracks = sortedBlocks.map(
-				( block ) => block.attributes
-			);
+			const firstUniqueId = sortedBlocks[ 0 ]?.attributes?.uniqueId;
 			replaceInnerBlocks( clientId, sortedBlocks );
 			setAttributes( {
 				order: trackOrder,
 				currentTrack:
-					sortedTracks.length > 0 &&
-					sortedTracks[ 0 ].uniqueId !== currentTrack
-						? sortedTracks[ 0 ].uniqueId
+					firstUniqueId && firstUniqueId !== currentTrack
+						? firstUniqueId
 						: currentTrack,
 			} );
 		},
@@ -358,7 +261,7 @@ const PlaylistEdit = ( {
 		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
 	} );
 
-	if ( ! tracks || ( Array.isArray( tracks ) && tracks.length === 0 ) ) {
+	if ( tracks.length === 0 ) {
 		return (
 			<div
 				{ ...blockProps }
@@ -498,10 +401,12 @@ const PlaylistEdit = ( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				<Disabled isDisabled={ ! isSelected }>
-					<CurrentTrack
-						track={ tracks[ trackListIndex ] }
-						showImages={ showImages }
-						onTrackEnd={ onTrackEnd }
+					<WaveformPlayer
+						src={ currentTrackData?.src }
+						title={ currentTrackData?.title }
+						artist={ currentTrackData?.artist }
+						image={ currentTrackData?.image }
+						onEnded={ onTrackEnded }
 					/>
 				</Disabled>
 				{ showTracklist && (
@@ -529,3 +434,4 @@ const PlaylistEdit = ( {
 };
 
 export default PlaylistEdit;
+export { getTrackAttributes };

package/src/playlist/editor.scss

@@ -1,6 +1,6 @@
 .wp-block-playlist {
-	&.is-placeholder {
-		padding: 0;
-		border: none;
+	li.block-list-appender.block-list-appender {
+		position: initial;
+		margin-top: var(--wp--preset--spacing--30, 1em);
 	}
 }

package/src/playlist/index.php

@@ -58,13 +58,16 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 					);
 				}
 
+				// Data is passed to wp_interactivity_state() which JSON-encodes it,
+				// so we use wp_strip_all_tags() instead of esc_html() to prevent
+				// HTML injection without double-encoding. URLs still use esc_url().
 				$tracks_data[ $unique_id ] = array(
 					'url'       => esc_url( $url ),
-					'title'     => esc_html( $title ),
-					'artist'    => esc_html( $artist ),
-					'album'     => esc_html( $album ),
+					'title'     => wp_strip_all_tags( $title ),
+					'artist'    => wp_strip_all_tags( $artist ),
+					'album'     => wp_strip_all_tags( $album ),
 					'image'     => esc_url( $image ),
-					'ariaLabel' => esc_attr( $aria_label ),
+					'ariaLabel' => wp_strip_all_tags( $aria_label ),
 				);
 
 				if ( $unique_id === $current_media_id ) {
@@ -96,41 +99,14 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 		)
 	);
 
-	// Create the HTML for the current track which shows above the tracklist.
-	$html = '<div class="wp-block-playlist__current-item">';
-
-	// The alt attribute is intentionally left empty, as the image is decorative.
-	if ( $attributes['showImages'] ?? false ) {
-		$html .=
-		'<img
-			class="wp-block-playlist__item-image"
-			alt=""
-			width="70px"
-			height="70px"
-			data-wp-bind--src="state.currentTrack.image"
-			data-wp-bind--hidden="!state.currentTrack.image"
-		/>';
-	}
-
-	$html .= '
-		<div>
-			<span class="wp-block-playlist__item-title" data-wp-text="state.currentTrack.title"></span>
-			<div class="wp-block-playlist__current-item-artist-album">
-				<span class="wp-block-playlist__item-artist" data-wp-text="state.currentTrack.artist"></span>
-				<span class="wp-block-playlist__item-album" data-wp-text="state.currentTrack.album"></span>
-			</div>
-		</div>
-	</div>
-		<audio
-			controls="controls"
-			data-wp-on--ended="actions.nextSong"
-			data-wp-on--play="actions.isPlaying"
-			data-wp-on--pause="actions.isPaused"
-			data-wp-bind--src="state.currentTrack.url"
-			data-wp-bind--aria-label="state.currentTrack.ariaLabel"
-			data-wp-watch="callbacks.autoPlay"
-		></audio>
-	';
+	// Add waveform player container with translated button labels.
+	$label_play  = esc_attr__( 'Play' );
+	$label_pause = esc_attr__( 'Pause' );
+	$html        = '<div class="wp-block-playlist__waveform-player"
+		data-wp-watch="callbacks.initWaveformPlayer"
+		data-label-play="' . $label_play . '"
+		data-label-pause="' . $label_pause . '"
+	></div>';
 
 	// Add the HTML for the current track inside the figure.
 	$figure = null;
@@ -149,7 +125,6 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				'playlistId' => $playlist_id,
 				'currentId'  => $current_unique_id,
 				'tracks'     => $playlist_tracks,
-				'isPlaying'  => false,
 			)
 		)
 	);

package/src/playlist/style.scss

@@ -1,32 +1,44 @@
+@use "@arraypress/waveform-player/dist/waveform-player";
+
+// Waveform player dimensions.
+$waveform-player-height: 100px;
+
 .wp-block-playlist {
-	.wp-block-playlist__current-item {
-		display: flex;
-		align-items: center;
-		gap: var(--wp--preset--spacing--40, 1.5em);
-		align-self: stretch;
-		padding-bottom: var(--wp--preset--spacing--30, 1em);
-		margin-bottom: var(--wp--preset--spacing--30, 1em);
-
-		div {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: var(--wp--preset--spacing--20, 0.5em);
-		}
+	// Main waveform player container.
+	.wp-block-playlist__waveform-player {
+		width: 100%;
+		margin: var(--wp--preset--spacing--20, 0.625em) 0;
+		position: relative;
+	}
 
-		& .wp-block-playlist__current-item-artist-album {
-			flex-direction: row;
-		}
+	// Set the waveform track height and remove gap between button and waveform.
+	.waveform-track {
+		height: $waveform-player-height;
+		gap: 0;
+	}
 
-		.wp-block-playlist__item-title {
-			word-break: break-all;
+	// WaveformPlayer button styling.
+	.waveform-btn {
+		border-radius: 0;
+		border-end-start-radius: 0.125rem;
+		border-start-start-radius: 0.125rem;
+		width: $waveform-player-height;
+		height: $waveform-player-height;
+		min-width: $waveform-player-height;
+		background: currentColor;
+		margin: 0;
+
+		&:hover:not(:disabled) {
+			transform: none;
 		}
+	}
 
+	.waveform-track.waveform-align-bottom .waveform-btn {
+		margin-bottom: 0;
 	}
 
-	audio {
-		width: 100%;
-		margin-top: var(--wp--preset--spacing--20, 0.625em);
+	.waveform-subtitle {
+		opacity: 0.7;
 	}
 
 	.wp-block-playlist__tracklist {
@@ -49,9 +61,4 @@
 			counter-reset: playlist-track;
 		}
 	}
-
-	li.block-list-appender.block-list-appender {
-		position: initial;
-		margin-top: var(--wp--preset--spacing--30, 1em);
-	}
 }

package/src/playlist/test/edit.js

@@ -0,0 +1,137 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * Internal dependencies
+ */
+import { getTrackAttributes } from '../edit';
+
+// Mock uuid to return predictable values.
+jest.mock( 'uuid', () => ( {
+	v4: jest.fn( () => 'mock-uuid-1234' ),
+} ) );
+
+describe( 'Playlist block edit utilities', () => {
+	describe( 'getTrackAttributes', () => {
+		it( 'should transform media object to track attributes', () => {
+			const media = {
+				id: 123,
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				artist: 'The Artist',
+				album: 'Great Album',
+				fileLength: '3:45',
+				image: { src: 'https://example.com/cover.jpg' },
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result ).toEqual( {
+				id: 123,
+				uniqueId: 'mock-uuid-1234',
+				src: 'https://example.com/song.mp3',
+				title: 'My Song',
+				artist: 'The Artist',
+				album: 'Great Album',
+				length: '3:45',
+				image: 'https://example.com/cover.jpg',
+			} );
+		} );
+
+		it( 'should use URL as id when attachment id is not available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.id ).toBe( 'https://example.com/song.mp3' );
+		} );
+
+		it( 'should fall back to meta.artist when artist is not available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				meta: { artist: 'Meta Artist' },
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.artist ).toBe( 'Meta Artist' );
+		} );
+
+		it( 'should fall back to media_details.artist when artist and meta.artist are not available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				media_details: { artist: 'Media Details Artist' },
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.artist ).toBe( 'Media Details Artist' );
+		} );
+
+		it( 'should use "Unknown artist" when no artist is available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.artist ).toBe( 'Unknown artist' );
+		} );
+
+		it( 'should use "Unknown album" when no album is available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.album ).toBe( 'Unknown album' );
+		} );
+
+		it( 'should use media_details.length_formatted when fileLength is not available', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				media_details: { length_formatted: '4:30' },
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.length ).toBe( '4:30' );
+		} );
+
+		it( 'should exclude default audio icon from image', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				image: {
+					src: 'https://example.com/wp-includes/images/media/audio.svg',
+				},
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.image ).toBe( '' );
+		} );
+
+		it( 'should include image URLs', () => {
+			const media = {
+				url: 'https://example.com/song.mp3',
+				title: 'My Song',
+				image: { src: 'https://example.com/cover.jpg' },
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result.image ).toBe( 'https://example.com/cover.jpg' );
+		} );
+	} );
+} );