@wordpress/block-library 10.1.0 → 10.2.0

package/src/playlist-track/edit.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import { v4 as uuid } from 'uuid';
-
 /**
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
-import { useRef, useState } from '@wordpress/element';
+import { useContext, useEffect, useRef, useState } from '@wordpress/element';
 import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
@@ -17,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';
@@ -35,25 +32,50 @@ 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, setAttributes, context } ) => {
-	// Note that 'id' is the media attachment ID, while 'uniqueId' is a unique identifier.
-	// This is to make sure that the same media can be used in more than one track.
-	const { id, uniqueId, src, album, artist, image, length, title } =
+const PlaylistTrackEdit = ( {
+	attributes,
+	setAttributes,
+	context,
+	clientId,
+	isSelected,
+} ) => {
+	const { id, src, album, artist, image, imageAlt, length, title } =
 		attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const showArtists = context?.showArtists;
-	const currentTrack = context?.currentTrack;
+	const showImages = context?.showImages ?? true;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
+	const { currentTrackClientId, setCurrentTrackClientId } =
+		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
+	const hasTrackSource = !! src || !! temporaryURL;
+
+	useEffect( () => {
+		if (
+			isSelected &&
+			hasTrackSource &&
+			currentTrackClientId !== clientId
+		) {
+			setCurrentTrackClientId( clientId );
+		}
+	}, [
+		isSelected,
+		hasTrackSource,
+		clientId,
+		currentTrackClientId,
+		setCurrentTrackClientId,
+	] );
 
 	useUploadMediaFromBlobURL( {
 		src: temporaryURL,
@@ -69,10 +91,10 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 			setAttributes( {
 				blob: undefined,
 				id: undefined,
-				uniqueId: undefined,
 				artist: undefined,
 				album: undefined,
 				image: undefined,
+				imageAlt: undefined,
 				length: undefined,
 				title: undefined,
 				url: undefined,
@@ -88,43 +110,23 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 
 		setAttributes( {
 			blob: undefined,
-			id: media.id,
-			uniqueId: uuid(),
-			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
@@ -182,59 +184,94 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 						} }
 					/>
 					<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 }>
 				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
-					data-wp-context={ JSON.stringify( { uniqueId } ) }
+					onClick={ () => setCurrentTrackClientId( clientId ) }
 					aria-current={
-						currentTrack === uniqueId ? 'true' : 'false'
+						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 }
@@ -242,11 +279,10 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 							onChange={ ( value ) => {
 								setAttributes( { title: value } );
 							} }
-							allowedFormats={ [] }
-							withoutInteractiveFormatting
+							__experimentalVersion={ 2 }
 						/>
 						{ showArtists && (
-							<RichText
+							<PlainText
 								tagName="span"
 								className="wp-block-playlist-track__artist"
 								value={ artist }
@@ -254,8 +290,7 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )
 								}
-								allowedFormats={ [] }
-								withoutInteractiveFormatting
+								__experimentalVersion={ 2 }
 							/>
 						) }
 					</span>
@@ -263,16 +298,14 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 						{ 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

@@ -10,48 +10,55 @@
  *
  * @since 6.9.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'];
+	}
 
-	$unique_id = $attributes['uniqueId'] ?? wp_unique_id( 'playlist-track-' );
-	$artist    = $attributes['artist'] ?? '';
-	$length    = $attributes['length'] ?? '';
-	$title     = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
-
-	$context = wp_interactivity_data_wp_context(
-		array(
-			'uniqueId' => $unique_id,
-		)
-	);
+	$artist = $attributes['artist'] ?? '';
+	$image  = $attributes['image'] ?? '';
+	$alt    = $attributes['imageAlt'] ?? '';
+	$length = $attributes['length'] ?? '';
+	$title  = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
 
 	$html  = '<li ' . $wrapper_attributes . '>';
-	$html .= '<button ' . $context . 'data-wp-on--click="actions.changeTrack" data-wp-bind--aria-current="state.isCurrentTrack" class="wp-block-playlist-track__button">';
+	$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>';
 

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;

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

@@ -0,0 +1,169 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+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>,
+	BlockIcon: () => <span />,
+	InspectorControls: ( { children } ) => <div>{ children }</div>,
+	MediaPlaceholder: () => <div />,
+	MediaReplaceFlow: () => <div />,
+	MediaUpload: ( { render: renderMediaUpload } ) =>
+		renderMediaUpload( { open: jest.fn() } ),
+	MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
+	PlainText: ( {
+		onChange,
+		placeholder,
+		tagName: TagName = 'div',
+		value,
+		__experimentalVersion,
+		...props
+	} ) => <TagName { ...props }>{ value || placeholder }</TagName>,
+	useBlockProps: jest.fn( () => ( {} ) ),
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn(),
+	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
+		const newState = {};
+		Object.keys( reducers ).forEach( ( key ) => {
+			newState[ key ] = reducers[ key ]( state[ key ], action );
+		} );
+		return newState;
+	} ),
+	createRegistrySelector: jest.fn( ( fn ) => fn ),
+	createReduxStore: jest.fn( () => ( {} ) ),
+	createSelector: jest.fn( ( fn ) => fn ),
+	register: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/notices', () => ( {
+	store: 'core/notices',
+} ) );
+
+jest.mock( '../../utils/hooks', () => ( {
+	useUploadMediaFromBlobURL: jest.fn(),
+} ) );
+
+const defaultAttributes = {
+	id: 1,
+	src: 'https://example.com/song.mp3',
+	album: 'Great Album',
+	artist: 'The Artist',
+	image: 'https://example.com/cover.jpg',
+	imageAlt: 'A bright abstract track image',
+	length: '3:45',
+	title: 'Song One',
+};
+
+function renderEdit( props = {} ) {
+	const setAttributes = jest.fn();
+	const setCurrentTrackClientId = props.setCurrentTrackClientId || jest.fn();
+
+	render(
+		<PlaylistContext.Provider
+			value={ {
+				currentTrackClientId: props.currentTrackClientId ?? null,
+				setCurrentTrackClientId,
+			} }
+		>
+			<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, setCurrentTrackClientId };
+}
+
+describe( 'PlaylistTrackEdit', () => {
+	beforeEach( () => {
+		useDispatch.mockReturnValue( {
+			createErrorNotice: jest.fn(),
+		} );
+	} );
+
+	it( 'allows the track image alternative text to be edited', () => {
+		const { setAttributes } = renderEdit();
+
+		expect(
+			screen.getByRole( 'link', {
+				name: /Describe the purpose of the image\./,
+			} )
+		).toHaveAttribute(
+			'href',
+			'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+		);
+		expect(
+			screen.queryByText( 'Leave empty if decorative.' )
+		).not.toBeInTheDocument();
+
+		fireEvent.change( screen.getByLabelText( 'Alternative text' ), {
+			target: { value: 'A silver microphone on a red background' },
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			imageAlt: 'A silver microphone on a red background',
+		} );
+	} );
+
+	it( 'does not show the alternative text control without a track image', () => {
+		renderEdit( {
+			attributes: {
+				image: undefined,
+				imageAlt: undefined,
+			},
+		} );
+
+		expect(
+			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();
+	} );
+} );

package/src/post-author/edit.js

@@ -107,7 +107,6 @@ function AuthorCombobox( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ value?.id }
@@ -268,7 +267,6 @@ function PostAuthorEdit( {
 							}
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Avatar size' ) }
 								value={ avatarSize }
 								options={ avatarSizes }

package/src/post-content/README.md

@@ -27,6 +27,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
   - `minHeight`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):

package/src/post-content/block.json

@@ -24,6 +24,7 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
 				"backgroundImage": true
 			}

package/src/post-excerpt/edit.js

@@ -248,7 +248,6 @@ export default function PostExcerptEditor( props ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) => {

package/src/post-featured-image/overlay-controls.js

@@ -75,7 +75,6 @@ const Overlay = ( {
 					max={ 100 }
 					step={ 10 }
 					required
-					__next40pxDefaultSize
 				/>
 			</ToolsPanelItem>
 		</>

package/src/post-navigation-link/edit.js

@@ -145,7 +145,6 @@ export default function PostNavigationLinkEdit( {
 						onDeselect={ () => setAttributes( { arrow: 'none' } ) }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label={ __( 'Arrow' ) }
 							value={ arrow }
 							onChange={ ( value ) => {
@@ -183,7 +182,6 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

package/src/post-template/README.md

@@ -54,6 +54,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 - `previewPostType`
 - `enhancedPagination`
 - `postType`
+- `postId`
 
 ## Block Markup
 

package/src/post-template/block.json

@@ -14,7 +14,8 @@
 		"templateSlug",
 		"previewPostType",
 		"enhancedPagination",
-		"postType"
+		"postType",
+		"postId"
 	],
 	"supports": {
 		"anchor": true,