@wordpress/block-library 10.1.0 → 10.2.0

package/src/term-name/index.js

@@ -9,6 +9,7 @@ import { termName as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -17,6 +18,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/terms-query/edit/inspector-controls/include-control.js

@@ -136,7 +136,6 @@ export default function IncludeControl( {
 
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			value={ value }
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }

package/src/terms-query/edit/inspector-controls/inherit-control.js

@@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n';
 export default function InheritControl( { value, onChange, label } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ label }
 			isBlock
 			onChange={ ( newValue ) => {

package/src/terms-query/edit/inspector-controls/max-terms-control.js

@@ -7,7 +7,6 @@ import { RangeControl } from '@wordpress/components';
 export default function MaxTermsControl( { value, onChange, ...props } ) {
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			value={ value }
 			min={ 0 }
 			max={ 100 }

package/src/terms-query/edit/inspector-controls/order-control.js

@@ -7,7 +7,6 @@ import { SelectControl } from '@wordpress/components';
 export default function OrderControl( { orderBy, order, onChange, ...props } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ [
 				{
 					label: __( 'Name: A → Z' ),

package/src/terms-query/edit/inspector-controls/taxonomy-control.js

@@ -17,7 +17,6 @@ export default function TaxonomyControl( { value, onChange, ...props } ) {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			options={ taxonomyOptions }
 			value={ value }
 			onChange={ onChange }

package/src/text-columns/edit.js

@@ -34,7 +34,6 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/utils/media-control.scss

@@ -16,7 +16,7 @@
 
 		button.components-button {
 			color: $gray-900;
-			box-shadow: inset 0 0 0 1px $gray-400;
+			border-color: $gray-400;
 			width: 100%;
 			display: block;
 			height: $grid-unit-50;
@@ -25,10 +25,6 @@
 			&:hover {
 				color: var(--wp-admin-theme-color);
 			}
-
-			&:focus {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
 		}
 	}
 }

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

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -12,10 +8,17 @@ import { act, render } from '@testing-library/react';
  * Internal dependencies
  */
 import { WaveformPlayer } from '../waveform-player';
-import { initWaveformPlayer } from '../waveform-utils';
+import {
+	applyWaveformPlayerStyles,
+	initWaveformPlayer,
+	setupPlayButtonArtwork,
+} from '../waveform-utils';
 
 jest.mock( '../waveform-utils', () => ( {
+	applyWaveformPlayerStyles: jest.fn(),
 	initWaveformPlayer: jest.fn(),
+	setupPlayButtonArtwork: jest.fn(),
+	updateSeekControlLabel: jest.fn(),
 } ) );
 
 /**
@@ -29,29 +32,72 @@ jest.mock( '../waveform-utils', () => ( {
 function createFakePlayer( options, element ) {
 	const titleEl = document.createElement( 'span' );
 	titleEl.textContent = options.title ?? '';
-	// The subtitle and artwork elements only exist when the track had an
-	// artist/image when the player was created, mirroring the library markup.
-	let subtitleEl = null;
+	// The artist and artwork elements only exist when the track had an
+	// artist/player artwork when the player was created, mirroring the library markup.
+	let artistEl = null;
 	if ( options.artist ) {
-		subtitleEl = document.createElement( 'span' );
-		subtitleEl.textContent = options.artist;
+		artistEl = document.createElement( 'span' );
+		artistEl.textContent = options.artist;
 	}
 	let artworkEl = null;
-	if ( options.image ) {
+	if ( options.image && ! options.showPlayButtonArtwork ) {
 		artworkEl = document.createElement( 'img' );
 		artworkEl.src = options.image;
+		artworkEl.alt = options.imageAlt || '';
 	}
 
 	element.append( titleEl );
-	if ( subtitleEl ) {
-		element.append( subtitleEl );
+	if ( artistEl ) {
+		element.append( artistEl );
 	}
 	if ( artworkEl ) {
 		element.append( artworkEl );
 	}
 
+	const instance = {
+		titleEl,
+		artistEl: artistEl || null,
+		artworkEl: artworkEl || null,
+		pause: jest.fn(),
+		syncArtist: jest.fn( ( artist ) => {
+			if ( ! artist ) {
+				instance.artistEl?.remove();
+				instance.artistEl = null;
+				return;
+			}
+			if ( ! instance.artistEl ) {
+				instance.artistEl = document.createElement( 'span' );
+				element.append( instance.artistEl );
+			}
+			instance.artistEl.textContent = artist;
+			instance.artistEl.style.display = '';
+		} ),
+		syncArtwork: jest.fn( ( image, imageAlt = '' ) => {
+			if ( ! image ) {
+				instance.artworkEl?.remove();
+				instance.artworkEl = null;
+				return;
+			}
+			if ( ! instance.artworkEl ) {
+				instance.artworkEl = document.createElement( 'img' );
+				element.append( instance.artworkEl );
+			}
+			instance.artworkEl.src = image;
+			instance.artworkEl.alt = imageAlt || '';
+		} ),
+		loadTrack: jest.fn( async ( src, title, artist, trackOptions ) => {
+			titleEl.textContent = title;
+			instance.syncArtist( artist );
+			instance.syncArtwork(
+				trackOptions.artwork,
+				trackOptions.artworkAlt
+			);
+		} ),
+	};
+
 	return {
-		instance: { titleEl, subtitleEl, artworkEl },
+		instance,
+		container: element,
 		destroy: jest.fn(),
 	};
 }
@@ -67,7 +113,9 @@ describe( 'WaveformPlayer', () => {
 	afterEach( () => {
 		jest.runOnlyPendingTimers();
 		jest.useRealTimers();
+		applyWaveformPlayerStyles.mockReset();
 		initWaveformPlayer.mockReset();
+		setupPlayButtonArtwork.mockReset();
 	} );
 
 	const baseProps = {
@@ -75,6 +123,7 @@ describe( 'WaveformPlayer', () => {
 		title: 'Original Title',
 		artist: 'Original Artist',
 		image: 'https://example.com/cover.jpg',
+		imageAlt: 'A bright abstract track image',
 		onEnded: () => {},
 	};
 
@@ -93,10 +142,95 @@ describe( 'WaveformPlayer', () => {
 				title: 'Original Title',
 				artist: 'Original Artist',
 				image: 'https://example.com/cover.jpg',
+				imageAlt: 'A bright abstract track image',
+				showPlayButtonArtwork: false,
+			} )
+		);
+	} );
+
+	it( 'passes the play button artwork option to the shared player', () => {
+		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				showPlayButtonArtwork: true,
+			} )
+		);
+	} );
+
+	it( 'initializes the player with custom color values', () => {
+		render(
+			<WaveformPlayer
+				{ ...baseProps }
+				color="#ff0000"
+				gradient="linear-gradient(90deg,#ff0000 0%,#0000ff 100%)"
+				backgroundColor="#ffeeaa"
+				backgroundGradient="linear-gradient(90deg,#ffeeaa 0%,#aabbcc 100%)"
+				textColor="#0000ff"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformColor: '#ff0000',
+				waveformGradient:
+					'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
+				backgroundColor: '#ffeeaa',
+				backgroundGradient:
+					'linear-gradient(90deg,#ffeeaa 0%,#aabbcc 100%)',
+				textColor: '#0000ff',
 			} )
 		);
 	} );
 
+	it( 'omits separate player artwork when play button artwork is enabled', () => {
+		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		expect( player.instance.artworkEl ).toBeNull();
+	} );
+
+	it( 'updates play button artwork when artwork metadata changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } showPlayButtonArtwork />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				image="https://example.com/new.jpg"
+				showPlayButtonArtwork
+			/>
+		);
+
+		expect( setupPlayButtonArtwork ).toHaveBeenCalledWith(
+			player.container,
+			'https://example.com/new.jpg'
+		);
+		expect( player.instance.artworkEl ).toBeNull();
+	} );
+
 	it( 'updates metadata on the live player without recreating it', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
@@ -112,6 +246,7 @@ describe( 'WaveformPlayer', () => {
 				title="New Title"
 				artist="New Artist"
 				image="https://example.com/new.jpg"
+				imageAlt="A black and white portrait"
 			/>
 		);
 
@@ -119,14 +254,18 @@ describe( 'WaveformPlayer', () => {
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
 		expect( player.destroy ).not.toHaveBeenCalled();
 		expect( player.instance.titleEl ).toHaveTextContent( 'New Title' );
-		expect( player.instance.subtitleEl ).toHaveTextContent( 'New Artist' );
+		expect( player.instance.artistEl ).toHaveTextContent( 'New Artist' );
 		expect( player.instance.artworkEl ).toHaveAttribute(
 			'src',
 			'https://example.com/new.jpg'
 		);
+		expect( player.instance.artworkEl ).toHaveAttribute(
+			'alt',
+			'A black and white portrait'
+		);
 	} );
 
-	it( 'recreates the player when the src changes', () => {
+	it( 'does not recreate the player when the src changes', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
@@ -146,11 +285,141 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.loadTrack ).toHaveBeenCalledWith(
+			'https://example.com/other.mp3',
+			'Original Title',
+			'Original Artist',
+			{
+				artwork: 'https://example.com/cover.jpg',
+				artworkAlt: 'A bright abstract track image',
+			}
+		);
+	} );
+
+	it( 'recreates the player when play button artwork is toggled', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } showPlayButtonArtwork={ false } />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer.mock.calls[ 1 ][ 1 ] ).toEqual(
+			expect.objectContaining( {
+				showPlayButtonArtwork: true,
+			} )
+		);
+		expect(
+			initWaveformPlayer.mock.results[ 1 ].value.instance.artworkEl
+		).toBeNull();
+	} );
+
+	it( 'recreates the player when the waveform color changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } color="#ff0000" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } color="#0000ff" /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer ).toHaveBeenLastCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformColor: '#0000ff',
+			} )
+		);
+	} );
+
+	it( 'updates the waveform background color without recreating the player', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } backgroundColor="#ffeeaa" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer { ...baseProps } backgroundColor="#aabbcc" />
+		);
+
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( applyWaveformPlayerStyles ).toHaveBeenCalledWith(
+			player.container,
+			{
+				backgroundColor: '#aabbcc',
+				backgroundGradient: undefined,
+				playButtonColor: undefined,
+				playButtonGradient: undefined,
+				textColor: undefined,
+			}
+		);
+	} );
+
+	it( 'recreates the player when the waveform gradient changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer
+				{ ...baseProps }
+				gradient="linear-gradient(90deg,#ff0000 0%,#0000ff 100%)"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				gradient="linear-gradient(90deg,#00ff00 0%,#0000ff 100%)"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
 		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer ).toHaveBeenLastCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformGradient:
+					'linear-gradient(90deg,#00ff00 0%,#0000ff 100%)',
+			} )
+		);
 	} );
 
-	it( 'recreates the player to show an image added to a track that had none', () => {
+	it( 'updates the player in place to show an image added to a track that had none', () => {
 		const { rerender } = render(
 			<WaveformPlayer { ...baseProps } image="" />
 		);
@@ -174,16 +443,15 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
-		expect( firstPlayer.destroy ).toHaveBeenCalledTimes( 1 );
-		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
-		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
-		expect( secondPlayer.instance.artworkEl ).toHaveAttribute(
+		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( firstPlayer.instance.artworkEl ).toHaveAttribute(
 			'src',
 			'https://example.com/added.jpg'
 		);
 	} );
 
-	it( 'recreates the player when the image is removed', () => {
+	it( 'updates the player in place when the image is removed', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
@@ -198,10 +466,9 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
-		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
-		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
-		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
-		expect( secondPlayer.instance.artworkEl ).toBeNull();
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.artworkEl ).toBeNull();
 	} );
 
 	it( 'updates the player in place to show an artist added to a track that had none', () => {
@@ -214,21 +481,16 @@ describe( 'WaveformPlayer', () => {
 		} );
 
 		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
-		// The editor seeds a hidden subtitle element so artist edits can
-		// update in place.
-		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent( '' );
-		expect( firstPlayer.instance.subtitleEl ).toHaveStyle( {
-			display: 'none',
-		} );
+		expect( firstPlayer.instance.artistEl ).toBeNull();
 
 		rerender( <WaveformPlayer { ...baseProps } artist="New Artist" /> );
 
 		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
-		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent(
+		expect( firstPlayer.instance.artistEl ).toHaveTextContent(
 			'New Artist'
 		);
-		expect( firstPlayer.instance.subtitleEl ).not.toHaveStyle( {
+		expect( firstPlayer.instance.artistEl ).not.toHaveStyle( {
 			display: 'none',
 		} );
 	} );
@@ -246,9 +508,6 @@ describe( 'WaveformPlayer', () => {
 
 		expect( player.destroy ).not.toHaveBeenCalled();
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
-		expect( player.instance.subtitleEl ).toHaveTextContent( '' );
-		expect( player.instance.subtitleEl ).toHaveStyle( {
-			display: 'none',
-		} );
+		expect( player.instance.artistEl ).toBeNull();
 	} );
 } );