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

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/query-title/index.php

@@ -13,7 +13,7 @@
  * @since 5.8.0
  *
  * @param array  $attributes Block attributes.
- * @param array  $_content   Block content.
+ * @param array  $content    Block content.
  * @param object $block      Block instance.
  *
  * @return string Returns the query title based on the queried object.

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.

package/src/utils/test/waveform-utils.js

@@ -0,0 +1,328 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+
+/**
+ * Internal dependencies
+ */
+import {
+	createWaveformContainer,
+	styleSvgIcons,
+	setupPlayButtonAccessibility,
+	logPlayError,
+} from '../waveform-utils';
+
+// Base player data used across tests
+const basePlayerData = {
+	url: 'https://example.com/song.mp3',
+	waveformColor: 'rgba(0, 0, 0, 0.3)',
+	progressColor: 'rgba(0, 0, 0, 0.6)',
+	buttonColor: '#000000',
+};
+
+describe( 'Waveform utilities', () => {
+	describe( 'createWaveformContainer', () => {
+		it( 'should create a container with required data attributes', () => {
+			const container = createWaveformContainer( basePlayerData );
+
+			expect( container.tagName ).toBe( 'DIV' );
+			expect( container ).toHaveAttribute( 'data-waveform-player', '' );
+			expect( container ).toHaveAttribute(
+				'data-url',
+				'https://example.com/song.mp3'
+			);
+			expect( container ).toHaveAttribute( 'data-height', '100' );
+			expect( container ).toHaveAttribute(
+				'data-waveform-style',
+				'bars'
+			);
+			expect( container ).toHaveAttribute(
+				'data-waveform-color',
+				'rgba(0, 0, 0, 0.3)'
+			);
+			expect( container ).toHaveAttribute(
+				'data-progress-color',
+				'rgba(0, 0, 0, 0.6)'
+			);
+			expect( container ).toHaveAttribute(
+				'data-button-color',
+				'#000000'
+			);
+		} );
+
+		it( 'should set optional attributes when provided', () => {
+			const container = createWaveformContainer( {
+				...basePlayerData,
+				title: 'My Song',
+				artist: 'The Artist',
+				artwork: 'https://example.com/cover.jpg',
+			} );
+
+			expect( container ).toHaveAttribute( 'data-title', 'My Song' );
+			expect( container ).toHaveAttribute(
+				'data-subtitle',
+				'The Artist'
+			);
+			expect( container ).toHaveAttribute(
+				'data-artwork',
+				'https://example.com/cover.jpg'
+			);
+		} );
+
+		it( 'should not set optional attributes when not provided', () => {
+			const container = createWaveformContainer( basePlayerData );
+
+			expect( container ).not.toHaveAttribute( 'data-title' );
+			expect( container ).not.toHaveAttribute( 'data-subtitle' );
+			expect( container ).not.toHaveAttribute( 'data-artwork' );
+		} );
+
+		it( 'should use custom height when provided', () => {
+			const container = createWaveformContainer( {
+				...basePlayerData,
+				height: 150,
+			} );
+
+			expect( container ).toHaveAttribute( 'data-height', '150' );
+		} );
+	} );
+
+	describe( 'styleSvgIcons', () => {
+		it( 'should set white fill for dark button colors', () => {
+			const container = document.createElement( 'div' );
+			const svg = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'svg'
+			);
+			const path = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			svg.appendChild( path );
+			container.appendChild( svg );
+
+			styleSvgIcons( container, '#000000' );
+
+			expect( path ).toHaveStyle( { fill: '#ffffff' } );
+		} );
+
+		it( 'should set black fill for light button colors', () => {
+			const container = document.createElement( 'div' );
+			const svg = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'svg'
+			);
+			const path = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			svg.appendChild( path );
+			container.appendChild( svg );
+
+			styleSvgIcons( container, '#ffffff' );
+
+			expect( path ).toHaveStyle( { fill: '#000000' } );
+		} );
+
+		it( 'should style multiple SVG paths', () => {
+			const container = document.createElement( 'div' );
+			const svg = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'svg'
+			);
+			const path1 = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			const path2 = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			svg.appendChild( path1 );
+			svg.appendChild( path2 );
+			container.appendChild( svg );
+
+			styleSvgIcons( container, '#000000' );
+
+			expect( path1 ).toHaveStyle( { fill: '#ffffff' } );
+			expect( path2 ).toHaveStyle( { fill: '#ffffff' } );
+		} );
+
+		it( 'should handle container with no SVG paths', () => {
+			const container = document.createElement( 'div' );
+
+			// Should not throw.
+			expect( () => {
+				styleSvgIcons( container, '#000000' );
+			} ).not.toThrow();
+		} );
+
+		it( 'should use white for dark colors', () => {
+			const container = document.createElement( 'div' );
+			const svg = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'svg'
+			);
+			const path = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			svg.appendChild( path );
+			container.appendChild( svg );
+
+			// A dark blue color.
+			styleSvgIcons( container, '#000080' );
+
+			expect( path ).toHaveStyle( { fill: '#ffffff' } );
+		} );
+
+		it( 'should use black for mid-light colors', () => {
+			const container = document.createElement( 'div' );
+			const svg = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'svg'
+			);
+			const path = document.createElementNS(
+				'http://www.w3.org/2000/svg',
+				'path'
+			);
+			svg.appendChild( path );
+			container.appendChild( svg );
+
+			// A light yellow color.
+			styleSvgIcons( container, '#ffff00' );
+
+			expect( path ).toHaveStyle( { fill: '#000000' } );
+		} );
+	} );
+
+	describe( 'setupPlayButtonAccessibility', () => {
+		it( 'should set aria-label to Play initially', () => {
+			const container = document.createElement( 'div' );
+			const playBtn = document.createElement( 'button' );
+			playBtn.className = 'waveform-btn';
+			container.appendChild( playBtn );
+
+			setupPlayButtonAccessibility( container );
+
+			expect( playBtn ).toHaveAttribute( 'aria-label', 'Play' );
+		} );
+
+		it( 'should change aria-label to Pause on play event', () => {
+			const container = document.createElement( 'div' );
+			const playBtn = document.createElement( 'button' );
+			playBtn.className = 'waveform-btn';
+			container.appendChild( playBtn );
+
+			setupPlayButtonAccessibility( container );
+			container.dispatchEvent( new CustomEvent( 'waveformplayer:play' ) );
+
+			expect( playBtn ).toHaveAttribute( 'aria-label', 'Pause' );
+		} );
+
+		it( 'should change aria-label back to Play on pause event', () => {
+			const container = document.createElement( 'div' );
+			const playBtn = document.createElement( 'button' );
+			playBtn.className = 'waveform-btn';
+			container.appendChild( playBtn );
+
+			setupPlayButtonAccessibility( container );
+			container.dispatchEvent( new CustomEvent( 'waveformplayer:play' ) );
+			container.dispatchEvent(
+				new CustomEvent( 'waveformplayer:pause' )
+			);
+
+			expect( playBtn ).toHaveAttribute( 'aria-label', 'Play' );
+		} );
+
+		it( 'should change aria-label back to Play on ended event', () => {
+			const container = document.createElement( 'div' );
+			const playBtn = document.createElement( 'button' );
+			playBtn.className = 'waveform-btn';
+			container.appendChild( playBtn );
+
+			setupPlayButtonAccessibility( container );
+			container.dispatchEvent( new CustomEvent( 'waveformplayer:play' ) );
+			container.dispatchEvent(
+				new CustomEvent( 'waveformplayer:ended' )
+			);
+
+			expect( playBtn ).toHaveAttribute( 'aria-label', 'Play' );
+		} );
+
+		it( 'should return cleanup function that removes listeners', () => {
+			const container = document.createElement( 'div' );
+			const playBtn = document.createElement( 'button' );
+			playBtn.className = 'waveform-btn';
+			container.appendChild( playBtn );
+
+			const cleanup = setupPlayButtonAccessibility( container );
+			cleanup();
+
+			// After cleanup, events should not change the label.
+			container.dispatchEvent( new CustomEvent( 'waveformplayer:play' ) );
+			expect( playBtn ).toHaveAttribute( 'aria-label', 'Play' );
+		} );
+
+		it( 'should do nothing when play button not found', () => {
+			const container = document.createElement( 'div' );
+
+			// Should not throw.
+			expect( () =>
+				setupPlayButtonAccessibility( container )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'logPlayError', () => {
+		let consoleErrorSpy;
+
+		beforeEach( () => {
+			consoleErrorSpy = jest
+				.spyOn( console, 'error' )
+				.mockImplementation( () => {} );
+		} );
+
+		afterEach( () => {
+			consoleErrorSpy.mockRestore();
+		} );
+
+		it( 'should not log AbortError', () => {
+			const abortError = new DOMException( 'Aborted', 'AbortError' );
+
+			logPlayError( abortError );
+
+			expect( consoleErrorSpy ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should log other errors', () => {
+			const otherError = new Error( 'Some other error' );
+
+			logPlayError( otherError );
+
+			expect( consoleErrorSpy ).toHaveBeenCalledWith(
+				'Playlist play error:',
+				otherError
+			);
+		} );
+
+		it( 'should log NotAllowedError', () => {
+			const notAllowedError = new DOMException(
+				'Not allowed',
+				'NotAllowedError'
+			);
+
+			logPlayError( notAllowedError );
+
+			expect( consoleErrorSpy ).toHaveBeenCalledWith(
+				'Playlist play error:',
+				notAllowedError
+			);
+		} );
+	} );
+} );

package/src/utils/waveform-player.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { initWaveformPlayer } from './waveform-utils';
+
+/**
+ * A reusable WaveformPlayer component for the block editor.
+ *
+ * Renders an audio waveform visualization with play/pause controls.
+ * Automatically inherits colors from the parent block's text color.
+ *
+ * @param {Object}   props         - Component props.
+ * @param {string}   props.src     - The audio file URL.
+ * @param {string}   props.title   - The track title.
+ * @param {string}   props.artist  - The artist name.
+ * @param {string}   props.image   - The artwork image URL.
+ * @param {Function} props.onEnded - Callback when the track finishes playing.
+ * @return {Element} The WaveformPlayer element.
+ */
+export function WaveformPlayer( { src, title, artist, image, onEnded } ) {
+	// Store onEnded in a ref so it doesn't need to be a useRefEffect dependency.
+	// The callback changes reference on every render (its dependency chain
+	// includes an unstable array), which would cause useRefEffect to destroy
+	// and recreate the entire player on every re-render, making it disappear
+	// during editor resizes.
+	const onEndedRef = useRef( onEnded );
+	onEndedRef.current = onEnded;
+
+	const ref = useRefEffect(
+		( element ) => {
+			if ( ! src ) {
+				return;
+			}
+
+			let cancelled = false;
+			let playerDestroy;
+
+			function init() {
+				if ( cancelled ) {
+					return;
+				}
+				const { destroy } = initWaveformPlayer( element, {
+					src,
+					title,
+					artist,
+					image,
+					onEnded: () => onEndedRef.current?.(),
+				} );
+				playerDestroy = destroy;
+			}
+
+			// Defer initialization so the element inherits the correct
+			// text color, which is used to derive waveform colors. In the
+			// editor iframe, theme styles (CSS custom properties) are
+			// injected dynamically, so getComputedStyle may return the
+			// default black on first render.
+			// Using a requestAnimationFrame loop isn't sufficient to solve the issue.
+			// TODO - find a better option than a setTimeout, so we're not relying on an arbitrary number.
+			const timeoutId = setTimeout( init, 100 );
+
+			return () => {
+				cancelled = true;
+				clearTimeout( timeoutId );
+				playerDestroy?.();
+			};
+		},
+		[ src, title, artist, image ]
+	);
+
+	return <div ref={ ref } className="wp-block-playlist__waveform-player" />;
+}