@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/src/playlist/view.js

@@ -6,12 +6,18 @@ import { store, getContext, getElement } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { initWaveformPlayer, logPlayError } from '../utils/waveform-utils';
+import {
+	initWaveformPlayer,
+	logPlayError,
+	setupPlayButtonArtwork,
+	updateSeekControlLabel,
+} from '../utils/waveform-utils';
 
 /**
  * Store player state for each element.
  */
 const playerState = new WeakMap();
+const playlistPlayerState = new Map();
 
 const { state } = store(
 	'core/playlist',
@@ -22,10 +28,34 @@ const { state } = store(
 				const { currentId, trackId } = getContext();
 				return currentId === trackId;
 			},
+			get isCurrentTrackPlaying() {
+				const { currentId, isPlaying, trackId } = getContext();
+				return currentId === trackId && !! isPlaying;
+			},
+			get trackButtonActionLabel() {
+				const { labelPauseTrack, labelSelectTrack } = getContext();
+				return state.isCurrentTrackPlaying
+					? labelPauseTrack
+					: labelSelectTrack;
+			},
 		},
 		actions: {
 			changeTrack() {
 				const context = getContext();
+				if ( context.currentId === context.trackId ) {
+					const player = playlistPlayerState.get(
+						context.playlistId
+					)?.instance;
+					if ( player?.isPlaying ) {
+						context.isPlaying = false;
+						player.pause();
+					} else {
+						player?.play()?.catch( logPlayError );
+					}
+					return;
+				}
+
+				context.isPlaying = false;
 				context.currentId = context.trackId;
 			},
 		},
@@ -74,27 +104,55 @@ const { state } = store(
  */
 function initPlayer( ref, track, shouldAutoPlay, context ) {
 	const existing = playerState.get( ref );
+	const showPlayButtonArtwork = context.showPlayButtonArtwork === true;
+	const playerArtwork = showPlayButtonArtwork ? '' : track.image;
 
 	// If a player already exists, load the new track without recreating.
 	if ( existing?.instance ) {
-		existing.instance
-			.loadTrack( track.url, track.title, track.artist, {
-				artwork: track.image,
-			} )
-			.then( () => {
-				existing.url = track.url;
-				if ( shouldAutoPlay ) {
-					existing.instance.play()?.catch( logPlayError );
-				}
-			} )
-			.catch( logPlayError );
-		return;
+		const shouldRecreatePlayer =
+			!! existing.instance.artworkEl !== !! playerArtwork;
+
+		if ( shouldRecreatePlayer ) {
+			existing.destroy?.();
+			playerState.delete( ref );
+		} else {
+			playlistPlayerState.set( context.playlistId, existing );
+			existing.instance
+				.loadTrack( track.url, track.title, track.artist, {
+					artwork: playerArtwork,
+					artworkAlt: playerArtwork ? track.imageAlt : '',
+				} )
+				.then( () => {
+					existing.url = track.url;
+					if ( existing.instance.artworkEl ) {
+						existing.instance.artworkEl.alt = track.imageAlt || '';
+					}
+					// loadTrack() preserves the previous explicit seekLabel option.
+					updateSeekControlLabel(
+						existing.instance,
+						track.title || ref.dataset.labelSeek
+					);
+					if ( showPlayButtonArtwork ) {
+						setupPlayButtonArtwork(
+							existing.container,
+							track.image
+						);
+					}
+					if ( shouldAutoPlay ) {
+						existing.instance.play()?.catch( logPlayError );
+					}
+				} )
+				.catch( logPlayError );
+			return;
+		}
 	}
 
 	// Read translated labels from server-rendered data attributes.
 	const labels = {
 		play: ref.dataset.labelPlay,
 		pause: ref.dataset.labelPause,
+		seek: ref.dataset.labelSeek,
+		seekValueText: ref.dataset.labelSeekValue,
 	};
 
 	// Initialize using the shared core.
@@ -103,9 +161,15 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 		title: track.title,
 		artist: track.artist,
 		image: track.image,
+		imageAlt: track.imageAlt,
+		waveformColor: ref.dataset.waveformPlayerColor,
+		waveformGradient: ref.dataset.waveformPlayerGradient,
+		backgroundColor: ref.dataset.waveformPlayerBackgroundColor,
+		backgroundGradient: ref.dataset.waveformPlayerBackgroundGradient,
 		autoPlay: shouldAutoPlay,
 		labels,
 		waveformStyle: context.waveformStyle,
+		showPlayButtonArtwork,
 		onEnded: () => {
 			// Advance to next track (autoPlay handles playback).
 			const currentIndex = context.tracks.findIndex(
@@ -117,11 +181,28 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 			}
 		},
 	} );
+	const setIsPlaying = ( isPlaying ) => {
+		context.isPlaying = isPlaying;
+	};
+	const onPlay = () => setIsPlaying( true );
+	const onPause = () => setIsPlaying( false );
+	player.container.addEventListener( 'waveformplayer:play', onPlay );
+	player.container.addEventListener( 'waveformplayer:pause', onPause );
+	player.container.addEventListener( 'waveformplayer:ended', onPause );
+	const destroy = () => {
+		player.container.removeEventListener( 'waveformplayer:play', onPlay );
+		player.container.removeEventListener( 'waveformplayer:pause', onPause );
+		player.container.removeEventListener( 'waveformplayer:ended', onPause );
+		player.destroy();
+	};
 
 	// Store state for cleanup, including instance for loadTrack reuse.
-	playerState.set( ref, {
+	const nextState = {
 		url: track.url,
 		instance: player.instance,
-		destroy: player.destroy,
-	} );
+		container: player.container,
+		destroy,
+	};
+	playerState.set( ref, nextState );
+	playlistPlayerState.set( context.playlistId, nextState );
 }

package/src/playlist-track/README.md

@@ -1,8 +1,6 @@
 # Playlist track
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Playlist track.
 
 - **Name:** `core/playlist-track`
@@ -29,6 +27,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `album` | `string` | — | — |
 | `artist` | `string` | — | — |
 | `image` | `string` | — | — |
+| `imageAlt` | `string` | — | — |
 | `length` | `string` | — | — |
 | `title` | `string` | — | — |
 
@@ -48,6 +47,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `showArtists`
+- `showImages`
 
 ## Block Markup
 
@@ -56,7 +56,7 @@ This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getti
 In post content, it is stored as a block comment:
 
 ```html
-<!-- wp:playlist-track {"type":"audio"} /-->
+<!-- wp:core/playlist-track {"id":123,"src":"https://example.com/audio.mp3","album":"Example album","artist":"Example creator","image":"https://example.com/track-image.jpg","imageAlt":"Track image","length":"3:21","title":"Sample track"} /-->
 ```
 
 ## Source

package/src/playlist-track/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": true,
 	"name": "core/playlist-track",
 	"title": "Playlist track",
 	"category": "media",
@@ -9,7 +8,7 @@
 	"description": "Playlist track.",
 	"keywords": [ "music", "sound" ],
 	"textdomain": "default",
-	"usesContext": [ "showArtists" ],
+	"usesContext": [ "showArtists", "showImages" ],
 	"attributes": {
 		"blob": {
 			"type": "string",
@@ -34,6 +33,9 @@
 		"image": {
 			"type": "string"
 		},
+		"imageAlt": {
+			"type": "string"
+		},
 		"length": {
 			"type": "string"
 		},

package/src/playlist-track/edit.js

@@ -12,15 +12,17 @@ import {
 	useBlockProps,
 	BlockControls,
 	InspectorControls,
-	RichText,
+	PlainText,
 } from '@wordpress/block-editor';
 import {
 	Button,
 	PanelBody,
 	TextControl,
+	TextareaControl,
 	BaseControl,
 	Spinner,
 } from '@wordpress/components';
+import { Link } from '@wordpress/ui';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
@@ -31,10 +33,11 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
  * Internal dependencies
  */
 import { PlaylistContext } from '../playlist/context';
+import { getTrackAttributes, getTrackImageAttributes } from '../playlist/utils';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
-const ALBUM_COVER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+const TRACK_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const PlaylistTrackEdit = ( {
 	attributes,
@@ -43,38 +46,48 @@ const PlaylistTrackEdit = ( {
 	clientId,
 	isSelected,
 } ) => {
-	const { id, src, album, artist, image, length, title } = attributes;
+	const { id, src, album, artist, image, imageAlt, length, title } =
+		attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const showArtists = context?.showArtists;
+	const showImages = context?.showImages ?? true;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
-	const { currentTrackClientId, setCurrentTrackClientId } =
+	const { currentTrackClientId, setCurrentTrackClientId, addTracks } =
 		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	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,
 	] );
 
 	useUploadMediaFromBlobURL( {
-		src: temporaryURL,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectTrack,
 		onError: onUploadError,
 	} );
 
 	function onSelectTrack( media ) {
-		if ( ! media || ! media.url ) {
+		const mediaUrl = media?.url ?? media?.source_url;
+
+		if ( ! media || ! mediaUrl ) {
 			// In this case there was an error and we should continue in the editing state
 			// previous attributes should be removed because they may be temporary blob urls.
 			setAttributes( {
@@ -83,6 +96,7 @@ const PlaylistTrackEdit = ( {
 				artist: undefined,
 				album: undefined,
 				image: undefined,
+				imageAlt: undefined,
 				length: undefined,
 				title: undefined,
 				url: undefined,
@@ -91,49 +105,30 @@ const PlaylistTrackEdit = ( {
 			return;
 		}
 
-		if ( isBlobURL( media.url ) ) {
-			setTemporaryURL( media.url );
+		if ( isBlobURL( mediaUrl ) ) {
+			setTemporaryURL( mediaUrl );
 			return;
 		}
 
 		setAttributes( {
 			blob: undefined,
-			id: media.id,
-			src: media.url,
-			artist:
-				media.artist ||
-				media?.meta?.artist ||
-				media?.media_details?.artist ||
-				__( 'Unknown artist' ),
-			album:
-				media.album ||
-				media?.meta?.album ||
-				media?.media_details?.album ||
-				__( 'Unknown album' ),
-			// Prevent using the default media attachment icon as the track image.
-			image:
-				media?.image?.src &&
-				media?.image?.src.endsWith( '/images/media/audio.svg' )
-					? ''
-					: media?.image?.src,
-			length: media?.fileLength || media?.media_details?.length_formatted,
-			title: media.title,
+			...getTrackAttributes( media ),
 		} );
 		setTemporaryURL();
 	}
 
-	function onSelectAlbumCoverImage( coverImage ) {
-		setAttributes( { image: coverImage.url } );
+	function onSelectTrackImage( trackImage ) {
+		setAttributes( getTrackImageAttributes( trackImage ) );
 	}
 
-	function onRemoveAlbumCoverImage() {
-		setAttributes( { image: undefined } );
+	function onRemoveTrackImage() {
+		setAttributes( { image: undefined, imageAlt: undefined } );
 
 		// Move focus back to the Media Upload button.
 		imageButton.current.focus();
 	}
 
-	if ( ! src && ! temporaryURL ) {
+	if ( ! hasTrackSource ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -165,8 +160,23 @@ const PlaylistTrackEdit = ( {
 					mediaURL={ src }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
+					variant="toolbar"
 				/>
 			</BlockControls>
+			{ !! addTracks && (
+				<BlockControls group="block">
+					<MediaReplaceFlow
+						name={ __( 'Add' ) }
+						onSelect={ addTracks }
+						accept="audio/*"
+						multiple
+						handleUpload={ false }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onError={ onUploadError }
+						variant="toolbar"
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
@@ -191,46 +201,74 @@ const PlaylistTrackEdit = ( {
 						} }
 					/>
 					<MediaUploadCheck>
-						<div className="editor-video-poster-control">
+						<BaseControl>
 							<BaseControl.VisualLabel>
-								{ __( 'Album cover image' ) }
+								{ __( 'Track image' ) }
 							</BaseControl.VisualLabel>
-							{ !! image && (
-								<img
-									src={ image }
-									alt={ __(
-										'Preview of the album cover image'
+							<div className="editor-video-poster-control">
+								{ !! image && (
+									<img
+										src={ image }
+										alt={ __(
+											'Preview of the track image'
+										) }
+									/>
+								) }
+								<MediaUpload
+									title={ __( 'Select image' ) }
+									onSelect={ onSelectTrackImage }
+									allowedTypes={
+										TRACK_IMAGE_ALLOWED_MEDIA_TYPES
+									}
+									render={ ( { open } ) => (
+										<Button
+											__next40pxDefaultSize
+											variant="primary"
+											onClick={ open }
+											ref={ imageButton }
+										>
+											{ ! image
+												? __( 'Select' )
+												: __( 'Replace' ) }
+										</Button>
 									) }
 								/>
-							) }
-							<MediaUpload
-								title={ __( 'Select image' ) }
-								onSelect={ onSelectAlbumCoverImage }
-								allowedTypes={ ALBUM_COVER_ALLOWED_MEDIA_TYPES }
-								render={ ( { open } ) => (
+								{ !! image && (
 									<Button
 										__next40pxDefaultSize
-										variant="primary"
-										onClick={ open }
-										ref={ imageButton }
+										onClick={ onRemoveTrackImage }
+										variant="tertiary"
 									>
-										{ ! image
-											? __( 'Select' )
-											: __( 'Replace' ) }
+										{ __( 'Remove' ) }
 									</Button>
 								) }
-							/>
-							{ !! image && (
-								<Button
-									__next40pxDefaultSize
-									onClick={ onRemoveAlbumCoverImage }
-									variant="tertiary"
-								>
-									{ __( 'Remove' ) }
-								</Button>
-							) }
-						</div>
+							</div>
+						</BaseControl>
 					</MediaUploadCheck>
+					{ !! image && (
+						<TextareaControl
+							label={ __( 'Alternative text' ) }
+							value={ imageAlt || '' }
+							onChange={ ( value ) =>
+								setAttributes( { imageAlt: value } )
+							}
+							help={
+								<Link
+									openInNewTab
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</Link>
+							}
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
@@ -242,8 +280,15 @@ const PlaylistTrackEdit = ( {
 						currentTrackClientId === clientId ? 'true' : 'false'
 					}
 				>
+					{ showImages && !! image && (
+						<img
+							className="wp-block-playlist-track__image"
+							src={ image }
+							alt={ imageAlt || '' }
+						/>
+					) }
 					<span className="wp-block-playlist-track__content">
-						<RichText
+						<PlainText
 							tagName="span"
 							className="wp-block-playlist-track__title"
 							value={ title }
@@ -251,11 +296,10 @@ const PlaylistTrackEdit = ( {
 							onChange={ ( value ) => {
 								setAttributes( { title: value } );
 							} }
-							allowedFormats={ [] }
-							withoutInteractiveFormatting
+							__experimentalVersion={ 2 }
 						/>
 						{ showArtists && (
-							<RichText
+							<PlainText
 								tagName="span"
 								className="wp-block-playlist-track__artist"
 								value={ artist }
@@ -263,8 +307,7 @@ const PlaylistTrackEdit = ( {
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )
 								}
-								allowedFormats={ [] }
-								withoutInteractiveFormatting
+								__experimentalVersion={ 2 }
 							/>
 						) }
 					</span>
@@ -272,16 +315,14 @@ const PlaylistTrackEdit = ( {
 						{ length && (
 							<span className="screen-reader-text">
 								{
-									/* translators: %s: Visually hidden label for the track length (screen reader text). */
-									__( 'Length:' )
+									/* translators: Visually hidden label for the track duration (screen reader text). */
+									__( 'Duration:' )
 								}
 							</span>
 						) }
 						{ length }
 					</span>
-					<span className="screen-reader-text">
-						{ __( 'Select to play this track' ) }
-					</span>
+					<span className="screen-reader-text">{ __( 'Play' ) }</span>
 				</button>
 			</li>
 		</>

package/src/playlist-track/index.php

@@ -8,43 +8,58 @@
 /**
  * Renders the `core/playlist-track` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  *
- * @param array $attributes The block attributes.
+ * @param array         $attributes The block attributes.
+ * @param string        $content    The block content.
+ * @param WP_Block|null $block      The block instance.
  *
  * @return string Returns the Playlist Track.
  */
-function render_block_core_playlist_track( $attributes ) {
+function render_block_core_playlist_track( $attributes, $content = '', $block = null ) {
 	if ( empty( $attributes['id'] ) ) {
 		return '';
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_images        = true;
+	if ( $block instanceof WP_Block && isset( $block->context['showImages'] ) ) {
+		$show_images = $block->context['showImages'];
+	}
 
-	$artist = $attributes['artist'] ?? '';
-	$length = $attributes['length'] ?? '';
-	$title  = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
+	$track_image = $attributes['image'] ?? null;
+	$image       = is_string( $track_image ) ? $track_image : '';
+	$artist      = $attributes['artist'] ?? '';
+	$alt         = $attributes['imageAlt'] ?? '';
+	$length      = $attributes['length'] ?? '';
+	$title       = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
 
 	$html  = '<li ' . $wrapper_attributes . '>';
 	$html .= '<button data-wp-on--click="actions.changeTrack" data-wp-bind--aria-current="state.isCurrentTrack" class="wp-block-playlist-track__button">';
 
+	if ( $show_images && $image ) {
+		$html .= '<img class="wp-block-playlist-track__image" src="' . esc_url( $image ) . '" alt="' . esc_attr( $alt ) . '" />';
+	}
+
 	$html .= '<span class="wp-block-playlist-track__content">';
 	if ( $title ) {
-		$html .= '<span class="wp-block-playlist-track__title">' . wp_kses_post( $title ) . '</span>';
+		$html .= '<span class="wp-block-playlist-track__title">' . esc_html( $title ) . '</span>';
 	}
 	if ( $artist ) {
-		$html .= '<span class="wp-block-playlist-track__artist">' . wp_kses_post( $artist ) . '</span>';
+		$html .= '<span class="wp-block-playlist-track__artist">' . esc_html( $artist ) . '</span>';
 	}
 	$html .= '</span>';
 
 	if ( $length ) {
 		$html .= '<span class="wp-block-playlist-track__length">';
-		$html .= '<span class="screen-reader-text">' . esc_html__( 'Length:' ) . ' </span>';
+		$html .= '<span class="screen-reader-text">' . esc_html__( 'Duration:' ) . ' </span>';
 		$html .= esc_html( $length );
 		$html .= '</span>';
 	}
 
-	$html .= '<span class="screen-reader-text">' . esc_html__( 'Select to play this track' ) . '</span>';
+	$html .= '<span class="screen-reader-text" data-wp-text="state.trackButtonActionLabel">';
+	$html .= esc_html__( 'Play' );
+	$html .= '</span>';
 	$html .= '</button>';
 	$html .= '</li>';
 
@@ -54,7 +69,7 @@ function render_block_core_playlist_track( $attributes ) {
 /**
  * Registers the `core/playlist-track` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  */
 function register_block_core_playlist_track() {
 	register_block_type_from_metadata(

package/src/playlist-track/style.scss

@@ -33,6 +33,16 @@
 			opacity: 0.7;
 		}
 
+		.wp-block-playlist-track__image {
+			flex: 0 0 50px;
+			width: 50px;
+			height: 50px;
+			margin-right: var(--wp--preset--spacing--20, 0.5em);
+			border: 1px solid rgb(0 0 0 / 8%);
+			box-sizing: border-box;
+			object-fit: cover;
+		}
+
 		.wp-block-playlist-track__content {
 			flex: 1 1 0;
 			min-width: 0;