Playlist: Disable waveform player auto-init by scruffian · Pull Request #81489 · WordPress/gutenberg

scruffian · 2026-08-12T09:50:09Z

What?

Disables waveform-player auto-initialization and initializes playlist waveforms explicitly from the Playlist block code path.

Why?

The waveform-player dependency scans the document for [data-waveform-player] elements when it loads. That means any matching markup already on the page can be initialized outside the Playlist block's control. The Playlist block should own initialization so it can avoid unexpected behavior from arbitrary markup.

How?

Updates @arraypress/waveform-player to a version that supports disabling auto-init.
Adds data-waveform-autoinit="false" to the document element before importing the waveform dependency.
Keeps Playlist block initialization explicit through the existing initWaveformPlayer utility.
Sanitizes custom SVG icons before passing them to waveform-player.

Testing Instructions

Automated tests

Run:

npm run test:unit -- packages/block-library/src/utils/test/waveform-player-dependency.js packages/block-library/src/utils/test/waveform-utils.js
npm run lint:js -- packages/block-library/src/utils/waveform-utils.js packages/block-library/src/utils/disable-waveform-autoinit.js packages/block-library/src/utils/test/waveform-player-dependency.js packages/block-library/src/utils/test/waveform-utils.js

Manual testing

Start the development environment:

npm run env start

Open the post editor and insert a normal Playlist block.
Add an audio track to the Playlist block so the Playlist frontend script loads.
Add a separate Custom HTML block to the same post with this fixture:

<div
	id="waveform-autoinit-check"
	data-waveform-player
	data-url="https://example.invalid/unsafe-fixture.mp3"
	data-title="Unsafe fixture"
	data-button-align="unsafe-console-signal"
	data-show-playback-speed="true"
	data-playback-rates='["unsafe-console-signal"]'
	data-play-icon="&lt;img src=x-invalid-waveform-icon onerror=&quot;console.log( 'Unsafe waveform icon onerror ran' ); window.__unsafeWaveformIconRan = true&quot;&gt;"
	data-pause-icon="&lt;img src=x-invalid-waveform-icon onerror=&quot;console.log( 'Unsafe waveform icon onerror ran' ); window.__unsafeWaveformIconRan = true&quot;&gt;"
></div>

Save and preview the post with the browser console open. Reload the preview if needed so console output from page load is visible.
Confirm the real Playlist block still renders a waveform player and can play, pause, and switch tracks.
Confirm the Custom HTML fixture was not auto-initialized:

const fixture = document.querySelector( '#waveform-autoinit-check' );
typeof window.WaveformPlayer; // Expected "function"
fixture.dataset.waveformInitialized; // Expected undefined
fixture.querySelector( '.waveform-player-inner' ); // Expected null
window.__unsafeWaveformIconRan; // Expected undefined

Also confirm the console has no messages beginning with [WaveformPlayer] Invalid or Unsafe waveform icon.

On trunk with only @arraypress/waveform-player updated to 1.26.0, this manual test should fail because the Custom HTML fixture is auto-initialized. The console should show output during page load, including:

[WaveformPlayer] Invalid buttonAlign option, using default: unsafe-console-signal
[WaveformPlayer] Invalid playbackRates attribute: ["unsafe-console-signal"]
Unsafe waveform icon onerror ran

The console check should show:

const fixture = document.querySelector( '#waveform-autoinit-check' );
typeof window.WaveformPlayer; // Expected "function"
fixture.dataset.waveformInitialized; // Expected "true" on the vulnerable build
fixture.querySelector( '.waveform-player-inner' ); // Expected an element on the vulnerable build
window.__unsafeWaveformIconRan; // Expected true on the vulnerable build

Screenshots or screencast

N/A

github-actions · 2026-08-12T09:55:52Z

Size Change: +3.72 kB (+0.05%)

Total Size: 7.72 MB

📦 View Changed

Filename	Size	Change
`build/modules/block-library/playlist/view.min.js`	18.9 kB	+1.77 kB (+10.32%)	⚠️
`build/scripts/block-library/index.min.js`	359 kB	+1.95 kB (+0.55%)

_{compressed-size-action}

github-actions · 2026-08-12T10:18:56Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

scruffian · 2026-08-12T10:25:35Z

-	'1.5x',
-	'1.75x',
-	'2x',
-];


We don't need this because waveform player now validates this array.

github-actions · 2026-08-12T11:47:34Z

Flaky tests detected in 372ae29.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31591337669
📝 Reported tests:

All navigation links should default to the body color and submenus and mobile overlay should default to a white background with black text in /test/e2e/specs/editor/blocks/navigation-colors.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/navigation/
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: c51ef1bc21
    - content-type: application/json
    - content-length: 90
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1786706761%7CxGzCHzEm3Kj5aCqNXTuqdBHY3QbY22omwUa3mk0YjHN%7C09c7ab43f622b2cc80b717b7182180bb0631bdacc19998684f405d9d13b5c890; wp-settings-time-1=1786534136

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.deleteAllMenus (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/menus.ts:74:30)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/navigation-colors.spec.js:37:17

manzoorwanijk · 2026-09-14T08:40:40Z

After this PR we will have no patches in the repo, let us remove the patches directory after rebase.

manzoorwanijk

Claude Code has some feedback.

manzoorwanijk · 2026-09-14T08:41:36Z

-		const element = createDeclarativePlayer();
+	it( 'initializes declarative players only after an explicit request from the Playlist utility', () => {
+		const element = createDeclarativePlayer( {
+			'data-play-icon':


This payload is never asserted. In 1.26.0 parseDataAttributes reads data-play-icon (src/js/utils.js:397) and core.js:330 interpolates it unescaped into innerHTML, so after init() the <img onerror> is actually rendered. Either assert it isn't (it would fail today) or drop the payload so the test doesn't imply coverage it lacks.

manzoorwanijk · 2026-09-14T08:41:36Z

 	if ( waveformGradient ) {
 		container.setAttribute( 'data-waveform-gradient', waveformGradient );
 	}
+	const sanitizedPlayIcon = playIcon && sanitizeSvgIcon( playIcon );


Nothing passes playIcon / pauseIcon today (playlist/view.js and utils/waveform-player.js don't), so sanitizeSvgIcon is unused in production. Maybe split it into its own PR once there's a consumer?

Nit: startsWith( 'on' ) at L274 is redundant, the ICON_ATTRIBUTES allowlist already excludes every on* name.

manzoorwanijk · 2026-09-14T08:41:36Z

 ### 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.


Missing the PR reference ([#81489](https://github.com/WordPress/gutenberg/pull/81489)). Also, the sanitization half describes code nothing calls yet.

manzoorwanijk · 2026-09-14T10:07:53Z

A gentle request, can we please prioritize this to get rid of the patch?

ciampo · 2026-09-30T09:06:36Z

I believe we can close this PR in favour of #83132.

Feel free to re-open in case I misunderstood 🙏

github-actions Bot added the [Package] Block library /packages/block-library label Aug 12, 2026

scruffian marked this pull request as ready for review August 12, 2026 10:18

scruffian requested review from ajitbohra and fabiankaegy as code owners August 12, 2026 10:18

scruffian added [Type] Enhancement A suggestion for improvement. [Block] Playlist labels Aug 12, 2026

scruffian self-assigned this Aug 12, 2026

scruffian added [Type] Bug An existing feature does not function as intended and removed [Type] Enhancement A suggestion for improvement. labels Aug 12, 2026

scruffian commented Aug 12, 2026

View reviewed changes

Playlist: Disable waveform player auto-init

a60995d

scruffian force-pushed the scruffian/fix/waveform-autoinit branch from df2e2ab to a60995d Compare August 12, 2026 10:34

scruffian added 3 commits August 12, 2026 11:35

Playlist: Test waveform auto-init boundary

6565736

Playlist: Clarify waveform auto-init timing

7b04cb2

Playlist: Tighten waveform auto-init regression test

372ae29

scruffian requested a review from jeryj August 12, 2026 11:47

scruffian mentioned this pull request Aug 13, 2026

Update waveform player dependency patch #81454

Merged

manzoorwanijk reviewed Sep 14, 2026

View reviewed changes

manzoorwanijk mentioned this pull request Sep 18, 2026

Playlist: Replace the waveform player patch with its no-autoinit entry #83132

Merged

ciampo closed this Sep 30, 2026

Navigation Menu

Repository navigation

Playlist: Disable waveform player auto-init - #81489

Playlist: Disable waveform player auto-init#81489
scruffian wants to merge 4 commits into
trunkfrom
scruffian/fix/waveform-autoinit

scruffian commented Aug 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026 •

edited

Loading

Uh oh!

scruffian Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

manzoorwanijk Sep 14, 2026

Uh oh!

manzoorwanijk left a comment

Uh oh!

manzoorwanijk Sep 14, 2026

Uh oh!

manzoorwanijk Sep 14, 2026

Uh oh!

manzoorwanijk Sep 14, 2026

Uh oh!

manzoorwanijk commented Sep 14, 2026

Uh oh!

ciampo commented Sep 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

scruffian commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Automated tests

Manual testing

Screenshots or screencast

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

scruffian Aug 12, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

manzoorwanijk Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk commented Sep 14, 2026

Uh oh!

ciampo commented Sep 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

scruffian commented Aug 12, 2026 •

edited

Loading

github-actions Bot commented Aug 12, 2026 •

edited

Loading