@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/link-control/test/index.js

@@ -537,7 +537,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -555,7 +555,7 @@ describe( 'Manual link entry', () => {
 				await user.keyboard( '[Enter]' );
 
 				submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -578,7 +578,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -597,7 +597,7 @@ describe( 'Manual link entry', () => {
 				await user.click( submitButton );
 
 				submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -608,6 +608,135 @@ describe( 'Manual link entry', () => {
 		);
 	} );
 
+	describe( 'Handling cancellation', () => {
+		it( 'should allow cancellation of the link creation process and reset any entered values', async () => {
+			const user = userEvent.setup();
+			const mockOnRemove = jest.fn();
+			const mockOnCancel = jest.fn();
+
+			render( <LinkControl onRemove={ mockOnRemove } /> );
+
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			expect( cancelButton ).toBeEnabled();
+			expect( cancelButton ).toBeVisible();
+
+			// Simulate adding a link for a term.
+			await user.type( searchInput, 'https://www.wordpress.org' );
+
+			// Attempt to submit the empty search value in the input.
+			await user.click( cancelButton );
+
+			// Verify the consumer can handle the cancellation.
+			expect( mockOnRemove ).toHaveBeenCalled();
+
+			// Ensure optional callback is not called.
+			expect( mockOnCancel ).not.toHaveBeenCalled();
+
+			expect( searchInput ).toHaveValue( '' );
+		} );
+
+		it( 'should allow cancellation of the link editing process and reset any entered values', async () => {
+			const user = userEvent.setup();
+			const initialLink = fauxEntitySuggestions[ 0 ];
+
+			const LinkControlConsumer = () => {
+				const [ link, setLink ] = useState( initialLink );
+
+				return (
+					<LinkControl
+						value={ link }
+						onChange={ ( suggestion ) => {
+							setLink( suggestion );
+						} }
+						hasTextControl
+					/>
+				);
+			};
+
+			render( <LinkControlConsumer /> );
+
+			let linkPreview = screen.getByLabelText( 'Currently selected' );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Click the "Edit" button to trigger into the editing mode.
+			let editButton = screen.queryByRole( 'button', {
+				name: 'Edit',
+			} );
+
+			await user.click( editButton );
+
+			let searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			let textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Make a change to the search input.
+			await user.type( searchInput, 'This URL value was changed!' );
+
+			// Make a change to the text input.
+			await user.type( textInput, 'This text value was changed!' );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			// Cancel the editing process.
+			await user.click( cancelButton );
+
+			linkPreview = screen.getByLabelText( 'Currently selected' );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Re-query the edit button as it's been replaced.
+			editButton = screen.queryByRole( 'button', {
+				name: 'Edit',
+			} );
+
+			await user.click( editButton );
+
+			// Re-query the inputs as they have been replaced.
+			searchInput = screen.getByRole( 'combobox', {
+				name: 'URL',
+			} );
+
+			textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Expect to see the original link values and **not** the changed values.
+			expect( searchInput ).toHaveValue( initialLink.url );
+			expect( textInput ).toHaveValue( initialLink.text );
+		} );
+
+		it( 'should call onCancel callback when cancelling if provided', async () => {
+			const user = userEvent.setup();
+			const mockOnCancel = jest.fn();
+
+			render( <LinkControl onCancel={ mockOnCancel } /> );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			await user.click( cancelButton );
+
+			// Verify the consumer can handle the cancellation.
+			expect( mockOnCancel ).toHaveBeenCalled();
+		} );
+	} );
+
 	describe( 'Alternative link protocols and formats', () => {
 		it.each( [
 			[ 'mailto:example123456@wordpress.org', 'mailto' ],
@@ -1859,7 +1988,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Submit',
+			name: 'Apply',
 		} );
 
 		await user.click( submitButton );

package/src/components/list-view/block.js

@@ -209,7 +209,7 @@ function ListViewBlock( {
 		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-synced': blockInformation.isSynced,
+		'is-synced': blockInformation?.isSynced,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block

package/src/components/list-view/style.scss

@@ -22,8 +22,18 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents {
+		&:hover,
+		&:focus,
+		.block-editor-block-icon {
+			color: var(--wp-block-synced-color);
+		}
+
+		&:focus::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
@@ -74,7 +84,7 @@
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
-	&.is-synced-branch:not(.is-selected) {
+	&.is-synced-branch.is-branch-selected {
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {

package/src/components/list-view/use-list-view-drop-zone.js

@@ -76,7 +76,7 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
  *
- * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
+ * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
 function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;

package/src/components/media-replace-flow/test/index.js

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
-jest.useFakeTimers();
-
 const noop = () => {};
 
 function TestWrapper() {
@@ -57,9 +55,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'renders replace menu', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -81,9 +77,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'displays media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -106,9 +100,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'edits media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -145,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Submit',
+				name: 'Apply',
 			} )
 		);
 

package/src/components/media-upload/index.native.js

@@ -315,10 +315,10 @@ export class MediaUpload extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
+		const { capabilities } = select( blockEditorStore ).getSettings();
 		return {
 			isAudioBlockMediaUploadEnabled:
-				select( blockEditorStore ).getSettings( 'capabilities' )
-					.isAudioBlockMediaUploadEnabled === true,
+				capabilities?.isAudioBlockMediaUploadEnabled === true,
 		};
 	} ),
 ] )( MediaUpload );

package/src/components/off-canvas-editor/README.md

@@ -1,5 +1,5 @@
-# Experimental Off Canvas Editor
+# Off Canvas Editor
 
-The __ExperimentalOffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
+The OffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
 
 It is an experimental component which may end up completely merged into the ListView component via configuration props.

package/src/components/off-canvas-editor/appender.js

@@ -1,98 +1,104 @@
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import Inserter from '../inserter';
-import { LinkUI } from './link-ui';
-import { updateAttributes } from './update-attributes';
-import { useInsertedBlock } from './use-inserted-block';
 
-const BLOCKS_WITH_LINK_UI_SUPPORT = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
+export const Appender = forwardRef(
+	( { nestingLevel, blockCount, ...props }, ref ) => {
+		const [ insertedBlock, setInsertedBlock ] = useState( null );
 
-export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
+		const instanceId = useInstanceId( Appender );
+		const { hideInserter, clientId } = useSelect( ( select ) => {
+			const {
+				getTemplateLock,
+				__unstableGetEditorMode,
+				getSelectedBlockClientId,
+			} = select( blockEditorStore );
 
-	const { hideInserter, clientId } = useSelect( ( select ) => {
-		const {
-			getTemplateLock,
-			__unstableGetEditorMode,
-			getSelectedBlockClientId,
-		} = select( blockEditorStore );
+			const _clientId = getSelectedBlockClientId();
 
-		const _clientId = getSelectedBlockClientId();
+			return {
+				clientId: getSelectedBlockClientId(),
+				hideInserter:
+					!! getTemplateLock( _clientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+			};
+		}, [] );
 
-		return {
-			clientId: getSelectedBlockClientId(),
-			hideInserter:
-				!! getTemplateLock( _clientId ) ||
-				__unstableGetEditorMode() === 'zoom-out',
-		};
-	}, [] );
+		const blockTitle = useBlockDisplayTitle( {
+			clientId,
+			context: 'list-view',
+		} );
 
-	const {
-		insertedBlockAttributes,
-		insertedBlockName,
-		setInsertedBlockAttributes,
-	} = useInsertedBlock( insertedBlockClientId );
+		const insertedBlockTitle = useBlockDisplayTitle( {
+			clientId: insertedBlock?.clientId,
+			context: 'list-view',
+		} );
 
-	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
-		if ( ! _insertedBlock?.clientId ) {
-			return;
-		}
+		useEffect( () => {
+			if ( ! insertedBlockTitle?.length ) {
+				return;
+			}
 
-		setInsertedBlockClientId( _insertedBlock?.clientId );
-	};
+			speak(
+				sprintf(
+					// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
+					__( '%s block inserted' ),
+					insertedBlockTitle
+				),
+				'assertive'
+			);
+		}, [ insertedBlockTitle ] );
 
-	let maybeLinkUI;
+		if ( hideInserter ) {
+			return null;
+		}
 
-	if (
-		insertedBlockClientId &&
-		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
-	) {
-		maybeLinkUI = (
-			<LinkUI
-				clientId={ insertedBlockClientId }
-				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlockClientId( null ) }
-				hasCreateSuggestion={ false }
-				onChange={ ( updatedValue ) => {
-					updateAttributes(
-						updatedValue,
-						setInsertedBlockAttributes,
-						insertedBlockAttributes
-					);
-					setInsertedBlockClientId( null );
-				} }
-			/>
+		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
+		const description = sprintf(
+			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
+			__( 'Append to %1$s block at position %2$d, Level %3$d' ),
+			blockTitle,
+			blockCount + 1,
+			nestingLevel
 		);
-	}
 
-	if ( hideInserter ) {
-		return null;
+		return (
+			<div className="offcanvas-editor-appender">
+				<Inserter
+					ref={ ref }
+					rootClientId={ clientId }
+					position="bottom right"
+					isAppender={ true }
+					selectBlockOnInsert={ false }
+					shouldDirectInsert={ false }
+					__experimentalIsQuick
+					{ ...props }
+					toggleProps={ { 'aria-describedby': descriptionId } }
+					onSelectOrClose={ ( maybeInsertedBlock ) => {
+						if ( maybeInsertedBlock?.clientId ) {
+							setInsertedBlock( maybeInsertedBlock );
+						}
+					} }
+				/>
+				<div
+					className="offcanvas-editor-appender__description"
+					id={ descriptionId }
+				>
+					{ description }
+				</div>
+			</div>
+		);
 	}
-
-	return (
-		<div className="offcanvas-editor__appender">
-			{ maybeLinkUI }
-
-			<Inserter
-				ref={ ref }
-				rootClientId={ clientId }
-				position="bottom right"
-				isAppender={ true }
-				selectBlockOnInsert={ false }
-				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
-				__experimentalIsQuick
-				{ ...props }
-			/>
-		</div>
-	);
-} );
+);

package/src/components/off-canvas-editor/block-contents.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,14 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { updateAttributes } from './update-attributes';
+import { LinkUI } from './link-ui';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -33,19 +41,54 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
+		const [ isLinkUIOpen, setIsLinkUIOpen ] = useState();
+		const {
+			blockMovingClientId,
+			selectedBlockInBlockEditor,
+			lastInsertedBlockClientId,
+		} = useSelect(
 			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
+				const {
+					hasBlockMovingClientId,
+					getSelectedBlockClientId,
+					getLastInsertedBlocksClientIds,
+				} = select( blockEditorStore );
+				const lastInsertedBlocksClientIds =
+					getLastInsertedBlocksClientIds();
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
+					lastInsertedBlockClientId:
+						lastInsertedBlocksClientIds &&
+						lastInsertedBlocksClientIds[ 0 ],
 				};
 			},
 			[ clientId ]
 		);
 
+		const {
+			insertedBlockAttributes,
+			insertedBlockName,
+			setInsertedBlockAttributes,
+		} = useInsertedBlock( lastInsertedBlockClientId );
+
+		const hasExistingLinkValue = insertedBlockAttributes?.id;
+
+		useEffect( () => {
+			if (
+				clientId === lastInsertedBlockClientId &&
+				BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
+				! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
+			) {
+				setIsLinkUIOpen( true );
+			}
+		}, [
+			lastInsertedBlockClientId,
+			clientId,
+			insertedBlockName,
+			hasExistingLinkValue,
+		] );
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +105,44 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
+			<>
+				{ isLinkUIOpen && (
+					<LinkUI
+						clientId={ lastInsertedBlockClientId }
+						link={ insertedBlockAttributes }
+						onClose={ () => setIsLinkUIOpen( false ) }
+						hasCreateSuggestion={ false }
+						onChange={ ( updatedValue ) => {
+							updateAttributes(
+								updatedValue,
+								setInsertedBlockAttributes,
+								insertedBlockAttributes
+							);
+							setIsLinkUIOpen( false );
+						} }
 					/>
 				) }
-			</BlockDraggable>
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );

package/src/components/off-canvas-editor/block-select-button.js

@@ -14,6 +14,7 @@ import {
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,7 +28,7 @@ import { useBlockLock } from '../block-lock';
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		block,
 		onClick,
 		onToggleExpanded,
 		tabIndex,
@@ -38,6 +39,7 @@ function ListViewBlockSelectButton(
 	},
 	ref
 ) {
+	const { clientId } = block;
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = useBlockDisplayTitle( {
 		clientId,
@@ -60,6 +62,14 @@ function ListViewBlockSelectButton(
 		}
 	}
 
+	const editAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Edit %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Edit' );
+
 	return (
 		<>
 			<Button
@@ -77,6 +87,7 @@ function ListViewBlockSelectButton(
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
 				aria-hidden={ true }
+				title={ editAriaLabel }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon