@wordpress/block-library 10.2.0 → 10.3.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

@@ -46,6 +46,36 @@ describe( 'Playlist block edit utilities', () => {
 			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', () => {
 			const media = {
 				url: 'https://example.com/song.mp3',

package/src/playlist/utils.js

@@ -2,6 +2,25 @@
  * 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.
@@ -10,7 +29,7 @@ import { __ } from '@wordpress/i18n';
  * @return {Object} Track image attributes for the playlist-track block.
  */
 export function getTrackImageAttributes( image ) {
-	const imageSrc = image?.src ?? image?.url;
+	const imageSrc = image?.src ?? getMediaUrl( image );
 
 	// Prevent using the default media attachment icon as the track image.
 	if ( imageSrc?.endsWith( '/images/media/audio.svg' ) ) {
@@ -34,10 +53,12 @@ export function getTrackImageAttributes( image ) {
  * @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 ||

package/src/playlist-track/edit.js

@@ -53,7 +53,7 @@ const PlaylistTrackEdit = ( {
 	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 ) {
@@ -78,14 +78,16 @@ const PlaylistTrackEdit = ( {
 	] );
 
 	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( {
@@ -103,8 +105,8 @@ const PlaylistTrackEdit = ( {
 			return;
 		}
 
-		if ( isBlobURL( media.url ) ) {
-			setTemporaryURL( media.url );
+		if ( isBlobURL( mediaUrl ) ) {
+			setTemporaryURL( mediaUrl );
 			return;
 		}
 
@@ -158,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

package/src/playlist-track/index.php

@@ -8,7 +8,7 @@
 /**
  * Renders the `core/playlist-track` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  *
  * @param array         $attributes The block attributes.
  * @param string        $content    The block content.
@@ -27,11 +27,12 @@ function render_block_core_playlist_track( $attributes, $content = '', $block =
 		$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' );
+	$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">';
@@ -68,7 +69,7 @@ function render_block_core_playlist_track( $attributes, $content = '', $block =
 /**
  * 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/test/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -13,13 +13,22 @@ import { useDispatch } from '@wordpress/data';
  */
 import PlaylistTrackEdit from '../edit';
 import { PlaylistContext } from '../../playlist/context';
+import { useUploadMediaFromBlobURL } from '../../utils/hooks';
+
+let mockMediaReplaceFlowProps;
 
 jest.mock( '@wordpress/block-editor', () => ( {
-	BlockControls: ( { children } ) => <div>{ children }</div>,
+	BlockControls: ( { children, group = 'default' } ) => (
+		<div data-testid={ `block-controls-${ group }` }>{ children }</div>
+	),
 	BlockIcon: () => <span />,
 	InspectorControls: ( { children } ) => <div>{ children }</div>,
 	MediaPlaceholder: () => <div />,
-	MediaReplaceFlow: () => <div />,
+	MediaReplaceFlow: ( props ) => {
+		mockMediaReplaceFlowProps = props;
+		const { name, onSelect } = props;
+		return <button onClick={ () => onSelect( {} ) }>{ name }</button>;
+	},
 	MediaUpload: ( { render: renderMediaUpload } ) =>
 		renderMediaUpload( { open: jest.fn() } ),
 	MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
@@ -71,12 +80,14 @@ const defaultAttributes = {
 function renderEdit( props = {} ) {
 	const setAttributes = jest.fn();
 	const setCurrentTrackClientId = props.setCurrentTrackClientId || jest.fn();
+	const addTracks = props.addTracks;
 
 	render(
 		<PlaylistContext.Provider
 			value={ {
 				currentTrackClientId: props.currentTrackClientId ?? null,
 				setCurrentTrackClientId,
+				addTracks,
 			} }
 		>
 			<PlaylistTrackEdit
@@ -101,9 +112,11 @@ function renderEdit( props = {} ) {
 
 describe( 'PlaylistTrackEdit', () => {
 	beforeEach( () => {
+		mockMediaReplaceFlowProps = undefined;
 		useDispatch.mockReturnValue( {
 			createErrorNotice: jest.fn(),
 		} );
+		useUploadMediaFromBlobURL.mockClear();
 	} );
 
 	it( 'allows the track image alternative text to be edited', () => {
@@ -166,4 +179,75 @@ describe( 'PlaylistTrackEdit', () => {
 
 		expect( setCurrentTrackClientId ).not.toHaveBeenCalled();
 	} );
+
+	it( 'uploads temporary blob tracks', () => {
+		renderEdit( {
+			attributes: {
+				blob: 'blob:https://example.com/temporary-track',
+				src: undefined,
+			},
+		} );
+
+		expect( useUploadMediaFromBlobURL ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				url: 'blob:https://example.com/temporary-track',
+			} )
+		);
+	} );
+
+	it( 'allows tracks to be added from the track toolbar', () => {
+		const addTracks = jest.fn();
+		renderEdit( { addTracks } );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Add' } ) );
+
+		expect( addTracks ).toHaveBeenCalledWith( {} );
+	} );
+
+	it( 'renders the add track control in a different toolbar group from replace', () => {
+		renderEdit( { addTracks: jest.fn() } );
+
+		expect(
+			within( screen.getByTestId( 'block-controls-other' ) ).getByRole(
+				'button',
+				{ name: 'Replace' }
+			)
+		).toBeInTheDocument();
+		expect(
+			within( screen.getByTestId( 'block-controls-block' ) ).getByRole(
+				'button',
+				{ name: 'Add' }
+			)
+		).toBeInTheDocument();
+	} );
+
+	it( 'preserves the current track source when a replacement upload fails', () => {
+		const { setAttributes } = renderEdit();
+
+		mockMediaReplaceFlowProps.onSelect();
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes.mock.calls[ 0 ][ 0 ] ).not.toHaveProperty(
+			'src'
+		);
+	} );
+
+	it( 'accepts raw uploaded attachment data when replacing a track', () => {
+		const { setAttributes } = renderEdit();
+
+		mockMediaReplaceFlowProps.onSelect( {
+			id: 2,
+			source_url: 'https://example.com/replacement.mp3',
+			title: { raw: 'Replacement &amp; Track' },
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				blob: undefined,
+				id: 2,
+				src: 'https://example.com/replacement.mp3',
+				title: 'Replacement & Track',
+			} )
+		);
+	} );
 } );

package/src/post-content/edit.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	InnerBlocks,
 	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
@@ -77,6 +78,26 @@ function ReadOnlyContent( {
 	);
 }
 
+function EditableContentLoaded( {
+	blockProps,
+	blocks,
+	onInput,
+	onChange,
+	tagName: TagName = 'div',
+} ) {
+	const props = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		// Show a writing prompt for empty content, even when the block
+		// is not selected, so the content area remains discoverable.
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.DefaultBlockAppender,
+	} );
+	return <TagName { ...props } />;
+}
+
 function EditableContent( { context = {}, tagName: TagName = 'div' } ) {
 	const { postType, postId } = context;
 
@@ -86,31 +107,39 @@ function EditableContent( { context = {}, tagName: TagName = 'div' } ) {
 		{ id: postId }
 	);
 
-	const entityRecord = useSelect(
-		( select ) => {
-			return select( coreStore ).getEntityRecord(
+	// Wait for the entity record before mounting the inner blocks area, so
+	// that an empty `blocks` value means an empty post rather than one that
+	// has not loaded yet.
+	const hasLoadedRecord = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord(
 				'postType',
 				postType,
 				postId
-			);
-		},
+			) !== undefined ||
+			select( coreStore ).hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				postType,
+				postId,
+			] ),
 		[ postType, postId ]
 	);
 
-	const hasInnerBlocks = !! entityRecord?.content?.raw || blocks?.length;
+	const blockProps = useBlockProps( { className: 'entry-content' } );
 
-	const initialInnerBlocks = [ [ 'core/paragraph' ] ];
+	if ( ! hasLoadedRecord ) {
+		return <TagName { ...blockProps } />;
+	}
 
-	const props = useInnerBlocksProps(
-		useBlockProps( { className: 'entry-content' } ),
-		{
-			value: blocks,
-			onInput,
-			onChange,
-			template: ! hasInnerBlocks ? initialInnerBlocks : undefined,
-		}
+	return (
+		<EditableContentLoaded
+			blockProps={ blockProps }
+			blocks={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			tagName={ TagName }
+		/>
 	);
-	return <TagName { ...props } />;
 }
 
 function Content( props ) {

package/src/post-excerpt/index.php

@@ -73,8 +73,11 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
 	if ( $show_more_on_new_line && ! empty( $more_text ) ) {
 		$content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
+	} elseif ( empty( $more_text ) ) {
+		$content .= '</p>';
 	} else {
-		$content .= " $more_text</p>";
+		$separator = '' === $excerpt ? '' : ' ';
+		$content  .= $separator . $more_text . '</p>';
 	}
 	remove_filter( 'excerpt_more', $filter_excerpt_more );
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );

package/src/post-featured-image/edit.js

@@ -182,6 +182,7 @@ export default function PostFeaturedImageEdit( {
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 	const blockEditingMode = useBlockEditingMode();
+	const aspectRatioStyle = aspectRatio === 'auto' ? undefined : aspectRatio;
 
 	const placeholder = ( content ) => {
 		return (
@@ -192,7 +193,7 @@ export default function PostFeaturedImageEdit( {
 				) }
 				withIllustration
 				style={ {
-					aspectRatio,
+					aspectRatio: aspectRatioStyle,
 					height: hasDimensionValue( height )
 						? height
 						: hasDimensionValue( width ) && 'auto',
@@ -426,7 +427,7 @@ export default function PostFeaturedImageEdit( {
 	const imageStyles = {
 		...borderProps.style,
 		...shadowProps.style,
-		aspectRatio,
+		aspectRatio: aspectRatioStyle,
 		height: hasDimensionValue( height )
 			? height
 			: hasDimensionValue( width ) && 'auto',

package/src/post-featured-image/index.php

@@ -44,7 +44,10 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$has_height   = array_key_exists( 'height', $attributes ) && null !== $attributes['height'] && '' !== $attributes['height'];
 
 	if ( ! empty( $attributes['aspectRatio'] ) ) {
-		$extra_styles .= esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';';
+		// If there's no non-default value set, let the image's width and height attributes determine its intrinsic aspect ratio.
+		if ( 'auto' !== $attributes['aspectRatio'] ) {
+			$extra_styles .= esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';';
+		}
 		$extra_styles .= 'width:100%;';
 	}
 

package/src/post-terms/edit.js

@@ -133,10 +133,13 @@ export default function PostTermsEdit( {
 							setAttributes( { suffix: value } )
 						}
 						tagName="span"
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
+						__unstableOnSplitAtEnd={
+							insertBlocksAfter
+								? () =>
+										insertBlocksAfter(
+											createBlock( getDefaultBlockName() )
+										)
+								: undefined
 						}
 					/>
 				) }

package/src/post-title/edit.js

@@ -63,9 +63,11 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
-	const onSplitAtEnd = () => {
-		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
-	};
+	const onSplitAtEnd = insertBlocksAfter
+		? () => {
+				insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+		  }
+		: undefined;
 	const blockProps = useBlockProps();
 	const blockEditingMode = useBlockEditingMode();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();

package/src/preformatted/edit.js

@@ -33,8 +33,13 @@ export default function PreformattedEdit( {
 			onMerge={ mergeBlocks }
 			{ ...blockProps }
 			__unstablePastePlainText
-			__unstableOnSplitAtDoubleLineEnd={ () =>
-				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			__unstableOnSplitAtDoubleLineEnd={
+				insertBlocksAfter
+					? () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+					: undefined
 			}
 		/>
 	);

package/src/pullquote/edit.js

@@ -55,10 +55,15 @@ function PullQuoteEdit( props ) {
 								} )
 							}
 							className="wp-block-pullquote__citation"
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
+							__unstableOnSplitAtEnd={
+								insertBlocksAfter
+									? () =>
+											insertBlocksAfter(
+												createBlock(
+													getDefaultBlockName()
+												)
+											)
+									: undefined
 							}
 						/>
 					) }