@wordpress/block-library 10.4.0 → 10.5.2-next.v.202608281122.0

package/src/navigation-overlay-close/README.md

@@ -43,6 +43,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/navigation-submenu/README.md

@@ -84,6 +84,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/nextpage/README.md

@@ -45,6 +45,6 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/nextpage/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/nextpage/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/nextpage/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/page-list/README.md

@@ -79,6 +79,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/page-list/index.js

@@ -1,7 +1,7 @@
 import { pages } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import edit from './edit.js';
+import edit from './edit.jsx';
 
 const { name } = metadata;
 

package/src/page-list-item/README.md

@@ -72,6 +72,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/page-list-item/index.js

@@ -1,7 +1,7 @@
 import { page as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import edit from './edit.js';
+import edit from './edit.jsx';
 
 const { name } = metadata;
 

package/src/paragraph/README.md

@@ -65,6 +65,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/pattern/README.md

@@ -40,6 +40,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/pattern/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/pattern/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/pattern/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/pattern/{edit.js → edit.jsx}

@@ -36,7 +36,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const [ hasRecursionError, setHasRecursionError ] = useState( false );
 	const parsePatternDependencies = useParsePatternDependencies();
 
-	// Duplicated in packages/editor/src/components/start-template-options/index.js.
+	// Duplicated in packages/editor/src/components/start-template-options/index.jsx.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
 			block.innerBlocks.find(

package/src/playlist/README.md

@@ -78,6 +78,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/playlist/block.json

@@ -69,7 +69,6 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
-		"__experimentalExposeControlsToChildren": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/playlist/{edit.js → edit.jsx}

@@ -86,7 +86,13 @@ const PlaylistEdit = ( {
 
 	const blockProps = useBlockProps();
 	const waveformPanelId = `${ clientId }-waveform`;
-	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		replaceInnerBlocks,
+		replaceBlocks,
+		insertBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
@@ -164,6 +170,23 @@ const PlaylistEdit = ( {
 		}
 	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
 
+	// Clean up placeholder tracks when reverting back to playlist placeholder state
+	useEffect( () => {
+		if ( validTracks.length > 0 || innerBlockTracks.length === 0 ) {
+			return;
+		}
+
+		// Remove any lingering placeholder track blocks
+		__unstableMarkNextChangeAsNotPersistent();
+		replaceInnerBlocks( clientId, [] );
+	}, [
+		clientId,
+		innerBlockTracks,
+		replaceInnerBlocks,
+		validTracks,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
 	const createTrackBlocks = useCallback(
 		( media ) => {
 			if ( ! media ) {
@@ -248,27 +271,36 @@ const PlaylistEdit = ( {
 				return;
 			}
 
-			const nextBlocks = [ ...validTracks, ...newBlocks ];
 			setCurrentTrackClientId( newBlocks[ 0 ].clientId );
-			replaceInnerBlocks( clientId, nextBlocks );
+			insertBlocks( newBlocks, undefined, clientId, false );
 			selectBlock( newBlocks[ 0 ].clientId );
 		},
 		[
 			clientId,
 			createTrackBlocks,
-			replaceInnerBlocks,
+			insertBlocks,
 			selectBlock,
 			setCurrentTrackClientId,
 			validTracks,
 		]
 	);
 
+	const removeTrack = useCallback(
+		( trackClientId ) => {
+			// Not `removeBlock`: it removes the container along with its
+			// last inner block, so this would take the playlist with it.
+			replaceBlocks( trackClientId, [] );
+		},
+		[ replaceBlocks ]
+	);
+
 	const playlistContext = useMemo(
 		() => ( {
 			currentTrackClientId,
 			setCurrentTrackClientId,
+			removeTrack,
 		} ),
-		[ currentTrackClientId, setCurrentTrackClientId ]
+		[ currentTrackClientId, setCurrentTrackClientId, removeTrack ]
 	);
 
 	// Get current track data by finding the track with matching client ID.
@@ -439,10 +471,20 @@ const PlaylistEdit = ( {
 		);
 	}
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		__experimentalAppenderTagName: 'li',
-		renderAppender: false,
-	} );
+	const { children: innerBlocks, ...trackListProps } = useInnerBlocksProps(
+		{
+			className: clsx( 'wp-block-playlist__tracklist', {
+				'wp-block-playlist__tracklist-is-hidden': ! showTracklist,
+				'wp-block-playlist__tracklist-show-numbers': showNumbers,
+				'wp-block-playlist__tracklist-length-is-hidden':
+					! showTrackLength,
+			} ),
+		},
+		{
+			__experimentalAppenderTagName: 'li',
+			renderAppender: false,
+		}
+	);
 
 	if ( tracks.length === 0 ) {
 		return (
@@ -471,7 +513,7 @@ const PlaylistEdit = ( {
 
 	return (
 		<>
-			<BlockControls group="other" __experimentalShareWithChildBlocks>
+			<BlockControls group="other">
 				<MediaReplaceFlow
 					name={ __( 'Add track' ) }
 					onSelect={ onAddTracks }
@@ -693,18 +735,9 @@ const PlaylistEdit = ( {
 						showPlayButtonArtwork={ showPlayButtonArtwork === true }
 					/>
 				</Disabled>
-				<ol
-					className={ clsx( 'wp-block-playlist__tracklist', {
-						'wp-block-playlist__tracklist-is-hidden':
-							! showTracklist,
-						'wp-block-playlist__tracklist-show-numbers':
-							showNumbers,
-						'wp-block-playlist__tracklist-length-is-hidden':
-							! showTrackLength,
-					} ) }
-				>
+				<ol { ...trackListProps }>
 					<PlaylistContext.Provider value={ playlistContext }>
-						{ innerBlocksProps.children }
+						{ innerBlocks }
 					</PlaylistContext.Provider>
 				</ol>
 				<Caption

package/src/playlist/test/{edit-component.js → edit-component.jsx}

@@ -4,6 +4,9 @@ import PlaylistEdit from '../edit';
 
 let mediaPlaceholderProps;
 let mediaReplaceFlowProps;
+// The tracks the playlist holds. The inner blocks mock renders these, so a
+// test can look at what ended up in the tracklist.
+let mockTracks = [];
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	store: {},
@@ -33,7 +36,11 @@ jest.mock( '@wordpress/block-editor', () => ( {
 	useBlockProps: () => ( { className: 'wp-block-playlist' } ),
 	useInnerBlocksProps: ( blockProps ) => ( {
 		...blockProps,
-		children: <li data-testid="playlist-track" />,
+		children: mockTracks.map( ( track ) => (
+			<li key={ track.clientId } data-testid="playlist-track">
+				{ track.attributes.title }
+			</li>
+		) ),
 	} ),
 	__experimentalColorGradientSettingsDropdown: () => <div />,
 	__experimentalUseMultipleOriginColorsAndGradients: () => ( {
@@ -106,36 +113,58 @@ const defaultAttributes = {
 
 describe( 'PlaylistEdit', () => {
 	let replaceInnerBlocks;
+	let insertBlocks;
 	let selectBlock;
 
+	// The playlist reads its tracks from the store and changes them through
+	// dispatched actions. Keeping a list here lets a test assert which tracks
+	// the playlist ends up with, rather than which action it reached for.
+	const trackStore = ( initial ) => {
+		mockTracks = initial;
+		useSelect.mockImplementation( () => ( {
+			innerBlockTracks: mockTracks,
+		} ) );
+		insertBlocks.mockImplementation( ( blocks, index ) => {
+			const at = index ?? mockTracks.length;
+			mockTracks = [
+				...mockTracks.slice( 0, at ),
+				...blocks,
+				...mockTracks.slice( at ),
+			];
+		} );
+		replaceInnerBlocks.mockImplementation( ( _clientId, next ) => {
+			mockTracks = next;
+		} );
+	};
+	const trackClientIds = () => mockTracks.map( ( track ) => track.clientId );
+
 	beforeEach( () => {
 		mediaPlaceholderProps = undefined;
 		mediaReplaceFlowProps = undefined;
 		replaceInnerBlocks = jest.fn();
+		insertBlocks = jest.fn();
 		selectBlock = jest.fn();
 		useDispatch.mockReturnValue( {
 			createErrorNotice: jest.fn(),
 			replaceInnerBlocks,
+			insertBlocks,
 			selectBlock,
+			__unstableMarkNextChangeAsNotPersistent: jest.fn(),
 		} );
-		useSelect.mockReturnValue( {
-			innerBlockTracks: [
-				{
-					clientId: 'track-1',
-					attributes: {
-						id: 1,
-						src: 'https://example.com/audio.mp3',
-						title: 'Sample track',
-					},
+		trackStore( [
+			{
+				clientId: 'track-1',
+				attributes: {
+					id: 1,
+					src: 'https://example.com/audio.mp3',
+					title: 'Sample track',
 				},
-			],
-		} );
+			},
+		] );
 	} );
 
 	it( 'lets users select audio tracks individually from the Media Library', () => {
-		useSelect.mockReturnValue( {
-			innerBlockTracks: [],
-		} );
+		trackStore( [] );
 
 		render(
 			<PlaylistEdit
@@ -186,6 +215,39 @@ describe( 'PlaylistEdit', () => {
 		expect( screen.getByTestId( 'playlist-track' ) ).toBeInTheDocument();
 	} );
 
+	it( 'preserves placeholder tracks when adding tracks', () => {
+		trackStore( [
+			{
+				clientId: 'track-1',
+				attributes: {
+					id: 1,
+					src: 'https://example.com/audio.mp3',
+					title: 'Sample track',
+				},
+			},
+			// A track the user added but has not filled in yet.
+			{ clientId: 'placeholder-track', attributes: {} },
+		] );
+
+		render(
+			<PlaylistEdit
+				attributes={ defaultAttributes }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Add track' } ) );
+
+		expect( trackClientIds() ).toEqual( [
+			'track-1',
+			'placeholder-track',
+			'new-track',
+		] );
+	} );
+
 	it( 'adds tracks from the add track control', () => {
 		render(
 			<PlaylistEdit
@@ -203,18 +265,7 @@ describe( 'PlaylistEdit', () => {
 			} )
 		);
 
-		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'playlist-1', [
-			expect.objectContaining( { clientId: 'track-1' } ),
-			expect.objectContaining( {
-				clientId: 'new-track',
-				name: 'core/playlist-track',
-				attributes: expect.objectContaining( {
-					id: 2,
-					src: 'https://example.com/second-track.mp3',
-					title: 'Second track',
-				} ),
-			} ),
-		] );
+		expect( trackClientIds() ).toEqual( [ 'track-1', 'new-track' ] );
 		expect( selectBlock ).toHaveBeenCalledWith( 'new-track' );
 	} );
 } );

package/src/playlist-track/README.md

@@ -21,15 +21,15 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
 | `blob` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
-| `id` | `number` | — | — |
-| `src` | `string` | — | — |
+| `id` | `number` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `src` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 | `type` | `string` | `"audio"` | — |
-| `album` | `string` | — | — |
-| `artist` | `string` | — | — |
-| `image` | `string` | — | — |
-| `imageAlt` | `string` | — | — |
-| `length` | `string` | — | — |
-| `title` | `string` | — | — |
+| `album` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `artist` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `image` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `imageAlt` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `length` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `title` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 
 ## Supports
 
@@ -62,6 +62,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist-track/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist-track/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/playlist-track/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/playlist-track/block.json

@@ -15,32 +15,40 @@
 			"role": "local"
 		},
 		"id": {
-			"type": "number"
+			"type": "number",
+			"role": "content"
 		},
 		"src": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
 			"default": "audio"
 		},
 		"album": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"artist": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"image": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"imageAlt": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"length": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		}
 	},
 	"supports": {

package/src/playlist-track/{edit.js → edit.jsx}

@@ -15,7 +15,7 @@ import {
 	Button,
 	PanelBody,
 	TextControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	BaseControl,
 	Spinner,
 } from '@wordpress/components';
@@ -46,11 +46,27 @@ const PlaylistTrackEdit = ( {
 	const showImages = context?.showImages ?? true;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
-	const { currentTrackClientId, setCurrentTrackClientId } =
+	const { currentTrackClientId, setCurrentTrackClientId, removeTrack } =
 		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	function onUploadError( message ) {
+
+	/**
+	 * Handle audio upload errors.
+	 *
+	 * @param {string}  message                      Error message to show.
+	 * @param {Object}  [options]
+	 * @param {boolean} [options.removeTrackOnError] Remove the track as well. Useful for drag/drop where a track is optimistically created before upload finishes.
+	 */
+	function onUploadError( message, { removeTrackOnError = false } = {} ) {
 		createErrorNotice( message, { type: 'snackbar' } );
+
+		if ( removeTrackOnError ) {
+			removeTrack( clientId );
+			return;
+		}
+
+		// Set temporaryURL back to default state
+		setTemporaryURL();
 	}
 	const hasTrackSource = !! src || !! temporaryURL;
 
@@ -70,11 +86,14 @@ const PlaylistTrackEdit = ( {
 		setCurrentTrackClientId,
 	] );
 
+	// Handles drag/drop uploads
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectTrack,
-		onError: onUploadError,
+		onError: ( message ) => {
+			onUploadError( message, { removeTrackOnError: true } );
+		},
 	} );
 
 	function onSelectTrack( media ) {
@@ -144,20 +163,33 @@ const PlaylistTrackEdit = ( {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					name={ __( 'Replace' ) }
-					onSelect={ onSelectTrack }
-					accept="audio/*"
-					mediaId={ id }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onError={ onUploadError }
-					variant="toolbar"
-				/>
-			</BlockControls>
+			{ /* Only show if this is a single selection (not multiselect) */ }
+			{ isSelected && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						name={ __( 'Replace' ) }
+						onSelect={ onSelectTrack }
+						accept="audio/*"
+						mediaId={ id }
+						mediaURL={ src }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onError={ onUploadError }
+						variant="toolbar"
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
+					{ /* Only show if this is a single selection (not multiselect) */ }
+					{ isSelected && (
+						<TextControl
+							label={ __( 'Title' ) }
+							value={ title ? stripHTML( title ) : '' }
+							onChange={ ( titleValue ) => {
+								setAttributes( { title: titleValue } );
+							} }
+						/>
+					) }
 					<TextControl
 						label={ __( 'Artist' ) }
 						value={ artist ? stripHTML( artist ) : '' }
@@ -172,13 +204,6 @@ const PlaylistTrackEdit = ( {
 							setAttributes( { album: albumValue } );
 						} }
 					/>
-					<TextControl
-						label={ __( 'Title' ) }
-						value={ title ? stripHTML( title ) : '' }
-						onChange={ ( titleValue ) => {
-							setAttributes( { title: titleValue } );
-						} }
-					/>
 					<MediaUploadCheck>
 						<BaseControl>
 							<BaseControl.VisualLabel>
@@ -225,7 +250,7 @@ const PlaylistTrackEdit = ( {
 						</BaseControl>
 					</MediaUploadCheck>
 					{ !! image && (
-						<TextareaControl
+						<WCTextareaControl
 							label={ __( 'Alternative text' ) }
 							value={ imageAlt || '' }
 							onChange={ ( value ) =>
@@ -251,7 +276,6 @@ const PlaylistTrackEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
 					onClick={ () => setCurrentTrackClientId( clientId ) }
@@ -271,7 +295,8 @@ const PlaylistTrackEdit = ( {
 							tagName="span"
 							className="wp-block-playlist-track__title"
 							value={ title }
-							placeholder={ __( 'Add title' ) }
+							aria-label={ __( 'Track title' ) }
+							placeholder={ __( 'Track title' ) }
 							onChange={ ( value ) => {
 								setAttributes( { title: value } );
 							} }
@@ -282,7 +307,8 @@ const PlaylistTrackEdit = ( {
 								tagName="span"
 								className="wp-block-playlist-track__artist"
 								value={ artist }
-								placeholder={ __( 'Add artist' ) }
+								aria-label={ __( 'Track artist' ) }
+								placeholder={ __( 'Track artist' ) }
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )
 								}
@@ -300,6 +326,9 @@ const PlaylistTrackEdit = ( {
 							</span>
 						) }
 						{ length }
+						{ !! temporaryURL && (
+							<Spinner className="wp-block-playlist-track__spinner" />
+						) }
 					</span>
 					<span className="screen-reader-text">{ __( 'Play' ) }</span>
 				</button>