Playlist track: Replace the track from the settings sidebar by jeryj · Pull Request #85310 · WordPress/gutenberg

jeryj · 2026-10-21T17:52:05Z

What?

Adds a Track control to the Playlist track block's Settings panel. It shows the current audio file name and opens the same replace flow as the block toolbar (Media Library or Upload, audio only), so the track can be swapped from the sidebar.

Why?

Replacing a track was only possible from the block toolbar. The sidebar already offers a media picker for the track image, so the track itself should be replaceable from the same place.

How?

Reuses the shared MediaControl utility from packages/block-library/src/utils/media-control.jsx, the same control the Image, Media & Text, Cover and Site Logo blocks render in their inspectors. No new component.
MediaControl wraps MediaReplaceFlow with allowedTypes: [ 'audio' ] and the existing onSelectTrack and onUploadError handlers, so a replacement goes through the same attribute mapping and error handling as the toolbar.
Rendered only for a single selected track (isSelected), matching the toolbar replace control: a multi-selection renders the first track's inspector, and replacing the source of every selected track with one file is not meaningful.
The control's thumbnail is blank for audio, as it is for any non-image media in the other blocks.

Testing Instructions

Insert a Playlist block and add a track.
Select the track and open the block settings sidebar.
Under Settings, check the Track row shows the file name.
Click it, choose Open Media Library, pick another audio file and confirm.
The track's source, title, artist and album update, in the canvas and in the sidebar fields.
Multi-select two tracks: the Track control is not shown.

Automated:

npm run test:unit -- packages/block-library/src/playlist-track/test/edit.jsdom.test.jsx
npm run test:e2e -- test/e2e/specs/editor/blocks/playlist.spec.js

Screenshots or screencast

The new control sits at the top of the track's Settings panel, above Title, and matches the Image control of the Image block.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QfLcCffRKsyNqAWV8EYUvU

Add a "Track" control to the playlist track's Settings panel that shows the current audio file name and opens the media library to replace it, mirroring the "Track image" control below it. The control is only rendered for a single selected track, like the toolbar replace control, since swapping the source of every selected track with one file makes no sense. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QfLcCffRKsyNqAWV8EYUvU

github-actions · 2026-10-21T17:52:21Z

🤖 PR meta 🤖

🎉 Props

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: jeryj <jeryj@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

Required: any label starting with [Type].
Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +6 B (0%)

Total Size: 9.05 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-library/index.min.js`	445 kB	+6 B (0%)

_{4cce222 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	`27b96ab`	trunk	% Change
timeToFirstByte	58.5 ms +8.72% -4.27%	57.2 ms +6.47% -2.88%	2.27%
largestContentfulPaint	100 ms +4% -8%	96 ms +6.25% -6.25%	4.17%
lcpMinusTtfb	37.3 ms +18.63% -8.45%	36.35 ms +17.06% -7.84%	2.61%
wpBeforeTemplate	30.76 ms +17.13% -4.26%	29.55 ms +12.39% -2.06%	4.09%
wpTemplate	23.2 ms +4.96% -6.68%	22.36 ms +3.89% -2.33%	3.76%
wpTotal	54.71 ms +8.57% -4.46%	53.1 ms +5.57% -2.99%	3.03%
wpMemoryUsage	7.66 MB +0% -0%	7.63 MB +0% -0%	0.43%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	`27b96ab`	trunk	% Change
timeToFirstByte	45.45 ms +5.94% -4.4%	47.7 ms +6.39% -2.1%	-4.72%
largestContentfulPaint	96 ms +4.17% -2.08%	104 ms +1.92% -3.85%	-7.69%
lcpMinusTtfb	50 ms +5.7% -2.4%	54.6 ms +3.11% -2.38%	-8.42%
wpBeforeTemplate	27.87 ms +8.4% -1.83%	26.97 ms +3% -1.78%	3.34%
wpTemplate	13.57 ms +3.83% -3.1%	17.52 ms +3.31% -5.48%	-22.55%
wpTotal	42.41 ms +4.67% -4.39%	44.49 ms +5.69% -2.38%	-4.68%
wpMemoryUsage	6.24 MB +0% -0%	6.32 MB +0% -0%	-1.23%
wpDbQueries	9 +0% -0%	13 +0% -0%	-30.77%

media-processing

Metric	`27b96ab`	trunk	% Change
mediaProcessingJpeg	413.66 ms +0.42% -2.46%	409.65 ms +1.79% -1.66%	0.98%
mediaProcessingAvif	6168.8 ms +0.49% -0.32%	6135.7 ms +0.37% -0.25%	0.54%
mediaProcessingJpegToAvif	4254.19 ms +0.22% -0.19%	4235.75 ms +0.1% -0.27%	0.44%

media-upload

Metric	`27b96ab`	trunk	% Change
jpegUploadProcessing	1955.41 ms +0.28% -1.54%	1943 ms +0.78% -0.69%	0.64%
pngUploadProcessing	182.53 ms +4.67% -7.64%	243.82 ms +9.33% -8.88%	-25.14%
largeJpegUploadProcessing	1931.29 ms +0.9% -0.43%	1934.19 ms +0.53% -0.38%	-0.15%
multipleImageUploadProcessing	2012.45 ms +1.38% -0.51%	2044.21 ms +0.42% -0.56%	-1.55%

post-editor

Metric	`27b96ab`	trunk	% Change
serverResponse	531.06 ms +5.95% -9.32%	512.27 ms +7.16% -4.98%	3.67%
firstPaint	506.02 ms +5.37% -44.16%	512.52 ms +1.05% -1.54%	-1.27%
domContentLoaded	1212.34 ms +3.36% -0.78%	1178.6 ms +2.86% -0.47%	2.86%
loaded	1213.89 ms +3.34% -0.79%	1179.68 ms +2.87% -0.47%	2.9%
firstContentfulPaint	523.06 ms +2.84% -5.52%	512.52 ms +1.05% -1.54%	2.06%
firstBlock	3706.21 ms +3.25% -1.46%	3556.18 ms +1% -0.92%	4.22%
type	20.05 ms +3.14% -3.64%	18.41 ms +4.13% -1.47%	8.91%
typeWithoutInspector	19.07 ms +4.93% -5.61%	17.98 ms +5.28% -2%	6.06%
typeWithTopToolbar	27.65 ms +4.52% -8.68%	23.81 ms +5% -5.67%	16.13%
typeContainer	8.95 ms +10.17% -8.04%	9.47 ms +8.55% -10.88%	-5.49%
focus	125.68 ms +5.31% -8.47%	131.27 ms +9.86% -3.08%	-4.26%
firstFocus	236.37 ms +0% -0%	256.1 ms +0% -0%	-7.7%
selectAll	600.43 ms +2.88% -2.16%	598.98 ms +4.31% -0.45%	0.24%
listViewOpen	85.93 ms +8.54% -8.16%	81.53 ms +5.49% -6.62%	5.4%
inserterOpen	41.25 ms +13.45% -5.31%	41.42 ms +6.95% -4.13%	-0.41%
inserterHover	11.76 ms +15.05% -6.72%	12.52 ms +5.03% -8.15%	-6.07%
inserterSearch	8.31 ms +3.61% -10.47%	7.73 ms +19.15% -2.85%	7.5%
loadPatterns	662.58 ms +2.99% -3.03%	646.86 ms +4.69% -3.55%	2.43%
wpTotal	519.18 ms +6.35% -9.26%	501.38 ms +7.5% -5.06%	3.55%
wpMemoryUsage	14.70 MB +0% -0%	14.66 MB +0% -0%	0.24%
wpDbQueries	54.5 +0.92% -0.92%	54.5 +0.92% -0.92%	0%

site-editor

Metric	`27b96ab`	trunk	% Change
serverResponse	265.82 ms +5.32% -6.02%	263.9 ms +2.03% -6.05%	0.73%
firstPaint	175.67 ms +14.37% -8.85%	179.62 ms +15.41% -8.59%	-2.2%
domContentLoaded	815.12 ms +1.32% -2.05%	802.9 ms +3.78% -2.8%	1.52%
loaded	815.9 ms +1.36% -2.01%	803.7 ms +3.78% -2.81%	1.52%
firstContentfulPaint	358.49 ms +2.93% -4.5%	349.29 ms +7.22% -6.29%	2.63%
firstBlock	2993.31 ms +0.88% -2.11%	2899.88 ms +1.81% -0.68%	3.22%
type	15.01 ms +9.06% -4.53%	14.45 ms +4.29% -3.25%	3.88%
navigate	89.08 ms +18.88% -5.58%	82.06 ms +14.29% -4.03%	8.55%
loadPatterns	1026.52 ms +8.01% -11.31%	960.53 ms +2.12% -5.47%	6.87%
loadPages	969.66 ms +3.37% -1.63%	964.75 ms +2.25% -0.66%	0.51%
wpTotal	259.42 ms +5.37% -6.21%	257.65 ms +2.1% -6.21%	0.69%
wpMemoryUsage	12.71 MB +0% -0%	12.68 MB +0% -0%	0.28%
wpDbQueries	44.5 +1.12% -1.12%	45 +0% -2.22%	-1.11%

_{4cce222 Run}

🏁 Flaky tests

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.

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt.

Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35

_{4cce222 Run}

Replace the hand-built file name and button with the shared `MediaControl` utility that the image, media & text, cover and site logo blocks use in their inspectors, so the track control looks and behaves the same: a replace flow dropdown with Media Library and Upload, plus a drop zone. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QfLcCffRKsyNqAWV8EYUvU

jeryj requested a review from fabiankaegy as a code owner October 21, 2026 17:52

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

Navigation Menu

Repository navigation

Playlist track: Replace the track from the settings sidebar - #85310

Playlist track: Replace the track from the settings sidebar#85310
jeryj wants to merge 2 commits into
trunkfrom
add/playlist-track-sidebar-replace

jeryj commented Oct 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 21, 2026 •

edited

Loading

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

jeryj commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Uh oh!

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

Uh oh!

🤖 PR meta 🤖

🎉 Props

🏷️ Labels

📦 Bundle size

⚡ Performance

🏁 Flaky tests

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jeryj commented Oct 21, 2026 •

edited

Loading

github-actions Bot commented Oct 21, 2026 •

edited

Loading