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

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' );
+		} );
+	} );
+} );

package/src/playlist/view.js

@@ -3,22 +3,21 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-store(
+/**
+ * Internal dependencies
+ */
+import { initWaveformPlayer, logPlayError } from '../utils/waveform-utils';
+
+/**
+ * Store player state for each element.
+ */
+const playerState = new WeakMap();
+
+const { state } = store(
 	'core/playlist',
 	{
 		state: {
 			playlists: {},
-			get currentTrack() {
-				const { currentId, playlistId } = getContext();
-				if ( ! currentId || ! playlistId ) {
-					return {};
-				}
-				const playlist = this.playlists[ playlistId ];
-				if ( ! playlist ) {
-					return {};
-				}
-				return playlist.tracks[ currentId ] || {};
-			},
 			get isCurrentTrack() {
 				const { currentId, uniqueId } = getContext();
 				return currentId === uniqueId;
@@ -28,42 +27,100 @@ store(
 			changeTrack() {
 				const context = getContext();
 				context.currentId = context.uniqueId;
-				context.isPlaying = true;
-			},
-			isPlaying() {
-				const context = getContext();
-				context.isPlaying = true;
-			},
-			isPaused() {
-				const context = getContext();
-				context.isPlaying = false;
-			},
-			nextSong() {
-				const context = getContext();
-				const currentIndex = context.tracks.findIndex(
-					( uniqueId ) => uniqueId === context.currentId
-				);
-				const nextTrack = context.tracks[ currentIndex + 1 ];
-				if ( nextTrack ) {
-					context.currentId = nextTrack;
-					const { ref } = getElement();
-					// Waits a moment before changing the track, since
-					// immediately changing the track can be jarring.
-					setTimeout( () => {
-						ref.play();
-					}, 1000 );
-				}
 			},
 		},
 		callbacks: {
-			autoPlay() {
+			initWaveformPlayer() {
 				const context = getContext();
 				const { ref } = getElement();
-				if ( context.currentId && context.isPlaying ) {
-					ref.play();
+
+				if ( ! context.currentId || ! ref ) {
+					return;
 				}
+
+				const track =
+					state.playlists[ context.playlistId ]?.tracks[
+						context.currentId
+					];
+				if ( ! track?.url ) {
+					return;
+				}
+
+				const existing = playerState.get( ref );
+
+				// Skip if we already initialized with this exact URL.
+				if ( existing?.url === track.url ) {
+					return;
+				}
+
+				// Autoplay if we're switching from a different track (user action),
+				// but not on initial page load (when existing has no URL).
+				const shouldAutoPlay = !! existing?.url;
+
+				initPlayer( ref, track, shouldAutoPlay, context );
 			},
 		},
 	},
 	{ lock: true }
 );
+
+/**
+ * Initialize the waveform player for a given element.
+ *
+ * @param {Element} ref            - The container element.
+ * @param {Object}  track          - The track data.
+ * @param {boolean} shouldAutoPlay - Whether to auto-play after initialization.
+ * @param {Object}  context        - The Interactivity API context.
+ */
+function initPlayer( ref, track, shouldAutoPlay, context ) {
+	const existing = playerState.get( ref );
+
+	// If a player already exists, load the new track without recreating.
+	if ( existing?.instance ) {
+		existing.instance
+			.loadTrack( track.url, track.title, track.artist, {
+				artwork: track.image,
+			} )
+			.then( () => {
+				existing.url = track.url;
+				if ( shouldAutoPlay ) {
+					existing.instance.play()?.catch( logPlayError );
+				}
+			} )
+			.catch( logPlayError );
+		return;
+	}
+
+	// Read translated labels from server-rendered data attributes.
+	const labels = {
+		play: ref.dataset.labelPlay,
+		pause: ref.dataset.labelPause,
+	};
+
+	// Initialize using the shared core.
+	const player = initWaveformPlayer( ref, {
+		src: track.url,
+		title: track.title,
+		artist: track.artist,
+		image: track.image,
+		autoPlay: shouldAutoPlay,
+		labels,
+		onEnded: () => {
+			// Advance to next track (autoPlay handles playback).
+			const currentIndex = context.tracks.findIndex(
+				( uniqueId ) => uniqueId === context.currentId
+			);
+			const nextTrack = context.tracks[ currentIndex + 1 ];
+			if ( nextTrack ) {
+				context.currentId = nextTrack;
+			}
+		},
+	} );
+
+	// Store state for cleanup, including instance for loadTrack reuse.
+	playerState.set( ref, {
+		url: track.url,
+		instance: player.instance,
+		destroy: player.destroy,
+	} );
+}

package/src/playlist-track/edit.js

@@ -180,7 +180,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 						__next40pxDefaultSize
 						label={ __( 'Title' ) }
 						value={ title ? stripHTML( title ) : '' }
-						placeholder={ title ? stripHTML( title ) : '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
 						} }

package/src/post-title/block.json

@@ -30,6 +30,9 @@
 			"type": "string",
 			"default": "_self",
 			"role": "content"
+		},
+		"placeholder": {
+			"type": "string"
 		}
 	},
 	"example": {

package/src/post-title/edit.js

@@ -28,7 +28,7 @@ import { createInterpolateElement } from '@wordpress/element';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function PostTitleEdit( {
-	attributes: { level, levelOptions, isLink, rel, linkTarget },
+	attributes: { level, levelOptions, isLink, rel, linkTarget, placeholder },
 	setAttributes,
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
@@ -70,7 +70,9 @@ export default function PostTitleEdit( {
 	const blockEditingMode = useBlockEditingMode();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
+	let titleElement = (
+		<TagName { ...blockProps }>{ placeholder || __( 'Title' ) }</TagName>
+	);
 
 	if ( postType && postId ) {
 		titleElement = userCanEdit ? (

package/src/search/index.php

@@ -72,7 +72,7 @@ function render_block_core_search( $attributes ) {
 	if ( $input->next_tag() ) {
 		$input->add_class( implode( ' ', $input_classes ) );
 		$input->set_attribute( 'id', $input_id );
-		$input->set_attribute( 'value', get_search_query() );
+		$input->set_attribute( 'value', get_search_query( false ) );
 		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
 
 		// If it's interactive, enqueue the script module and add the directives.