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

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,9 +46,11 @@ 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 } =
@@ -54,13 +59,19 @@ const PlaylistTrackEdit = ( {
 	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,
@@ -83,6 +94,7 @@ const PlaylistTrackEdit = ( {
 				artist: undefined,
 				album: undefined,
 				image: undefined,
+				imageAlt: undefined,
 				length: undefined,
 				title: undefined,
 				url: undefined,
@@ -98,42 +110,23 @@ const PlaylistTrackEdit = ( {
 
 		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
@@ -191,46 +184,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 +263,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 +279,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 +290,7 @@ const PlaylistTrackEdit = ( {
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )
 								}
-								allowedFormats={ [] }
-								withoutInteractiveFormatting
+								__experimentalVersion={ 2 }
 							/>
 						) }
 					</span>
@@ -272,16 +298,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

@@ -10,41 +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'];
+	}
 
 	$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 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-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-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,

package/src/post-template/edit.js

@@ -103,6 +103,7 @@ export default function PostTemplateEdit( {
 			parents,
 			pages,
 			format,
+			excludeCurrent,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -112,6 +113,7 @@ export default function PostTemplateEdit( {
 		} = {},
 		templateSlug,
 		previewPostType,
+		postId,
 	},
 	attributes: { layout },
 	__unstableLayoutClassNames,
@@ -203,6 +205,13 @@ export default function PostTemplateEdit( {
 			if ( format?.length ) {
 				query.format = format;
 			}
+			if ( excludeCurrent && postId ) {
+				if ( query.exclude ) {
+					query.exclude = [ ...query.exclude, postId ];
+				} else {
+					query.exclude = [ postId ];
+				}
+			}
 
 			/*
 			 * Handle cases where sticky is set to `exclude` or `only`.

package/src/pullquote/README.md

@@ -26,6 +26,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`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`

package/src/pullquote/block.json

@@ -26,8 +26,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"color": {

package/src/query/README.md

@@ -16,7 +16,7 @@ _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 |
 |-----------|------|---------|-------------|
 | `queryId` | `number` | — | — |
-| `query` | `object` | `{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"format":[]}` | — |
+| `query` | `object` | `{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"format":[],"excludeCurrent":null}` | — |
 | `tagName` | `string` | `"div"` | — |
 | `namespace` | `string` | — | — |
 | `enhancedPagination` | `boolean` | `false` | — |
@@ -38,6 +38,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `templateSlug`
+- `postType`
 
 **Provides context:**
 

package/src/query/block.json

@@ -27,7 +27,8 @@
 				"inherit": true,
 				"taxQuery": null,
 				"parents": [],
-				"format": []
+				"format": [],
+				"excludeCurrent": null
 			}
 		},
 		"tagName": {
@@ -42,7 +43,7 @@
 			"default": false
 		}
 	},
-	"usesContext": [ "templateSlug" ],
+	"usesContext": [ "templateSlug", "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",