From 66690649e7e0f2e6eacc73c5e5fa3edfb4c679d2 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Thu, 9 Jul 2026 15:37:01 -0500
Subject: [PATCH] Fix flashing track state when adding new track

---
 .../block-library/src/playlist-track/edit.js  | 10 ++-
 .../src/playlist-track/test/edit.js           | 61 ++++++++++++++-----
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/playlist-track/edit.js b/packages/block-library/src/playlist-track/edit.js
index 35d425a6afc528..042ced34944589 100644
--- a/packages/block-library/src/playlist-track/edit.js
+++ b/packages/block-library/src/playlist-track/edit.js
@@ -59,13 +59,19 @@ const PlaylistTrackEdit = ( {
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
+	const hasTrackSource = !! src || !! temporaryURL;
 
 	useEffect( () => {
-		if ( isSelected && currentTrackClientId !== clientId ) {
+		if (
+			isSelected &&
+			hasTrackSource &&
+			currentTrackClientId !== clientId
+		) {
 			setCurrentTrackClientId( clientId );
 		}
 	}, [
 		isSelected,
+		hasTrackSource,
 		clientId,
 		currentTrackClientId,
 		setCurrentTrackClientId,
@@ -134,7 +140,7 @@ const PlaylistTrackEdit = ( {
 		imageButton.current.focus();
 	}
 
-	if ( ! src && ! temporaryURL ) {
+	if ( ! hasTrackSource ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
diff --git a/packages/block-library/src/playlist-track/test/edit.js b/packages/block-library/src/playlist-track/test/edit.js
index 43d4afb878e49a..c8b4b4ec02a006 100644
--- a/packages/block-library/src/playlist-track/test/edit.js
+++ b/packages/block-library/src/playlist-track/test/edit.js
@@ -12,6 +12,7 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import PlaylistTrackEdit from '../edit';
+import { PlaylistContext } from '../../playlist/context';
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	BlockControls: ( { children } ) => <div>{ children }</div>,
@@ -70,25 +71,33 @@ const defaultAttributes = {
 
 function renderEdit( props = {} ) {
 	const setAttributes = jest.fn();
+	const setCurrentTrackClientId = props.setCurrentTrackClientId || jest.fn();
 
 	render(
-		<PlaylistTrackEdit
-			attributes={ {
-				...defaultAttributes,
-				...props.attributes,
+		<PlaylistContext.Provider
+			value={ {
+				currentTrackClientId: props.currentTrackClientId ?? null,
+				setCurrentTrackClientId,
 			} }
-			setAttributes={ setAttributes }
-			context={ {
-				showArtists: true,
-				showImages: true,
-				...props.context,
-			} }
-			clientId="playlist-track-client-id"
-			isSelected={ false }
-		/>
+		>
+			<PlaylistTrackEdit
+				attributes={ {
+					...defaultAttributes,
+					...props.attributes,
+				} }
+				setAttributes={ setAttributes }
+				context={ {
+					showArtists: true,
+					showImages: true,
+					...props.context,
+				} }
+				clientId={ props.clientId || 'playlist-track-client-id' }
+				isSelected={ props.isSelected ?? false }
+			/>
+		</PlaylistContext.Provider>
 	);
 
-	return { setAttributes };
+	return { setAttributes, setCurrentTrackClientId };
 }
 
 describe( 'PlaylistTrackEdit', () => {
@@ -134,4 +143,28 @@ describe( 'PlaylistTrackEdit', () => {
 			screen.queryByLabelText( 'Alternative text' )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'sets the selected track as the current track', () => {
+		const { setCurrentTrackClientId } = renderEdit( {
+			currentTrackClientId: 'another-track-client-id',
+			isSelected: true,
+		} );
+
+		expect( setCurrentTrackClientId ).toHaveBeenCalledWith(
+			'playlist-track-client-id'
+		);
+	} );
+
+	it( 'does not set a selected placeholder track as the current track', () => {
+		const { setCurrentTrackClientId } = renderEdit( {
+			attributes: {
+				blob: undefined,
+				src: undefined,
+			},
+			currentTrackClientId: 'another-track-client-id',
+			isSelected: true,
+		} );
+
+		expect( setCurrentTrackClientId ).not.toHaveBeenCalled();
+	} );
 } );