@wordpress/block-library 10.4.0 → 10.5.0

package/src/list/block.json

@@ -37,6 +37,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalBorder": {
 			"color": true,

package/src/math/edit.js

@@ -3,15 +3,10 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	Popover,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
+import { ValidatedTextareaControl } from '@wordpress/ui';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextareaControl } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
@@ -78,14 +73,14 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 						<ValidatedTextareaControl
 							label={ __( 'LaTeX math syntax' ) }
 							hideLabelFromVision
-							value={ latex }
+							value={ latex ?? '' }
 							className="wp-block-math__textarea-control"
 							customValidity={
 								error
 									? { type: 'invalid', message: error }
 									: undefined
 							}
-							onChange={ ( newLatex ) => {
+							onValueChange={ ( newLatex ) => {
 								if ( ! latexToMathML ) {
 									setAttributes( { latex: newLatex } );
 									return;

package/src/media-text/edit.js

@@ -15,7 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import {
 	RangeControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	ToggleControl,
 	ToolbarButton,
 	ExternalLink,
@@ -431,7 +431,7 @@ function MediaTextEdit( {
 					hasValue={ () => !! mediaAlt }
 					onDeselect={ () => setAttributes( { mediaAlt: '' } ) }
 				>
-					<TextareaControl
+					<WCTextareaControl
 						label={ __( 'Alternative text' ) }
 						value={ mediaAlt }
 						onChange={ onMediaAltChange }

package/src/more/README.md

@@ -1,7 +1,7 @@
 # More
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-Content before this block will be shown in the excerpt on your archives page.
+Content before this block is shown in the excerpt on blog and archive pages. Where a theme shows the full content instead, visitors get a “Read more” link to the rest of the post.
 
 - **Name:** `core/more`
 - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)

package/src/more/block.json

@@ -4,7 +4,7 @@
 	"name": "core/more",
 	"title": "More",
 	"category": "design",
-	"description": "Content before this block will be shown in the excerpt on your archives page.",
+	"description": "Content before this block is shown in the excerpt on blog and archive pages. Where a theme shows the full content instead, visitors get a “Read more” link to the rest of the post.",
 	"keywords": [ "read more" ],
 	"textdomain": "default",
 	"attributes": {

package/src/navigation/index.php

@@ -279,8 +279,14 @@ class WP_Navigation_Block_Renderer {
 
 		foreach ( $inner_blocks as $inner_block ) {
 			$inner_block_markup = static::get_markup_for_inner_block( $inner_block );
-			$p                  = new WP_HTML_Tag_Processor( $inner_block_markup );
-			$is_list_item       = $p->next_tag( 'LI' );
+			// Skip hidden blocks (e.g. hidden via block visibility) that render
+			// as an empty string. Without this check, empty markup is mistaken
+			// for a non-list-item and incorrectly closes the open <ul>.
+			if ( '' === $inner_block_markup ) {
+				continue;
+			}
+			$p            = new WP_HTML_Tag_Processor( $inner_block_markup );
+			$is_list_item = $p->next_tag( 'LI' );
 
 			if ( $is_list_item && ! $is_list_open ) {
 				$is_list_open       = true;

package/src/navigation-link/shared/controls.js

@@ -4,7 +4,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	CheckboxControl,
 	TextControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
@@ -265,7 +265,7 @@ export function Controls( {
 				onDeselect={ () => setAttributes( { description: '' } ) }
 				isShownByDefault={ ! isContentOnly }
 			>
-				<TextareaControl
+				<WCTextareaControl
 					label={ __( 'Description' ) }
 					value={ description || '' }
 					onChange={ ( descriptionValue ) => {

package/src/playlist/block.json

@@ -69,7 +69,6 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
-		"__experimentalExposeControlsToChildren": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/playlist/edit.js

@@ -86,7 +86,13 @@ const PlaylistEdit = ( {
 
 	const blockProps = useBlockProps();
 	const waveformPanelId = `${ clientId }-waveform`;
-	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		replaceInnerBlocks,
+		replaceBlocks,
+		insertBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
@@ -164,6 +170,23 @@ const PlaylistEdit = ( {
 		}
 	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
 
+	// Clean up placeholder tracks when reverting back to playlist placeholder state
+	useEffect( () => {
+		if ( validTracks.length > 0 || innerBlockTracks.length === 0 ) {
+			return;
+		}
+
+		// Remove any lingering placeholder track blocks
+		__unstableMarkNextChangeAsNotPersistent();
+		replaceInnerBlocks( clientId, [] );
+	}, [
+		clientId,
+		innerBlockTracks,
+		replaceInnerBlocks,
+		validTracks,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
 	const createTrackBlocks = useCallback(
 		( media ) => {
 			if ( ! media ) {
@@ -248,27 +271,36 @@ const PlaylistEdit = ( {
 				return;
 			}
 
-			const nextBlocks = [ ...validTracks, ...newBlocks ];
 			setCurrentTrackClientId( newBlocks[ 0 ].clientId );
-			replaceInnerBlocks( clientId, nextBlocks );
+			insertBlocks( newBlocks, undefined, clientId, false );
 			selectBlock( newBlocks[ 0 ].clientId );
 		},
 		[
 			clientId,
 			createTrackBlocks,
-			replaceInnerBlocks,
+			insertBlocks,
 			selectBlock,
 			setCurrentTrackClientId,
 			validTracks,
 		]
 	);
 
+	const removeTrack = useCallback(
+		( trackClientId ) => {
+			// Not `removeBlock`: it removes the container along with its
+			// last inner block, so this would take the playlist with it.
+			replaceBlocks( trackClientId, [] );
+		},
+		[ replaceBlocks ]
+	);
+
 	const playlistContext = useMemo(
 		() => ( {
 			currentTrackClientId,
 			setCurrentTrackClientId,
+			removeTrack,
 		} ),
-		[ currentTrackClientId, setCurrentTrackClientId ]
+		[ currentTrackClientId, setCurrentTrackClientId, removeTrack ]
 	);
 
 	// Get current track data by finding the track with matching client ID.
@@ -439,10 +471,20 @@ const PlaylistEdit = ( {
 		);
 	}
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		__experimentalAppenderTagName: 'li',
-		renderAppender: false,
-	} );
+	const { children: innerBlocks, ...trackListProps } = useInnerBlocksProps(
+		{
+			className: clsx( 'wp-block-playlist__tracklist', {
+				'wp-block-playlist__tracklist-is-hidden': ! showTracklist,
+				'wp-block-playlist__tracklist-show-numbers': showNumbers,
+				'wp-block-playlist__tracklist-length-is-hidden':
+					! showTrackLength,
+			} ),
+		},
+		{
+			__experimentalAppenderTagName: 'li',
+			renderAppender: false,
+		}
+	);
 
 	if ( tracks.length === 0 ) {
 		return (
@@ -471,7 +513,7 @@ const PlaylistEdit = ( {
 
 	return (
 		<>
-			<BlockControls group="other" __experimentalShareWithChildBlocks>
+			<BlockControls group="other">
 				<MediaReplaceFlow
 					name={ __( 'Add track' ) }
 					onSelect={ onAddTracks }
@@ -693,18 +735,9 @@ const PlaylistEdit = ( {
 						showPlayButtonArtwork={ showPlayButtonArtwork === true }
 					/>
 				</Disabled>
-				<ol
-					className={ clsx( 'wp-block-playlist__tracklist', {
-						'wp-block-playlist__tracklist-is-hidden':
-							! showTracklist,
-						'wp-block-playlist__tracklist-show-numbers':
-							showNumbers,
-						'wp-block-playlist__tracklist-length-is-hidden':
-							! showTrackLength,
-					} ) }
-				>
+				<ol { ...trackListProps }>
 					<PlaylistContext.Provider value={ playlistContext }>
-						{ innerBlocksProps.children }
+						{ innerBlocks }
 					</PlaylistContext.Provider>
 				</ol>
 				<Caption

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

@@ -4,6 +4,9 @@ import PlaylistEdit from '../edit';
 
 let mediaPlaceholderProps;
 let mediaReplaceFlowProps;
+// The tracks the playlist holds. The inner blocks mock renders these, so a
+// test can look at what ended up in the tracklist.
+let mockTracks = [];
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	store: {},
@@ -33,7 +36,11 @@ jest.mock( '@wordpress/block-editor', () => ( {
 	useBlockProps: () => ( { className: 'wp-block-playlist' } ),
 	useInnerBlocksProps: ( blockProps ) => ( {
 		...blockProps,
-		children: <li data-testid="playlist-track" />,
+		children: mockTracks.map( ( track ) => (
+			<li key={ track.clientId } data-testid="playlist-track">
+				{ track.attributes.title }
+			</li>
+		) ),
 	} ),
 	__experimentalColorGradientSettingsDropdown: () => <div />,
 	__experimentalUseMultipleOriginColorsAndGradients: () => ( {
@@ -106,36 +113,58 @@ const defaultAttributes = {
 
 describe( 'PlaylistEdit', () => {
 	let replaceInnerBlocks;
+	let insertBlocks;
 	let selectBlock;
 
+	// The playlist reads its tracks from the store and changes them through
+	// dispatched actions. Keeping a list here lets a test assert which tracks
+	// the playlist ends up with, rather than which action it reached for.
+	const trackStore = ( initial ) => {
+		mockTracks = initial;
+		useSelect.mockImplementation( () => ( {
+			innerBlockTracks: mockTracks,
+		} ) );
+		insertBlocks.mockImplementation( ( blocks, index ) => {
+			const at = index ?? mockTracks.length;
+			mockTracks = [
+				...mockTracks.slice( 0, at ),
+				...blocks,
+				...mockTracks.slice( at ),
+			];
+		} );
+		replaceInnerBlocks.mockImplementation( ( _clientId, next ) => {
+			mockTracks = next;
+		} );
+	};
+	const trackClientIds = () => mockTracks.map( ( track ) => track.clientId );
+
 	beforeEach( () => {
 		mediaPlaceholderProps = undefined;
 		mediaReplaceFlowProps = undefined;
 		replaceInnerBlocks = jest.fn();
+		insertBlocks = jest.fn();
 		selectBlock = jest.fn();
 		useDispatch.mockReturnValue( {
 			createErrorNotice: jest.fn(),
 			replaceInnerBlocks,
+			insertBlocks,
 			selectBlock,
+			__unstableMarkNextChangeAsNotPersistent: jest.fn(),
 		} );
-		useSelect.mockReturnValue( {
-			innerBlockTracks: [
-				{
-					clientId: 'track-1',
-					attributes: {
-						id: 1,
-						src: 'https://example.com/audio.mp3',
-						title: 'Sample track',
-					},
+		trackStore( [
+			{
+				clientId: 'track-1',
+				attributes: {
+					id: 1,
+					src: 'https://example.com/audio.mp3',
+					title: 'Sample track',
 				},
-			],
-		} );
+			},
+		] );
 	} );
 
 	it( 'lets users select audio tracks individually from the Media Library', () => {
-		useSelect.mockReturnValue( {
-			innerBlockTracks: [],
-		} );
+		trackStore( [] );
 
 		render(
 			<PlaylistEdit
@@ -186,6 +215,39 @@ describe( 'PlaylistEdit', () => {
 		expect( screen.getByTestId( 'playlist-track' ) ).toBeInTheDocument();
 	} );
 
+	it( 'preserves placeholder tracks when adding tracks', () => {
+		trackStore( [
+			{
+				clientId: 'track-1',
+				attributes: {
+					id: 1,
+					src: 'https://example.com/audio.mp3',
+					title: 'Sample track',
+				},
+			},
+			// A track the user added but has not filled in yet.
+			{ clientId: 'placeholder-track', attributes: {} },
+		] );
+
+		render(
+			<PlaylistEdit
+				attributes={ defaultAttributes }
+				clientId="playlist-1"
+				insertBlocksAfter={ jest.fn() }
+				isSelected={ false }
+				setAttributes={ jest.fn() }
+			/>
+		);
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Add track' } ) );
+
+		expect( trackClientIds() ).toEqual( [
+			'track-1',
+			'placeholder-track',
+			'new-track',
+		] );
+	} );
+
 	it( 'adds tracks from the add track control', () => {
 		render(
 			<PlaylistEdit
@@ -203,18 +265,7 @@ describe( 'PlaylistEdit', () => {
 			} )
 		);
 
-		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'playlist-1', [
-			expect.objectContaining( { clientId: 'track-1' } ),
-			expect.objectContaining( {
-				clientId: 'new-track',
-				name: 'core/playlist-track',
-				attributes: expect.objectContaining( {
-					id: 2,
-					src: 'https://example.com/second-track.mp3',
-					title: 'Second track',
-				} ),
-			} ),
-		] );
+		expect( trackClientIds() ).toEqual( [ 'track-1', 'new-track' ] );
 		expect( selectBlock ).toHaveBeenCalledWith( 'new-track' );
 	} );
 } );

package/src/playlist-track/README.md

@@ -21,15 +21,15 @@ _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 |
 |-----------|------|---------|-------------|
 | `blob` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
-| `id` | `number` | — | — |
-| `src` | `string` | — | — |
+| `id` | `number` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `src` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 | `type` | `string` | `"audio"` | — |
-| `album` | `string` | — | — |
-| `artist` | `string` | — | — |
-| `image` | `string` | — | — |
-| `imageAlt` | `string` | — | — |
-| `length` | `string` | — | — |
-| `title` | `string` | — | — |
+| `album` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `artist` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `image` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `imageAlt` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `length` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `title` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 
 ## Supports
 

package/src/playlist-track/block.json

@@ -15,32 +15,40 @@
 			"role": "local"
 		},
 		"id": {
-			"type": "number"
+			"type": "number",
+			"role": "content"
 		},
 		"src": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
 			"default": "audio"
 		},
 		"album": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"artist": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"image": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"imageAlt": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"length": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"title": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		}
 	},
 	"supports": {

package/src/playlist-track/edit.js

@@ -15,7 +15,7 @@ import {
 	Button,
 	PanelBody,
 	TextControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	BaseControl,
 	Spinner,
 } from '@wordpress/components';
@@ -46,11 +46,27 @@ const PlaylistTrackEdit = ( {
 	const showImages = context?.showImages ?? true;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
-	const { currentTrackClientId, setCurrentTrackClientId } =
+	const { currentTrackClientId, setCurrentTrackClientId, removeTrack } =
 		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	function onUploadError( message ) {
+
+	/**
+	 * Handle audio upload errors.
+	 *
+	 * @param {string}  message                      Error message to show.
+	 * @param {Object}  [options]
+	 * @param {boolean} [options.removeTrackOnError] Remove the track as well. Useful for drag/drop where a track is optimistically created before upload finishes.
+	 */
+	function onUploadError( message, { removeTrackOnError = false } = {} ) {
 		createErrorNotice( message, { type: 'snackbar' } );
+
+		if ( removeTrackOnError ) {
+			removeTrack( clientId );
+			return;
+		}
+
+		// Set temporaryURL back to default state
+		setTemporaryURL();
 	}
 	const hasTrackSource = !! src || !! temporaryURL;
 
@@ -70,11 +86,14 @@ const PlaylistTrackEdit = ( {
 		setCurrentTrackClientId,
 	] );
 
+	// Handles drag/drop uploads
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectTrack,
-		onError: onUploadError,
+		onError: ( message ) => {
+			onUploadError( message, { removeTrackOnError: true } );
+		},
 	} );
 
 	function onSelectTrack( media ) {
@@ -144,20 +163,33 @@ const PlaylistTrackEdit = ( {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					name={ __( 'Replace' ) }
-					onSelect={ onSelectTrack }
-					accept="audio/*"
-					mediaId={ id }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onError={ onUploadError }
-					variant="toolbar"
-				/>
-			</BlockControls>
+			{ /* Only show if this is a single selection (not multiselect) */ }
+			{ isSelected && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						name={ __( 'Replace' ) }
+						onSelect={ onSelectTrack }
+						accept="audio/*"
+						mediaId={ id }
+						mediaURL={ src }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onError={ onUploadError }
+						variant="toolbar"
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
+					{ /* Only show if this is a single selection (not multiselect) */ }
+					{ isSelected && (
+						<TextControl
+							label={ __( 'Title' ) }
+							value={ title ? stripHTML( title ) : '' }
+							onChange={ ( titleValue ) => {
+								setAttributes( { title: titleValue } );
+							} }
+						/>
+					) }
 					<TextControl
 						label={ __( 'Artist' ) }
 						value={ artist ? stripHTML( artist ) : '' }
@@ -172,13 +204,6 @@ const PlaylistTrackEdit = ( {
 							setAttributes( { album: albumValue } );
 						} }
 					/>
-					<TextControl
-						label={ __( 'Title' ) }
-						value={ title ? stripHTML( title ) : '' }
-						onChange={ ( titleValue ) => {
-							setAttributes( { title: titleValue } );
-						} }
-					/>
 					<MediaUploadCheck>
 						<BaseControl>
 							<BaseControl.VisualLabel>
@@ -225,7 +250,7 @@ const PlaylistTrackEdit = ( {
 						</BaseControl>
 					</MediaUploadCheck>
 					{ !! image && (
-						<TextareaControl
+						<WCTextareaControl
 							label={ __( 'Alternative text' ) }
 							value={ imageAlt || '' }
 							onChange={ ( value ) =>
@@ -251,7 +276,6 @@ const PlaylistTrackEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
 					onClick={ () => setCurrentTrackClientId( clientId ) }
@@ -271,7 +295,8 @@ const PlaylistTrackEdit = ( {
 							tagName="span"
 							className="wp-block-playlist-track__title"
 							value={ title }
-							placeholder={ __( 'Add title' ) }
+							aria-label={ __( 'Track title' ) }
+							placeholder={ __( 'Track title' ) }
 							onChange={ ( value ) => {
 								setAttributes( { title: value } );
 							} }
@@ -282,7 +307,8 @@ const PlaylistTrackEdit = ( {
 								tagName="span"
 								className="wp-block-playlist-track__artist"
 								value={ artist }
-								placeholder={ __( 'Add artist' ) }
+								aria-label={ __( 'Track artist' ) }
+								placeholder={ __( 'Track artist' ) }
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )
 								}
@@ -300,6 +326,9 @@ const PlaylistTrackEdit = ( {
 							</span>
 						) }
 						{ length }
+						{ !! temporaryURL && (
+							<Spinner className="wp-block-playlist-track__spinner" />
+						) }
 					</span>
 					<span className="screen-reader-text">{ __( 'Play' ) }</span>
 				</button>