@wordpress/block-library 11.0.0 → 11.1.0

package/src/utils/test/waveform-player.jsdom.test.jsx

@@ -1,4 +1,5 @@
-import '@testing-library/jest-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
 import { act, render } from '@testing-library/react';
 import { WaveformPlayer } from '../waveform-player';
 import {
@@ -7,11 +8,11 @@ import {
 	setupPlayButtonArtwork,
 } from '../waveform-utils';
 
-jest.mock( '../waveform-utils', () => ( {
-	applyWaveformPlayerStyles: jest.fn(),
-	initWaveformPlayer: jest.fn(),
-	setupPlayButtonArtwork: jest.fn(),
-	updateSeekControlLabel: jest.fn(),
+vi.mock( import( '../waveform-utils' ), () => ( {
+	applyWaveformPlayerStyles: vi.fn(),
+	initWaveformPlayer: vi.fn(),
+	setupPlayButtonArtwork: vi.fn(),
+	updateSeekControlLabel: vi.fn(),
 } ) );
 
 /**
@@ -51,8 +52,8 @@ function createFakePlayer( options, element ) {
 		titleEl,
 		artistEl: artistEl || null,
 		artworkEl: artworkEl || null,
-		pause: jest.fn(),
-		syncArtist: jest.fn( ( artist ) => {
+		pause: vi.fn(),
+		syncArtist: vi.fn( ( artist ) => {
 			if ( ! artist ) {
 				instance.artistEl?.remove();
 				instance.artistEl = null;
@@ -65,7 +66,7 @@ function createFakePlayer( options, element ) {
 			instance.artistEl.textContent = artist;
 			instance.artistEl.style.display = '';
 		} ),
-		syncArtwork: jest.fn( ( image, imageAlt = '' ) => {
+		syncArtwork: vi.fn( ( image, imageAlt = '' ) => {
 			if ( ! image ) {
 				instance.artworkEl?.remove();
 				instance.artworkEl = null;
@@ -78,7 +79,7 @@ function createFakePlayer( options, element ) {
 			instance.artworkEl.src = image;
 			instance.artworkEl.alt = imageAlt || '';
 		} ),
-		loadTrack: jest.fn( async ( src, title, artist, trackOptions ) => {
+		loadTrack: vi.fn( async ( src, title, artist, trackOptions ) => {
 			titleEl.textContent = title;
 			instance.syncArtist( artist );
 			instance.syncArtwork(
@@ -91,21 +92,21 @@ function createFakePlayer( options, element ) {
 	return {
 		instance,
 		container: element,
-		destroy: jest.fn(),
+		destroy: vi.fn(),
 	};
 }
 
 describe( 'WaveformPlayer', () => {
 	beforeEach( () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 		initWaveformPlayer.mockImplementation( ( element, options ) =>
 			createFakePlayer( options, element )
 		);
 	} );
 
 	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
+		vi.runOnlyPendingTimers();
+		vi.useRealTimers();
 		applyWaveformPlayerStyles.mockReset();
 		initWaveformPlayer.mockReset();
 		setupPlayButtonArtwork.mockReset();
@@ -124,7 +125,7 @@ describe( 'WaveformPlayer', () => {
 		render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
@@ -145,7 +146,7 @@ describe( 'WaveformPlayer', () => {
 		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( initWaveformPlayer ).toHaveBeenCalledWith(
@@ -169,7 +170,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( initWaveformPlayer ).toHaveBeenCalledWith(
@@ -190,7 +191,7 @@ describe( 'WaveformPlayer', () => {
 		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -204,7 +205,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -228,7 +229,7 @@ describe( 'WaveformPlayer', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -262,7 +263,7 @@ describe( 'WaveformPlayer', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -275,7 +276,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( player.destroy ).not.toHaveBeenCalled();
@@ -297,7 +298,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -305,7 +306,7 @@ describe( 'WaveformPlayer', () => {
 		rerender( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
@@ -326,7 +327,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -334,7 +335,7 @@ describe( 'WaveformPlayer', () => {
 		rerender( <WaveformPlayer { ...baseProps } color="#0000ff" /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
@@ -353,7 +354,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -385,7 +386,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -398,7 +399,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
@@ -418,7 +419,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
@@ -433,7 +434,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
@@ -448,7 +449,7 @@ describe( 'WaveformPlayer', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;
@@ -456,7 +457,7 @@ describe( 'WaveformPlayer', () => {
 		rerender( <WaveformPlayer { ...baseProps } image="" /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		expect( player.destroy ).not.toHaveBeenCalled();
@@ -470,7 +471,7 @@ describe( 'WaveformPlayer', () => {
 		);
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
@@ -483,16 +484,13 @@ describe( 'WaveformPlayer', () => {
 		expect( firstPlayer.instance.artistEl ).toHaveTextContent(
 			'New Artist'
 		);
-		expect( firstPlayer.instance.artistEl ).not.toHaveStyle( {
-			display: 'none',
-		} );
 	} );
 
 	it( 'updates the player in place when the artist is removed', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
-			jest.advanceTimersByTime( 100 );
+			vi.advanceTimersByTime( 100 );
 		} );
 
 		const player = initWaveformPlayer.mock.results[ 0 ].value;

package/src/utils/test/{waveform-utils.jsdom.test.js → waveform-utils.browser.test.js}

@@ -1,4 +1,5 @@
-import '@testing-library/jest-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
 import {
 	applyWaveformPlayerStyles,
 	createWaveformContainer,
@@ -20,6 +21,21 @@ const basePlayerData = {
 	buttonColor: '#000000',
 };
 
+function readStyle( element ) {
+	if ( ! element.isConnected ) {
+		let root = element;
+		while ( root.parentElement ) {
+			root = root.parentElement;
+		}
+		document.body.appendChild( root );
+	}
+	return window.getComputedStyle( element );
+}
+
+afterEach( () => {
+	document.body.replaceChildren();
+} );
+
 describe( 'Waveform utilities', () => {
 	describe( 'createWaveformContainer', () => {
 		it( 'should create a container with required data attributes', () => {
@@ -224,9 +240,9 @@ describe( 'Waveform utilities', () => {
 				backgroundColor: '#ffeeaa',
 			} );
 
-			expect( waveformContainer ).toHaveStyle( {
-				backgroundColor: '#ffeeaa',
-			} );
+			expect( readStyle( waveformContainer ).backgroundColor ).toBe(
+				'rgb(255, 238, 170)'
+			);
 		} );
 
 		it( 'applies the waveform background gradient', () => {
@@ -240,9 +256,9 @@ describe( 'Waveform utilities', () => {
 					'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
 			} );
 
-			expect( waveformContainer ).toHaveStyle( {
-				background: 'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
-			} );
+			expect( readStyle( waveformContainer ).backgroundImage ).toBe(
+				'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)'
+			);
 		} );
 
 		it( 'applies the waveform player text color variables', () => {
@@ -252,10 +268,13 @@ describe( 'Waveform utilities', () => {
 				textColor: '#0000ff',
 			} );
 
-			expect( container ).toHaveStyle( {
-				'--wfp-text-color': '#0000ff',
-				'--wfp-text-secondary-color': '#0000ff',
-			} );
+			const style = readStyle( container );
+			expect( style.getPropertyValue( '--wfp-text-color' ) ).toBe(
+				'#0000ff'
+			);
+			expect(
+				style.getPropertyValue( '--wfp-text-secondary-color' )
+			).toBe( '#0000ff' );
 		} );
 
 		it( 'applies the waveform player play button color variable', () => {
@@ -265,9 +284,9 @@ describe( 'Waveform utilities', () => {
 				playButtonColor: '#ff0000',
 			} );
 
-			expect( container ).toHaveStyle( {
-				'--wfp-button-color': '#ff0000',
-			} );
+			expect(
+				readStyle( container ).getPropertyValue( '--wfp-button-color' )
+			).toBe( '#ff0000' );
 		} );
 
 		it( 'applies the waveform player play button gradient', () => {
@@ -281,12 +300,12 @@ describe( 'Waveform utilities', () => {
 					'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
 			} );
 
-			expect( playButton ).toHaveStyle( {
-				background: 'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
-			} );
-			expect( container ).toHaveStyle( {
-				'--wfp-button-color': '#0000ff',
-			} );
+			expect( readStyle( playButton ).backgroundImage ).toBe(
+				'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)'
+			);
+			expect(
+				readStyle( container ).getPropertyValue( '--wfp-button-color' )
+			).toBe( '#0000ff' );
 		} );
 
 		it( 'removes the waveform background color when cleared', () => {
@@ -298,9 +317,9 @@ describe( 'Waveform utilities', () => {
 
 			applyWaveformPlayerStyles( container );
 
-			expect( waveformContainer ).not.toHaveStyle( {
-				backgroundColor: '#ffeeaa',
-			} );
+			expect( readStyle( waveformContainer ).backgroundColor ).not.toBe(
+				'rgb(255, 238, 170)'
+			);
 		} );
 
 		it( 'removes the waveform player text color variables when cleared', () => {
@@ -313,10 +332,11 @@ describe( 'Waveform utilities', () => {
 
 			applyWaveformPlayerStyles( container );
 
-			expect( container ).not.toHaveStyle( {
-				'--wfp-text-color': '#0000ff',
-				'--wfp-text-secondary-color': '#0000ff',
-			} );
+			const style = readStyle( container );
+			expect( style.getPropertyValue( '--wfp-text-color' ) ).toBe( '' );
+			expect(
+				style.getPropertyValue( '--wfp-text-secondary-color' )
+			).toBe( '' );
 		} );
 
 		it( 'removes the waveform player play button color variable when cleared', () => {
@@ -325,9 +345,9 @@ describe( 'Waveform utilities', () => {
 
 			applyWaveformPlayerStyles( container );
 
-			expect( container ).not.toHaveStyle( {
-				'--wfp-button-color': '#ff0000',
-			} );
+			expect(
+				readStyle( container ).getPropertyValue( '--wfp-button-color' )
+			).toBe( '' );
 		} );
 	} );
 
@@ -347,7 +367,7 @@ describe( 'Waveform utilities', () => {
 
 			styleSvgIcons( container, '#000000' );
 
-			expect( path ).toHaveStyle( { fill: '#ffffff' } );
+			expect( readStyle( path ).fill ).toBe( 'rgb(255, 255, 255)' );
 		} );
 
 		it( 'should set black fill for light button colors', () => {
@@ -365,7 +385,7 @@ describe( 'Waveform utilities', () => {
 
 			styleSvgIcons( container, '#ffffff' );
 
-			expect( path ).toHaveStyle( { fill: '#000000' } );
+			expect( readStyle( path ).fill ).toBe( 'rgb(0, 0, 0)' );
 		} );
 
 		it( 'should style multiple SVG paths', () => {
@@ -388,8 +408,8 @@ describe( 'Waveform utilities', () => {
 
 			styleSvgIcons( container, '#000000' );
 
-			expect( path1 ).toHaveStyle( { fill: '#ffffff' } );
-			expect( path2 ).toHaveStyle( { fill: '#ffffff' } );
+			expect( readStyle( path1 ).fill ).toBe( 'rgb(255, 255, 255)' );
+			expect( readStyle( path2 ).fill ).toBe( 'rgb(255, 255, 255)' );
 		} );
 
 		it( 'should handle container with no SVG paths', () => {
@@ -417,7 +437,7 @@ describe( 'Waveform utilities', () => {
 			// A dark blue color.
 			styleSvgIcons( container, '#000080' );
 
-			expect( path ).toHaveStyle( { fill: '#ffffff' } );
+			expect( readStyle( path ).fill ).toBe( 'rgb(255, 255, 255)' );
 		} );
 
 		it( 'should use black for mid-light colors', () => {
@@ -436,7 +456,7 @@ describe( 'Waveform utilities', () => {
 			// A light yellow color.
 			styleSvgIcons( container, '#ffff00' );
 
-			expect( path ).toHaveStyle( { fill: '#000000' } );
+			expect( readStyle( path ).fill ).toBe( 'rgb(0, 0, 0)' );
 		} );
 	} );
 
@@ -455,7 +475,7 @@ describe( 'Waveform utilities', () => {
 			const instance = {
 				container,
 				options: {},
-				applySeekLabel: jest.fn( ( label ) => {
+				applySeekLabel: vi.fn( ( label ) => {
 					seekControl.setAttribute( 'aria-label', label );
 				} ),
 			};
@@ -614,7 +634,7 @@ describe( 'Waveform utilities', () => {
 				'https://example.com/cover.jpg'
 			);
 
-			expect( path ).not.toHaveStyle( { fill: '#ffffff' } );
+			expect( readStyle( path ).fill ).not.toBe( 'rgb(255, 255, 255)' );
 		} );
 
 		it( 'should set artwork state when play button is missing', () => {
@@ -684,19 +704,19 @@ describe( 'Waveform utilities', () => {
 			// from running so the test only exercises the synchronous
 			// construction path, where the crossOrigin behavior is decided
 			// before any request is made.
-			jest.useFakeTimers();
+			vi.useFakeTimers();
 
 			// jsdom does not implement canvas rendering or media playback;
 			// stub them out so the library's construction and destroy paths
 			// do not emit "Not implemented" console errors.
 			jsdomStubs = [
-				jest
+				vi
 					.spyOn( window.HTMLCanvasElement.prototype, 'getContext' )
 					.mockReturnValue( null ),
-				jest
+				vi
 					.spyOn( window.HTMLMediaElement.prototype, 'pause' )
 					.mockImplementation( () => {} ),
-				jest
+				vi
 					.spyOn( window.HTMLMediaElement.prototype, 'load' )
 					.mockImplementation( () => {} ),
 			];
@@ -704,7 +724,7 @@ describe( 'Waveform utilities', () => {
 
 		afterEach( () => {
 			jsdomStubs.forEach( ( stub ) => stub.mockRestore() );
-			jest.useRealTimers();
+			vi.useRealTimers();
 			document.body.innerHTML = '';
 		} );
 
@@ -740,7 +760,7 @@ describe( 'Waveform utilities', () => {
 		let consoleErrorSpy;
 
 		beforeEach( () => {
-			consoleErrorSpy = jest
+			consoleErrorSpy = vi
 				.spyOn( console, 'error' )
 				.mockImplementation( () => {} );
 		} );

package/src/verse/README.md

@@ -35,6 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
   - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/verse/block.json

@@ -56,6 +56,7 @@
 				"fontSize": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/verse/style.scss

@@ -5,8 +5,8 @@ pre.wp-block-verse {
 
 	// Prevent text overflow off-screen when the previous block has float.
 	min-width: 1em;
-	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
-	word-break: break-word;
+	word-break: normal;
+	overflow-wrap: break-word;
 }
 
 :where(pre.wp-block-verse) {

package/src/video/README.md

@@ -41,6 +41,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `padding`: `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
+
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **shadow**: `.wp-block-video video`
 
 ## Block Markup
 

package/src/video/block.json

@@ -101,8 +101,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
 		}
 	},
+	"selectors": {
+		"shadow": ".wp-block-video video"
+	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"
 }

package/src/video/edit-common-settings.jsx

@@ -1,7 +1,7 @@
 import { __, _x } from '@wordpress/i18n';
 import {
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useMemo, useCallback } from '@wordpress/element';
@@ -134,7 +134,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 							? __( 'Play inline enabled because of Autoplay.' )
 							: __(
 									'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
-							  )
+								)
 					}
 				/>
 			</ToolsPanelItem>
@@ -146,7 +146,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 					setAttributes( { preload: 'metadata' } );
 				} }
 			>
-				<SelectControl
+				<WCSelectControl
 					label={ __( 'Preload' ) }
 					value={ preload }
 					onChange={ onChangePreload }