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

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

@@ -0,0 +1,253 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PlaylistTrackEdit from '../edit';
+import { PlaylistContext } from '../../playlist/context';
+import { useUploadMediaFromBlobURL } from '../../utils/hooks';
+
+let mockMediaReplaceFlowProps;
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	BlockControls: ( { children, group = 'default' } ) => (
+		<div data-testid={ `block-controls-${ group }` }>{ children }</div>
+	),
+	BlockIcon: () => <span />,
+	InspectorControls: ( { children } ) => <div>{ children }</div>,
+	MediaPlaceholder: () => <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>,
+	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();
+	const addTracks = props.addTracks;
+
+	render(
+		<PlaylistContext.Provider
+			value={ {
+				currentTrackClientId: props.currentTrackClientId ?? null,
+				setCurrentTrackClientId,
+				addTracks,
+			} }
+		>
+			<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( () => {
+		mockMediaReplaceFlowProps = undefined;
+		useDispatch.mockReturnValue( {
+			createErrorNotice: jest.fn(),
+		} );
+		useUploadMediaFromBlobURL.mockClear();
+	} );
+
+	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();
+	} );
+
+	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/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-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-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/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/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/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
 							}
 						/>
 					) }

package/src/pullquote/editor.scss

@@ -15,3 +15,9 @@
 .wp-block-pullquote__citation {
 	color: inherit;
 }
+
+// Ensure custom line-height values applied to the block are inherited by the
+// paragraph instead of being overridden by the default editor styles.
+.wp-block-pullquote[style*="line-height"] :where(p) {
+	line-height: inherit;
+}

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",