Playlist: Disable waveform player auto-init

Author: scruffian

package-lock.json

@@ -18,6 +18,7 @@
 ### Bug Fixes
 
 -   Footnotes: Treat unreadable `footnotes` post meta as no footnotes instead of throwing, so the block shows its placeholder rather than the block crash warning ([#81201](https://github.com/WordPress/gutenberg/pull/81201)).
+-   Playlist: Disable waveform player auto-initialization before loading the dependency, and sanitize custom SVG icons passed through the Playlist waveform utility.
 -   Playlist: Improve handling of declarative waveform player configuration ([#81342](https://github.com/WordPress/gutenberg/pull/81342)).
 -   Cover: Pass `'full'` instead of `null` as the featured image size for parallax and repeated backgrounds, so a null array offset is no longer reached on PHP 8.5 ([#81444](https://github.com/WordPress/gutenberg/pull/81444)).
 -   Icon: Apply only padding to the inner SVG in the editor, so margin is no longer applied twice compared to the front end ([#81292](https://github.com/WordPress/gutenberg/pull/81292)).

packages/block-library/CHANGELOG.md

@@ -92,7 +92,7 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@arraypress/waveform-player": "^1.23.0",
+		"@arraypress/waveform-player": "^1.26.0",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/autop": "file:../autop",

packages/block-library/package.json

@@ -0,0 +1,30 @@
+const AUTOINIT_ATTRIBUTE = 'data-waveform-autoinit';
+
+let documentElement;
+let hadAutoinitAttribute = false;
+let previousAutoinitValue;
+
+if ( typeof document !== 'undefined' ) {
+	documentElement = document.documentElement;
+	hadAutoinitAttribute = documentElement.hasAttribute( AUTOINIT_ATTRIBUTE );
+	previousAutoinitValue = documentElement.getAttribute( AUTOINIT_ATTRIBUTE );
+
+	// The waveform player checks this during module evaluation, before callers
+	// can run code just before constructing an instance.
+	documentElement.setAttribute( AUTOINIT_ATTRIBUTE, 'false' );
+}
+
+export function restoreWaveformAutoinitAttribute() {
+	if ( ! documentElement ) {
+		return;
+	}
+
+	if ( hadAutoinitAttribute ) {
+		documentElement.setAttribute(
+			AUTOINIT_ATTRIBUTE,
+			previousAutoinitValue
+		);
+	} else {
+		documentElement.removeAttribute( AUTOINIT_ATTRIBUTE );
+	}
+}

packages/block-library/src/utils/disable-waveform-autoinit.js

@@ -1,14 +1,5 @@
 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 = {} ) {
@@ -25,11 +16,28 @@ function createDeclarativePlayer( attributes = {} ) {
 
 function loadWaveformPlayer() {
 	let WaveformPlayer;
+	const documentElement = document.documentElement;
+	const hadAutoinitAttribute = documentElement.hasAttribute(
+		'data-waveform-autoinit'
+	);
+	const previousAutoinitValue = documentElement.getAttribute(
+		'data-waveform-autoinit'
+	);
 
 	jest.isolateModules( () => {
+		documentElement.setAttribute( 'data-waveform-autoinit', 'false' );
 		WaveformPlayer = require( '@arraypress/waveform-player' ).default;
 	} );
 
+	if ( hadAutoinitAttribute ) {
+		documentElement.setAttribute(
+			'data-waveform-autoinit',
+			previousAutoinitValue
+		);
+	} else {
+		documentElement.removeAttribute( 'data-waveform-autoinit' );
+	}
+
 	return WaveformPlayer;
 }
 
@@ -81,27 +89,6 @@ describe( 'Waveform Player dependency', () => {
 		}
 	} );
 
-	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' ),
@@ -113,9 +100,13 @@ describe( 'Waveform Player dependency', () => {
 		const track = element.querySelector( '.waveform-track' );
 		expect( track ).toHaveClass( 'waveform-align-center' );
 		expect( track ).not.toHaveAttribute( FIXTURE_ATTRIBUTE );
+		expect( console ).toHaveWarnedWith(
+			'[WaveformPlayer] Invalid buttonAlign option, using default:',
+			getFragmentedAttributeValue( 'center' )
+		);
 	} );
 
-	it( 'uses the default playback rates when a declarative rate list is unsupported', () => {
+	it( 'uses supported playback rates from declarative rate lists', () => {
 		const element = createDeclarativePlayer( {
 			'data-show-playback-speed': 'true',
 			'data-playback-rates': JSON.stringify( [
@@ -129,9 +120,10 @@ describe( 'Waveform Player dependency', () => {
 		WaveformPlayer.init();
 
 		const options = [ ...element.querySelectorAll( '.speed-option' ) ];
-		expect( options.map( ( option ) => option.textContent ) ).toEqual(
-			DEFAULT_PLAYBACK_RATES
-		);
+		expect( options.map( ( option ) => option.textContent ) ).toEqual( [
+			'1x',
+			'1.5x',
+		] );
 		expect(
 			options.some( ( option ) =>
 				option.hasAttribute( FIXTURE_ATTRIBUTE )

packages/block-library/src/utils/test/waveform-player-dependency.js

@@ -734,6 +734,88 @@ describe( 'Waveform utilities', () => {
 
 			player.destroy();
 		} );
+
+		it( 'uses default control icons when custom icon markup is unsupported', () => {
+			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' },
+				playIcon: '<span data-player-fixture="icon"></span>',
+				pauseIcon: '<span data-player-fixture="icon"></span>',
+			} );
+
+			expect(
+				player.container.querySelector( '[data-player-fixture]' )
+			).toBeNull();
+			expect(
+				player.container.querySelector( '.waveform-icon-play svg' )
+			).not.toBeNull();
+			expect(
+				player.container.querySelector( '.waveform-icon-pause svg' )
+			).not.toBeNull();
+
+			player.destroy();
+		} );
+
+		it( 'sanitizes custom SVG icon markup', () => {
+			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' },
+				playIcon:
+					'<svg viewBox="0 0 24 24" onclick="alert( \'x\' )" data-player-fixture="svg"><script>alert( \'x\' )</script><path d="M8 5v14l11-7z" onload="alert( \'x\' )" data-player-fixture="path"/></svg>',
+			} );
+
+			const icon = player.container.querySelector(
+				'.waveform-icon-play svg'
+			);
+			expect( icon ).not.toBeNull();
+			expect( icon ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+			expect( icon ).not.toHaveAttribute( 'onclick' );
+			expect( icon.querySelector( 'path' ) ).not.toHaveAttribute(
+				'onload'
+			);
+			expect( icon.querySelector( 'script' ) ).toBeNull();
+			expect(
+				player.container.querySelector( '[data-player-fixture]' )
+			).toBeNull();
+
+			player.destroy();
+		} );
+
+		it( 'supports safe custom SVG icon markup', () => {
+			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' },
+				playIcon:
+					'<svg viewBox="0 0 24 24" aria-hidden="true" fill="none"><path d="M4 12h16" stroke="currentColor" stroke-width="2"/></svg>',
+			} );
+
+			const icon = player.container.querySelector(
+				'.waveform-icon-play svg'
+			);
+			expect( icon ).toHaveAttribute( 'aria-hidden', 'true' );
+			expect( icon.querySelector( 'path' ) ).toHaveAttribute(
+				'stroke',
+				'currentColor'
+			);
+			expect( icon.querySelector( 'path' ) ).toHaveAttribute(
+				'stroke-width',
+				'2'
+			);
+
+			player.destroy();
+		} );
 	} );
 
 	describe( 'logPlayError', () => {