Fix React rendering, unmount memory leaks, and play button accessibility in the Playlist block

Fix React rendering, unmount memory leaks, and play button accessibility in the Playlist block.

Author: Fahim Murshed

changelog.txt

@@ -1,5 +1,16 @@
 == Changelog ==
 
+= 23.6.0-rc.2 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+- Fix React rendering, unmount memory leaks, and play button accessibility in the Playlist block. ([80468](https://github.com/WordPress/gutenberg/pull/80468))
+
+
 = 23.6.0-rc.1 =
 
 

gutenberg.php

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.9
  * Requires PHP: 7.4
- * Version: 23.6.0-rc.1
+ * Version: 23.6.0-rc.2
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "23.6.0-rc.1",
+	"version": "23.6.0-rc.2",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/block-library/src/playlist-track/edit.js

@@ -273,9 +273,17 @@ const PlaylistTrackEdit = ( {
 			</InspectorControls>
 			<li { ...blockProps }>
 				{ !! temporaryURL && <Spinner /> }
-				<button
+				<div
 					className="wp-block-playlist-track__button"
 					onClick={ () => setCurrentTrackClientId( clientId ) }
+					onKeyDown={ ( event ) => {
+						if ( event.key === 'Enter' || event.key === ' ' ) {
+							event.preventDefault();
+							setCurrentTrackClientId( clientId );
+						}
+					} }
+					role="button"
+					tabIndex={ 0 }
 					aria-current={
 						currentTrackClientId === clientId ? 'true' : 'false'
 					}
@@ -323,7 +331,7 @@ const PlaylistTrackEdit = ( {
 						{ length }
 					</span>
 					<span className="screen-reader-text">{ __( 'Play' ) }</span>
-				</button>
+				</div>
 			</li>
 		</>
 	);

packages/block-library/src/playlist/edit.js

@@ -6,7 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
@@ -121,8 +127,8 @@ const PlaylistEdit = ( {
 		gradients.length > 0 || ! colorGradientSettings.disableCustomGradients;
 	const waveformGradientValue = waveformGradient;
 	const waveformBackgroundGradientValue = waveformBackgroundGradient;
-	let waveformColorGradientChange;
-	let waveformBackgroundColorGradientChange;
+	const colorGradientChangeRef = useRef();
+	const backgroundColorGradientChangeRef = useRef();
 	const onUploadError = useCallback(
 		( message ) => {
 			createErrorNotice( message, { type: 'snackbar' } );
@@ -343,71 +349,89 @@ const PlaylistEdit = ( {
 		[ setAttributes ]
 	);
 
-	function updateWaveformColor( colorValue ) {
-		const isSettingColor = colorValue !== undefined;
-		if ( ! isSettingColor && waveformColorGradientChange === 'gradient' ) {
-			waveformColorGradientChange = undefined;
-			return;
-		}
+	const updateWaveformColor = useCallback(
+		( colorValue ) => {
+			const isSettingColor = colorValue !== undefined;
+			if (
+				! isSettingColor &&
+				colorGradientChangeRef.current === 'gradient'
+			) {
+				colorGradientChangeRef.current = undefined;
+				return;
+			}
 
-		waveformColorGradientChange = 'color';
+			colorGradientChangeRef.current = 'color';
 
-		setAttributes( {
-			waveformColor: colorValue,
-			waveformGradient: undefined,
-		} );
-	}
+			setAttributes( {
+				waveformColor: colorValue,
+				waveformGradient: undefined,
+			} );
+		},
+		[ setAttributes ]
+	);
 
-	function updateWaveformGradient( gradientValue ) {
-		const isSettingGradient = gradientValue !== undefined;
-		if ( ! isSettingGradient && waveformColorGradientChange === 'color' ) {
-			waveformColorGradientChange = undefined;
-			return;
-		}
+	const updateWaveformGradient = useCallback(
+		( gradientValue ) => {
+			const isSettingGradient = gradientValue !== undefined;
+			if (
+				! isSettingGradient &&
+				colorGradientChangeRef.current === 'color'
+			) {
+				colorGradientChangeRef.current = undefined;
+				return;
+			}
 
-		waveformColorGradientChange = 'gradient';
+			colorGradientChangeRef.current = 'gradient';
 
-		setAttributes( {
-			waveformGradient: gradientValue,
-			waveformColor: undefined,
-		} );
-	}
+			setAttributes( {
+				waveformGradient: gradientValue,
+				waveformColor: undefined,
+			} );
+		},
+		[ setAttributes ]
+	);
 
-	function updateWaveformBackgroundColor( colorValue ) {
-		const isSettingColor = colorValue !== undefined;
-		if (
-			! isSettingColor &&
-			waveformBackgroundColorGradientChange === 'gradient'
-		) {
-			waveformBackgroundColorGradientChange = undefined;
-			return;
-		}
+	const updateWaveformBackgroundColor = useCallback(
+		( colorValue ) => {
+			const isSettingColor = colorValue !== undefined;
+			if (
+				! isSettingColor &&
+				backgroundColorGradientChangeRef.current === 'gradient'
+			) {
+				backgroundColorGradientChangeRef.current = undefined;
+				return;
+			}
 
-		waveformBackgroundColorGradientChange = 'color';
+			backgroundColorGradientChangeRef.current = 'color';
 
-		setAttributes( {
-			waveformBackgroundColor: colorValue,
-			waveformBackgroundGradient: undefined,
-		} );
-	}
+			setAttributes( {
+				waveformBackgroundColor: colorValue,
+				waveformBackgroundGradient: undefined,
+			} );
+		},
+		[ setAttributes ]
+	);
 
-	function updateWaveformBackgroundGradient( gradientValue ) {
-		const isSettingGradient = gradientValue !== undefined;
-		if (
-			! isSettingGradient &&
-			waveformBackgroundColorGradientChange === 'color'
-		) {
-			waveformBackgroundColorGradientChange = undefined;
-			return;
-		}
+	const updateWaveformBackgroundGradient = useCallback(
+		( gradientValue ) => {
+			const isSettingGradient = gradientValue !== undefined;
+			if (
+				! isSettingGradient &&
+				backgroundColorGradientChangeRef.current === 'color'
+			) {
+				backgroundColorGradientChangeRef.current = undefined;
+				return;
+			}
 
-		waveformBackgroundColorGradientChange = 'gradient';
+			backgroundColorGradientChangeRef.current = 'gradient';
 
-		setAttributes( {
-			waveformBackgroundGradient: gradientValue,
-			waveformBackgroundColor: undefined,
-		} );
-	}
+			setAttributes( {
+				waveformBackgroundGradient: gradientValue,
+				waveformBackgroundColor: undefined,
+			} );
+		},
+		[ setAttributes ]
+	);
 
 	const colorSettings = [];
 	if ( hasColors || hasGradients ) {

packages/block-library/src/playlist/view.js

@@ -10,6 +10,7 @@ import {
 	initWaveformPlayer,
 	logPlayError,
 	setupPlayButtonArtwork,
+	updatePlayButtonAccessibilityLabel,
 	updateSeekControlLabel,
 } from '../utils/waveform-utils';
 
@@ -88,6 +89,15 @@ const { state } = store(
 				const shouldAutoPlay = !! existing?.url;
 
 				initPlayer( ref, track, shouldAutoPlay, context );
+
+				return () => {
+					if ( ! ref.isConnected ) {
+						const player = playerState.get( ref );
+						player?.destroy?.();
+						playerState.delete( ref );
+						playlistPlayerState.delete( context.playlistId );
+					}
+				};
 			},
 		},
 	},
@@ -138,6 +148,27 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 							track.image
 						);
 					}
+					if ( track.title ) {
+						existing.container.setAttribute(
+							'data-title',
+							track.title
+						);
+					} else {
+						existing.container.removeAttribute( 'data-title' );
+					}
+					if ( track.artist ) {
+						existing.container.setAttribute(
+							'data-artist',
+							track.artist
+						);
+					} else {
+						existing.container.removeAttribute( 'data-artist' );
+					}
+					updatePlayButtonAccessibilityLabel(
+						existing.container,
+						existing.instance
+					);
+
 					if ( shouldAutoPlay ) {
 						existing.instance.play()?.catch( logPlayError );
 					}

packages/block-library/src/utils/waveform-player.js

@@ -12,6 +12,7 @@ import {
 	applyWaveformPlayerStyles,
 	initWaveformPlayer,
 	setupPlayButtonArtwork,
+	updatePlayButtonAccessibilityLabel,
 	updateSeekControlLabel,
 } from './waveform-utils';
 
@@ -61,6 +62,18 @@ function updatePlayerMetadata(
 	if ( showPlayButtonArtwork ) {
 		setupPlayButtonArtwork( container, image );
 	}
+
+	if ( title ) {
+		container.setAttribute( 'data-title', title );
+	} else {
+		container.removeAttribute( 'data-title' );
+	}
+	if ( artist ) {
+		container.setAttribute( 'data-artist', artist );
+	} else {
+		container.removeAttribute( 'data-artist' );
+	}
+	updatePlayButtonAccessibilityLabel( container, instance );
 }
 
 /**