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

package/src/playlist/index.php

@@ -8,7 +8,7 @@
 /**
  * Renders the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
@@ -17,9 +17,10 @@
  * @return string Returns the Playlist.
  */
 function render_block_core_playlist( $attributes, $content, $block ) {
-	$playlist_id     = wp_unique_id( 'playlist-' );
-	$playlist_tracks = array();
-	$tracks_data     = array();
+	$playlist_id              = wp_unique_id( 'playlist-' );
+	$playlist_tracks          = array();
+	$tracks_data              = array();
+	$show_play_button_artwork = ! empty( $attributes['showPlayButtonArtwork'] );
 
 	// Parse inner blocks to extract track data.
 	// This approach avoids duplicating track data in the HTML output.
@@ -36,16 +37,22 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				$playlist_tracks[] = $track_id;
 
 				// Extract track metadata from block attributes.
-				$title      = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' );
-				$artist     = $track_attributes['artist'] ?? '';
-				$album      = $track_attributes['album'] ?? '';
-				$image      = $track_attributes['image'] ?? '';
-				$url        = $track_attributes['src'] ?? '';
-				$aria_label = $title;
+				$track_title_attr = $track_attributes['title'] ?? null;
+				$track_artist     = $track_attributes['artist'] ?? null;
+				$track_album      = $track_attributes['album'] ?? null;
+				$track_image      = $track_attributes['image'] ?? null;
+				$track_src        = $track_attributes['src'] ?? null;
+				$title            = ! empty( $track_title_attr ) && is_string( $track_title_attr ) ? $track_title_attr : __( 'Unknown title' );
+				$artist           = is_string( $track_artist ) ? $track_artist : '';
+				$album            = is_string( $track_album ) ? $track_album : '';
+				$image            = is_string( $track_image ) ? $track_image : '';
+				$image_alt        = $track_attributes['imageAlt'] ?? '';
+				$url              = is_string( $track_src ) ? $track_src : '';
+				$aria_label       = $title;
 
 				if ( $title && $artist && $album ) {
 					$aria_label = sprintf(
-						/* translators: %1$s: track title, %2$s artist name, %3$s: album name. */
+						/* translators: %1$s: track title, %2$s: artist name, %3$s: album name. */
 						_x( '%1$s by %2$s from the album %3$s', 'track title, artist name, album name' ),
 						$title,
 						$artist,
@@ -62,6 +69,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 					'artist'    => wp_strip_all_tags( $artist ),
 					'album'     => wp_strip_all_tags( $album ),
 					'image'     => esc_url( $image ),
+					'imageAlt'  => wp_strip_all_tags( $image_alt ),
 					'ariaLabel' => wp_strip_all_tags( $aria_label ),
 				);
 			}
@@ -90,10 +98,50 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 	// Add waveform player container with translated button labels.
 	$label_play  = esc_attr__( 'Play' );
 	$label_pause = esc_attr__( 'Pause' );
-	$html        = '<div class="wp-block-playlist__waveform-player"
+	$label_seek  = esc_attr__( 'Seek' );
+	/* translators: %1$s: current audio time, %2$s: total audio duration. */
+	$label_seek_value                       = esc_attr_x(
+		'%1$s of %2$s',
+		'audio current time of total duration'
+	);
+	$waveform_color_attribute               = '';
+	$waveform_gradient_attribute            = '';
+	$waveform_background_color_attribute    = '';
+	$waveform_background_gradient_attribute = '';
+	if ( ! empty( $attributes['waveformColor'] ) ) {
+		$waveform_color_attribute = sprintf(
+			' data-waveform-player-color="%s"',
+			esc_attr( $attributes['waveformColor'] )
+		);
+	}
+	if ( ! empty( $attributes['waveformGradient'] ) ) {
+		$waveform_gradient_attribute = sprintf(
+			' data-waveform-player-gradient="%s"',
+			esc_attr( $attributes['waveformGradient'] )
+		);
+	}
+	if ( ! empty( $attributes['waveformBackgroundColor'] ) ) {
+		$waveform_background_color_attribute = sprintf(
+			' data-waveform-player-background-color="%s"',
+			esc_attr( $attributes['waveformBackgroundColor'] )
+		);
+	}
+	if ( ! empty( $attributes['waveformBackgroundGradient'] ) ) {
+		$waveform_background_gradient_attribute = sprintf(
+			' data-waveform-player-background-gradient="%s"',
+			esc_attr( $attributes['waveformBackgroundGradient'] )
+		);
+	}
+	$html = '<div class="wp-block-playlist__waveform-player"' .
+		$waveform_color_attribute .
+		$waveform_gradient_attribute .
+		$waveform_background_color_attribute .
+		$waveform_background_gradient_attribute . '
 		data-wp-watch="callbacks.initWaveformPlayer"
 		data-label-play="' . $label_play . '"
 		data-label-pause="' . $label_pause . '"
+		data-label-seek="' . $label_seek . '"
+		data-label-seek-value="' . $label_seek_value . '"
 	></div>';
 
 	// Add the waveform player container inside the figure.
@@ -106,20 +154,21 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$processor->next_tag( 'figure' );
 	$processor->set_attribute( 'data-wp-interactive', 'core/playlist' );
-	// Extract the waveform style from the block style variation class.
-	$waveform_style = 'bars';
-	if ( ! empty( $attributes['className'] ) && preg_match( '/is-style-([\w-]+)/', $attributes['className'], $matches ) ) {
-		$waveform_style = $matches[1];
-	}
+
+	$waveform_style = $attributes['waveformStyle'] ?? 'bars';
 
 	$processor->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
 			array(
-				'playlistId'    => $playlist_id,
-				'currentId'     => $playlist_tracks[0],
-				'tracks'        => $playlist_tracks,
-				'waveformStyle' => $waveform_style,
+				'playlistId'            => $playlist_id,
+				'currentId'             => $playlist_tracks[0],
+				'isPlaying'             => false,
+				'tracks'                => $playlist_tracks,
+				'waveformStyle'         => $waveform_style,
+				'showPlayButtonArtwork' => $show_play_button_artwork,
+				'labelPauseTrack'       => __( 'Pause' ),
+				'labelSelectTrack'      => __( 'Play' ),
 			)
 		)
 	);
@@ -153,7 +202,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 /**
  * Registers the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  */
 function register_block_core_playlist() {
 	register_block_type_from_metadata(

package/src/playlist/style.scss

@@ -4,11 +4,19 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;
 		margin: var(--wp--preset--spacing--20, 0.625em) 0;
 		position: relative;
+
+		&:focus-visible {
+			outline: revert;
+			outline-offset: revert;
+		}
 	}
 
 	// Set the waveform track height and remove gap between button and waveform.
@@ -19,6 +27,7 @@ $waveform-player-height: 100px;
 
 	// WaveformPlayer button styling.
 	.waveform-btn {
+		border: none;
 		border-radius: 0;
 		border-end-start-radius: 0.125rem;
 		border-start-start-radius: 0.125rem;
@@ -31,16 +40,60 @@ $waveform-player-height: 100px;
 		&:hover:not(:disabled) {
 			transform: none;
 		}
+
+		svg {
+			width: 3rem;
+			height: 3rem;
+		}
+
+		.waveform-icon-pause svg {
+			// The pause icon's two full-height bars read larger than the
+			// play triangle at the same SVG box size, so optically scale it
+			// down to match the play icon's visual weight.
+			width: 2.625rem;
+			height: 2.625rem;
+		}
+	}
+
+	.waveform-player.has-play-button-artwork {
+		.waveform-btn {
+			background-image: var(--wp--playlist--play-button-artwork);
+			background-position: center;
+			background-size: cover;
+			color: #fff;
+
+			svg {
+				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
+			}
+
+			svg path {
+				// Override inline fills applied before artwork is added.
+				fill: #fff !important;
+			}
+		}
 	}
 
 	.waveform-track.waveform-align-bottom .waveform-btn {
 		margin-bottom: 0;
 	}
 
-	.waveform-subtitle {
+	.waveform-btn:focus-visible,
+	.waveform-container:focus-visible {
+		outline: revert;
+		outline-offset: revert;
+	}
+
+	.waveform-artist {
 		opacity: 0.7;
 	}
 
+	.waveform-info,
+	.waveform-artist,
+	.waveform-title,
+	.waveform-time {
+		font-size: inherit;
+	}
+
 	.wp-block-playlist__tracklist {
 		margin: 0;
 		padding-left: 0;

package/src/playlist/test/edit-component.js

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PlaylistEdit from '../edit';
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	store: {},
+	BlockControls: ( { children } ) => <div>{ children }</div>,
+	BlockIcon: () => <span />,
+	InspectorControls: ( { children } ) => <div>{ children }</div>,
+	MediaPlaceholder: () => <div />,
+	MediaReplaceFlow: () => <div />,
+	useBlockProps: () => ( { className: 'wp-block-playlist' } ),
+	useInnerBlocksProps: ( blockProps ) => ( {
+		...blockProps,
+		children: <li data-testid="playlist-track" />,
+	} ),
+	__experimentalColorGradientSettingsDropdown: () => <div />,
+	__experimentalUseMultipleOriginColorsAndGradients: () => ( {
+		colors: [],
+		gradients: [],
+		disableCustomColors: true,
+		disableCustomGradients: true,
+	} ),
+} ) );
+
+jest.mock( '@wordpress/blocks', () => ( {
+	createBlock: jest.fn( ( name, attributes ) => ( {
+		name,
+		attributes,
+		clientId: 'new-track',
+	} ) ),
+} ) );
+
+jest.mock( '@wordpress/blob', () => ( {
+	createBlobURL: jest.fn( () => 'blob:track' ),
+} ) );
+
+jest.mock( '@wordpress/components', () => ( {
+	Disabled: ( { children } ) => <div>{ children }</div>,
+	SelectControl: () => <div />,
+	ToggleControl: () => <div />,
+	__experimentalToolsPanel: ( { children } ) => <div>{ children }</div>,
+	__experimentalToolsPanelItem: ( { children } ) => <div>{ children }</div>,
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn(),
+	useSelect: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/i18n', () => ( {
+	__: ( text ) => text,
+	_x: ( text ) => text,
+} ) );
+
+jest.mock( '@wordpress/icons', () => ( {
+	playlist: 'playlist',
+} ) );
+
+jest.mock( '@wordpress/notices', () => ( {
+	store: {},
+} ) );
+
+jest.mock( '../../utils/caption', () => ( {
+	Caption: () => <figcaption />,
+} ) );
+
+jest.mock( '../../utils/hooks', () => ( {
+	useToolsPanelDropdownMenuProps: () => ( {} ),
+} ) );
+
+jest.mock( '../../utils/waveform-player', () => ( {
+	WaveformPlayer: () => <div />,
+} ) );
+
+const defaultAttributes = {
+	order: 'asc',
+	showTracklist: true,
+	showNumbers: true,
+	showImages: true,
+	showPlayButtonArtwork: false,
+	showArtists: true,
+	showTrackLength: true,
+};
+
+describe( 'PlaylistEdit', () => {
+	beforeEach( () => {
+		useDispatch.mockReturnValue( {
+			createErrorNotice: jest.fn(),
+			replaceInnerBlocks: jest.fn(),
+			selectBlock: jest.fn(),
+		} );
+		useSelect.mockReturnValue( {
+			innerBlockTracks: [
+				{
+					clientId: 'track-1',
+					attributes: {
+						id: 1,
+						src: 'https://example.com/audio.mp3',
+						title: 'Sample track',
+					},
+				},
+			],
+		} );
+	} );
+
+	it( 'keeps track blocks mounted when the tracklist is hidden', () => {
+		render(
+			<PlaylistEdit
+				attributes={ {
+					...defaultAttributes,
+					showTracklist: false,
+				} }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		const tracklist = screen.getByRole( 'list' );
+
+		expect( tracklist ).toHaveClass(
+			'wp-block-playlist__tracklist-is-hidden'
+		);
+		expect( screen.getByTestId( 'playlist-track' ) ).toBeInTheDocument();
+	} );
+} );

package/src/playlist/test/edit.js

@@ -13,7 +13,10 @@ describe( 'Playlist block edit utilities', () => {
 				artist: 'The Artist',
 				album: 'Great Album',
 				fileLength: '3:45',
-				image: { src: 'https://example.com/cover.jpg' },
+				image: {
+					src: 'https://example.com/cover.jpg',
+					alt: 'A bright abstract track image',
+				},
 			};
 
 			const result = getTrackAttributes( media );
@@ -26,6 +29,7 @@ describe( 'Playlist block edit utilities', () => {
 				album: 'Great Album',
 				length: '3:45',
 				image: 'https://example.com/cover.jpg',
+				imageAlt: 'A bright abstract track image',
 			} );
 		} );
 
@@ -38,6 +42,38 @@ describe( 'Playlist block edit utilities', () => {
 			const result = getTrackAttributes( media );
 
 			expect( result.id ).toBe( 'https://example.com/song.mp3' );
+			expect( result.image ).toBeUndefined();
+			expect( result.imageAlt ).toBeUndefined();
+		} );
+
+		it( 'should transform raw uploaded attachment data to track attributes', () => {
+			const media = {
+				id: 123,
+				source_url: 'https://example.com/song.mp3',
+				title: { raw: 'My & Song' },
+				media_details: {
+					artist: 'Media Details Artist',
+					album: 'Media Details Album',
+					length_formatted: '4:30',
+				},
+				image: {
+					source_url: 'https://example.com/cover.jpg',
+					alt_text: 'A black and white portrait',
+				},
+			};
+
+			const result = getTrackAttributes( media );
+
+			expect( result ).toEqual( {
+				id: 123,
+				src: 'https://example.com/song.mp3',
+				title: 'My & Song',
+				artist: 'Media Details Artist',
+				album: 'Media Details Album',
+				length: '4:30',
+				image: 'https://example.com/cover.jpg',
+				imageAlt: 'A black and white portrait',
+			} );
 		} );
 
 		it( 'should fall back to meta.artist when artist is not available', () => {
@@ -110,18 +146,23 @@ describe( 'Playlist block edit utilities', () => {
 			const result = getTrackAttributes( media );
 
 			expect( result.image ).toBe( '' );
+			expect( result.imageAlt ).toBe( '' );
 		} );
 
 		it( 'should include image URLs', () => {
 			const media = {
 				url: 'https://example.com/song.mp3',
 				title: 'My Song',
-				image: { src: 'https://example.com/cover.jpg' },
+				image: {
+					src: 'https://example.com/cover.jpg',
+					alt_text: 'A black and white portrait',
+				},
 			};
 
 			const result = getTrackAttributes( media );
 
 			expect( result.image ).toBe( 'https://example.com/cover.jpg' );
+			expect( result.imageAlt ).toBe( 'A black and white portrait' );
 		} );
 	} );
 } );

package/src/playlist/utils.js

@@ -2,6 +2,49 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+function getMediaUrl( media ) {
+	return media?.url ?? media?.source_url;
+}
+
+function getMediaTitle( media ) {
+	const title = media?.title;
+
+	if ( title === undefined ) {
+		return undefined;
+	}
+
+	if ( typeof title === 'string' ) {
+		return title;
+	}
+
+	return decodeEntities( title?.raw || title?.rendered || '' );
+}
+
+/**
+ * Transform media library image data into track image attributes.
+ *
+ * @param {Object} image - Image object from the media library.
+ * @return {Object} Track image attributes for the playlist-track block.
+ */
+export function getTrackImageAttributes( image ) {
+	const imageSrc = image?.src ?? getMediaUrl( image );
+
+	// Prevent using the default media attachment icon as the track image.
+	if ( imageSrc?.endsWith( '/images/media/audio.svg' ) ) {
+		return {
+			image: '',
+			imageAlt: '',
+		};
+	}
+
+	return {
+		// Note: Image is not available when a new track is uploaded.
+		image: imageSrc,
+		imageAlt: imageSrc ? image?.alt || image?.alt_text || '' : undefined,
+	};
+}
 
 /**
  * Transform media library data into track block attributes.
@@ -10,10 +53,12 @@ import { __ } from '@wordpress/i18n';
  * @return {Object} Track attributes for the playlist-track block.
  */
 export function getTrackAttributes( media ) {
+	const mediaUrl = getMediaUrl( media );
+
 	return {
-		id: media.id || media.url, // Attachment ID or URL.
-		src: media.url,
-		title: media.title,
+		id: media.id || mediaUrl, // Attachment ID or URL.
+		src: mediaUrl,
+		title: getMediaTitle( media ),
 		artist:
 			media.artist ||
 			media?.meta?.artist ||
@@ -25,12 +70,6 @@ export function getTrackAttributes( media ) {
 			media?.media_details?.album ||
 			__( 'Unknown album' ),
 		length: media?.fileLength || media?.media_details?.length_formatted,
-		// Prevent using the default media attachment icon as the track image.
-		// Note: Image is not available when a new track is uploaded.
-		image:
-			media?.image?.src &&
-			media?.image?.src.endsWith( '/images/media/audio.svg' )
-				? ''
-				: media?.image?.src,
+		...getTrackImageAttributes( media?.image ),
 	};
 }