Playlist: Fix duplicate tracks and enable track selection in editor#76094
Open
Playlist: Fix duplicate tracks and enable track selection in editor#76094
Conversation
When the same audio file is added to a playlist multiple times, switching
between the duplicate entries should re-initialize the player. Previously,
both the editor and frontend skipped re-initialization when the audio URL
matched, causing duplicate tracks to share the same player state.
Editor (edit.js): Add `key={ currentTrack }` to `WaveformPlayer` so React
unmounts/remounts the component when the selected track changes, even if
props are identical.
Frontend (view.js): Track `currentId` alongside `url` in the player state
map, and check both when deciding whether to skip re-initialization.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
scruffian
added
[Type] Bug
|
Size Change: +115 B (0%) Total Size: 6.87 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 173ff19. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22643909203
|
Contributor
|
@scruffian I've opened a new pull request, #76110, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
scruffian
commented
Mar 3, 2026
tyxla
reviewed
Mar 4, 2026
Member
tyxla
left a comment
tyxla
left a comment
There was a problem hiding this comment.
Thanks!
This is working well in the frontend, but how do I test it in the editor? In the editor, when I click on a track, it doesn't autoplay; and when I manually click the "play" button, it will always just play the first track?
When clicking a track in the tracklist, the waveform player now switches to that track and auto-plays it. Three changes make this work: 1. playlist-track/edit.js: When a track block is selected, update the parent playlist's currentTrack attribute via the block editor store. 2. playlist/edit.js: Fix the useEffect that previously always reset currentTrack to the first track — now only sets it when the current track is unset or no longer exists. Also enable the player controls when any child block is selected (not just the parent), and pass autoPlay so the player starts playing on track switch. 3. utils/waveform-player.js: Accept and forward an autoPlay prop to the underlying initWaveformPlayer call. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Store autoPlay in a ref (like onEnded) so it doesn't need to be a
useRefEffect dependency. The component is already remounted via
key={currentTrack} when the track changes, so the ref value is
always correct at mount time.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
scruffian
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two related improvements to the playlist block's track playback:
1. Fix duplicate audio track playback
Adding the same audio file multiple times to a playlist caused duplicate entries to share the same player instance instead of playing separately.
key={ currentTrack }to<WaveformPlayer>so React forces a full unmount/remount when the selected track changes, even when two tracks have identical props.currentIdalongsideurl. The skip-initialization check verifies both URL and track ID match before returning early.2. Play selected track in the editor
Clicking a track in the tracklist now switches the waveform player to that track and auto-plays it.
getBlockParentsByBlockNameand updates itscurrentTrackattribute.useEffectthat previously always resetcurrentTrackto the first track — now only resets when the current track is unset or deleted. Changed theDisabledwrapper to keep the player interactive when a child block is selected. AddedautoPlaysupport so the player starts on track switch (but not on initial load).autoPlayis stored in a ref (same pattern asonEnded) and forwarded toinitWaveformPlayer.Addresses review feedback from @tyxla on #75203:
Test plan
🤖 Generated with Claude Code