@wordpress/block-library 10.2.0 → 10.4.0

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

@@ -0,0 +1,203 @@
+import '@testing-library/jest-dom';
+
+const DEFAULT_PLAYBACK_RATES = [
+	'0.5x',
+	'0.75x',
+	'1x',
+	'1.25x',
+	'1.5x',
+	'1.75x',
+	'2x',
+];
+const FIXTURE_ATTRIBUTE = 'data-player-fixture';
+
+function createDeclarativePlayer( attributes = {} ) {
+	const element = document.createElement( 'div' );
+	element.setAttribute( 'data-waveform-player', '' );
+
+	for ( const [ name, value ] of Object.entries( attributes ) ) {
+		element.setAttribute( name, value );
+	}
+
+	document.body.appendChild( element );
+	return element;
+}
+
+function loadWaveformPlayer() {
+	let WaveformPlayer;
+
+	jest.isolateModules( () => {
+		WaveformPlayer = require( '@arraypress/waveform-player' ).default;
+	} );
+
+	return WaveformPlayer;
+}
+
+function getFragmentedAttributeValue( prefix = '' ) {
+	return `${ prefix }" ${ FIXTURE_ATTRIBUTE }="sample`;
+}
+
+describe( 'Waveform Player dependency', () => {
+	let WaveformPlayer;
+	let originalReadyState;
+	let jsdomStubs;
+
+	beforeEach( () => {
+		jest.useFakeTimers();
+		originalReadyState = Object.getOwnPropertyDescriptor(
+			document,
+			'readyState'
+		);
+		Object.defineProperty( document, 'readyState', {
+			configurable: true,
+			value: 'complete',
+		} );
+
+		jsdomStubs = [
+			jest
+				.spyOn( window.HTMLCanvasElement.prototype, 'getContext' )
+				.mockReturnValue( null ),
+			jest
+				.spyOn( window.HTMLMediaElement.prototype, 'pause' )
+				.mockImplementation( () => {} ),
+			jest
+				.spyOn( window.HTMLMediaElement.prototype, 'load' )
+				.mockImplementation( () => {} ),
+		];
+	} );
+
+	afterEach( () => {
+		WaveformPlayer?.destroyAll();
+		jsdomStubs.forEach( ( stub ) => stub.mockRestore() );
+		jest.useRealTimers();
+		jest.resetModules();
+		document.body.innerHTML = '';
+		delete window.WaveformPlayer;
+
+		if ( originalReadyState ) {
+			Object.defineProperty( document, 'readyState', originalReadyState );
+		} else {
+			delete document.readyState;
+		}
+	} );
+
+	it( 'uses the default control icons when declarative icon values are unsupported', () => {
+		const iconValue = `<span ${ FIXTURE_ATTRIBUTE }></span>`;
+		const element = createDeclarativePlayer( {
+			'data-play-icon': iconValue,
+			'data-pause-icon': iconValue,
+		} );
+
+		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer.init();
+
+		expect(
+			element.querySelector( `[${ FIXTURE_ATTRIBUTE }]` )
+		).toBeNull();
+		expect(
+			element.querySelector( '.waveform-icon-play svg' )
+		).not.toBeNull();
+		expect(
+			element.querySelector( '.waveform-icon-pause svg' )
+		).not.toBeNull();
+	} );
+
+	it( 'uses the default alignment when a declarative alignment value is unsupported', () => {
+		const element = createDeclarativePlayer( {
+			'data-button-align': getFragmentedAttributeValue( 'center' ),
+		} );
+
+		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer.init();
+
+		const track = element.querySelector( '.waveform-track' );
+		expect( track ).toHaveClass( 'waveform-align-center' );
+		expect( track ).not.toHaveAttribute( FIXTURE_ATTRIBUTE );
+	} );
+
+	it( 'uses the default playback rates when a declarative rate list is unsupported', () => {
+		const element = createDeclarativePlayer( {
+			'data-show-playback-speed': 'true',
+			'data-playback-rates': JSON.stringify( [
+				1,
+				getFragmentedAttributeValue( '1' ),
+				1.5,
+			] ),
+		} );
+
+		WaveformPlayer = loadWaveformPlayer();
+		WaveformPlayer.init();
+
+		const options = [ ...element.querySelectorAll( '.speed-option' ) ];
+		expect( options.map( ( option ) => option.textContent ) ).toEqual(
+			DEFAULT_PLAYBACK_RATES
+		);
+		expect(
+			options.some( ( option ) =>
+				option.hasAttribute( FIXTURE_ATTRIBUTE )
+			)
+		).toBe( false );
+	} );
+
+	it( 'supports custom control icons passed to the constructor', () => {
+		const element = document.createElement( 'div' );
+		const icon = document.createElementNS(
+			'http://www.w3.org/2000/svg',
+			'svg'
+		);
+		icon.setAttribute( FIXTURE_ATTRIBUTE, 'constructor' );
+		document.body.appendChild( element );
+
+		WaveformPlayer = loadWaveformPlayer();
+		new WaveformPlayer( element, {
+			playIcon: icon.outerHTML,
+		} );
+
+		expect(
+			element.querySelector( `[${ FIXTURE_ATTRIBUTE }="constructor"]` )
+		).not.toBeNull();
+	} );
+
+	it( 'skips programmatic players during explicit declarative scans', () => {
+		const element = createDeclarativePlayer();
+		const icon = document.createElementNS(
+			'http://www.w3.org/2000/svg',
+			'svg'
+		);
+		icon.setAttribute( FIXTURE_ATTRIBUTE, 'constructor-scan' );
+
+		WaveformPlayer = loadWaveformPlayer();
+		const player = new WaveformPlayer( element, {
+			playIcon: icon.outerHTML,
+		} );
+
+		WaveformPlayer.init();
+
+		expect( WaveformPlayer.getAllInstances() ).toHaveLength( 1 );
+		expect( WaveformPlayer.getInstance( element ) ).toBe( player );
+		expect(
+			element.querySelector(
+				`[${ FIXTURE_ATTRIBUTE }="constructor-scan"]`
+			)
+		).not.toBeNull();
+	} );
+
+	it( 'initializes declarative players only after an explicit request', () => {
+		const element = createDeclarativePlayer();
+
+		WaveformPlayer = loadWaveformPlayer();
+
+		expect( element ).not.toHaveAttribute( 'data-waveform-initialized' );
+		expect( element ).toBeEmptyDOMElement();
+
+		WaveformPlayer.init();
+
+		expect( element ).toHaveAttribute(
+			'data-waveform-initialized',
+			'true'
+		);
+		expect(
+			element.querySelector( '.waveform-player-inner' )
+		).not.toBeNull();
+	} );
+} );

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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import '@testing-library/jest-dom';
 import { act, render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { WaveformPlayer } from '../waveform-player';
 import {
 	applyWaveformPlayerStyles,

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

@@ -1,16 +1,10 @@
-/**
- * External dependencies
- */
 import '@testing-library/jest-dom';
-
-/**
- * Internal dependencies
- */
 import {
 	applyWaveformPlayerStyles,
 	createWaveformContainer,
 	getWaveformColors,
 	getWaveformGradientStops,
+	initWaveformPlayer,
 	styleSvgIcons,
 	setupPlayButtonAccessibility,
 	setupPlayButtonArtwork,
@@ -680,6 +674,68 @@ describe( 'Waveform utilities', () => {
 		} );
 	} );
 
+	describe( 'initWaveformPlayer', () => {
+		let jsdomStubs;
+
+		beforeEach( () => {
+			// The WaveformPlayer library defers loading the audio source
+			// (and canvas work jsdom cannot perform) to a
+			// requestAnimationFrame callback. Fake timers keep that callback
+			// from running so the test only exercises the synchronous
+			// construction path, where the crossOrigin behavior is decided
+			// before any request is made.
+			jest.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
+					.spyOn( window.HTMLCanvasElement.prototype, 'getContext' )
+					.mockReturnValue( null ),
+				jest
+					.spyOn( window.HTMLMediaElement.prototype, 'pause' )
+					.mockImplementation( () => {} ),
+				jest
+					.spyOn( window.HTMLMediaElement.prototype, 'load' )
+					.mockImplementation( () => {} ),
+			];
+		} );
+
+		afterEach( () => {
+			jsdomStubs.forEach( ( stub ) => stub.mockRestore() );
+			jest.useRealTimers();
+			document.body.innerHTML = '';
+		} );
+
+		it( 'does not set the crossOrigin attribute on the audio element', () => {
+			const element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			const player = initWaveformPlayer( element, {
+				src: 'https://cdn.example.com/track.mp3',
+				title: 'Test track',
+				labels: { seek: 'Seek' },
+			} );
+
+			/*
+			 * crossOrigin forces a CORS request and breaks playback of tracks
+			 * served without CORS headers (e.g. media offloaded to a CDN).
+			 * waveform-player < 1.23.0 hardcoded crossOrigin="anonymous";
+			 * 1.23.0 leaves it unset by default. Guard against a regression
+			 * (e.g. a dependency downgrade or a default flip upstream).
+			 * See https://core.trac.wordpress.org/ticket/65673.
+			 */
+			expect( player.instance.audio ).not.toBeNull();
+			expect( player.instance.audio.crossOrigin ).toBeNull();
+			expect( player.instance.audio ).not.toHaveAttribute(
+				'crossorigin'
+			);
+
+			player.destroy();
+		} );
+	} );
+
 	describe( 'logPlayError', () => {
 		let consoleErrorSpy;
 

package/src/utils/waveform-player.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useRef } from '@wordpress/element';
 import { useEvent, useRefEffect } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import {
 	applyWaveformPlayerStyles,
 	initWaveformPlayer,

package/src/utils/waveform-utils.js

@@ -2,10 +2,6 @@
  * Shared utilities for waveform audio player functionality.
  * Used by both the WaveformPlayer component (editor) and view.js (frontend).
  */
-
-/**
- * External dependencies
- */
 import { colord } from 'colord';
 import WaveformPlayerLib from '@arraypress/waveform-player';
 

package/src/verse/deprecated.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import migrateFontFamily from '../utils/migrate-font-family';
 import migrateTextAlign from '../utils/migrate-text-align';
 

package/src/verse/edit.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 export default function VerseEdit( props ) {
@@ -40,8 +33,13 @@ export default function VerseEdit( props ) {
 			onMerge={ mergeBlocks }
 			{ ...blockProps }
 			__unstablePastePlainText
-			__unstableOnSplitAtDoubleLineEnd={ () =>
-				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			__unstableOnSplitAtDoubleLineEnd={
+				insertBlocksAfter
+					? () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+					: undefined
 			}
 		/>
 	);

package/src/verse/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { verse as icon } from '@wordpress/icons';
 import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/verse/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/verse/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {

package/src/verse/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/video/deprecated.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import metadata from './block.json';
 import Tracks from './tracks';
 

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import {
 	ToggleControl,

package/src/video/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { isBlobURL } from '@wordpress/blob';
 import {
 	Spinner,
@@ -27,10 +20,6 @@ import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { prependHTTPS } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import {
 	useUploadMediaFromBlobURL,
@@ -225,36 +214,38 @@ function VideoEdit( {
 					</BlockControls>
 				</>
 			) }
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							autoplay: false,
-							controls: true,
-							loop: false,
-							muted: false,
-							playsInline: false,
-							preload: 'metadata',
-							poster: undefined,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<VideoCommonSettings
-						setAttributes={ setAttributes }
-						attributes={ attributes }
-					/>
-					<PosterImage
-						poster={ poster }
-						onChange={ ( posterImage ) =>
+			{ ! isGif && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
 							setAttributes( {
-								poster: posterImage?.url,
-							} )
-						}
-					/>
-				</ToolsPanel>
-			</InspectorControls>
+								autoplay: false,
+								controls: true,
+								loop: false,
+								muted: false,
+								playsInline: false,
+								preload: 'metadata',
+								poster: undefined,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<VideoCommonSettings
+							setAttributes={ setAttributes }
+							attributes={ attributes }
+						/>
+						<PosterImage
+							poster={ poster }
+							onChange={ ( posterImage ) =>
+								setAttributes( {
+									poster: posterImage?.url,
+								} )
+							}
+						/>
+					</ToolsPanel>
+				</InspectorControls>
+			) }
 			<figure { ...blockProps }>
 				<video
 					controls={ controls }

package/src/video/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { video as icon } from '@wordpress/icons';
 import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/video/index.php

@@ -17,8 +17,8 @@
  * @return string The block content with the dimensions added.
  */
 function render_block_core_video( array $attributes, string $content ): string {
-	// if the content lacks any video tag, abort.
-	if ( ! str_contains( $content, '<video' ) ) {
+	// If the content lacks any video tag (either <video> or <VIDEO>), abort. Note that str_contains() is case-sensitive.
+	if ( stripos( $content, '<video' ) === false ) {
 		return $content;
 	}
 

package/src/video/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/video/save.js

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import Tracks from './tracks';
 
 export default function save( { attributes } ) {

package/src/video/test/variations.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import variations, { isGifVariation } from '../variations';
 
 const GIF_ATTRIBUTES = {

package/src/video/tracks-editor.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	NavigableMenu,
@@ -28,10 +25,6 @@ import { upload, media } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../lock-unlock';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );
@@ -156,7 +149,6 @@ function SingleTrackEditor( {
 					}
 				/>
 				<ToggleControl
-					__next40pxDefaultSize
 					label={ __( 'Set as default track' ) }
 					checked={ isDefaultTrack }
 					disabled={ ! allowSettingDefault }

package/src/video/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 

package/src/video/variations.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { video as videoIcon } from '@wordpress/icons';
 
@@ -32,7 +29,7 @@ const variations = [
 		name: 'video',
 		title: __( 'Video' ),
 		description: __(
-			'Embed a video from your media library or upload a new one.'
+			'A video with customizable playback and interaction controls.'
 		),
 		icon: videoIcon,
 		attributes: { controls: true },