@wordpress/block-editor 12.2.0 → 12.3.1

package/src/components/link-control/test/is-url-like.js

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import isURLLike from '../is-url-like';
+
+describe( 'isURLLike', () => {
+	it.each( [ 'https://wordpress.org', 'http://wordpress.org' ] )(
+		'returns true for a string that starts with an http(s) protocol',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it.each( [
+		'hello world',
+		'https://   has spaces even though starts with protocol',
+		'www. wordpress . org',
+	] )(
+		'returns false for any string with spaces (e.g. "%s")',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( false );
+		}
+	);
+
+	it( 'returns false for a string without a protocol or a TLD', () => {
+		expect( isURLLike( 'somedirectentryhere' ) ).toBe( false );
+	} );
+
+	it( 'returns true for a string beginning with www.', () => {
+		expect( isURLLike( 'www.wordpress.org' ) ).toBe( true );
+	} );
+
+	it.each( [ 'mailto:test@wordpress.org', 'tel:123456' ] )(
+		'returns true for common protocols',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it( 'returns true for internal anchor ("hash") links.', () => {
+		expect( isURLLike( '#someinternallink' ) ).toBe( true );
+	} );
+
+	// use .each to test multiple cases
+	it.each( [
+		[ true, 'http://example.com' ],
+		[ true, 'https://test.co.uk?query=param' ],
+		[ true, 'ftp://openai.ai?param=value#section' ],
+		[ true, 'example.com' ],
+		[ true, 'http://example.com?query=param#section' ],
+		[ true, 'https://test.co.uk/some/path' ],
+		[ true, 'ftp://openai.ai/some/path' ],
+		[ true, 'example.org/some/path' ],
+		[ true, 'example_test.tld' ],
+		[ true, 'example_test.com' ],
+		[ false, 'example' ],
+		[ false, '.com' ],
+		[ true, '_test.com' ],
+		[ true, 'http://example_test.com' ],
+	] )(
+		'returns %s when testing against string "%s" for a valid TLD',
+		( expected, testString ) => {
+			expect( isURLLike( testString ) ).toBe( expected );
+		}
+	);
+} );

package/src/components/link-control/use-internal-value.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+export default function useInternalValue( value ) {
+	const [ internalValue, setInternalValue ] = useState( value || {} );
+
+	// If the value prop changes, update the internal state.
+	useEffect( () => {
+		setInternalValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
+	}, [ value ] );
+
+	const setInternalURLInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			url: nextValue,
+		} );
+	};
+
+	const setInternalTextInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			title: nextValue,
+		} );
+	};
+
+	const createSetInternalSettingValueHandler =
+		( settingsKeys ) => ( nextValue ) => {
+			// Only apply settings values which are defined in the settings prop.
+			const settingsUpdates = Object.keys( nextValue ).reduce(
+				( acc, key ) => {
+					if ( settingsKeys.includes( key ) ) {
+						acc[ key ] = nextValue[ key ];
+					}
+					return acc;
+				},
+				{}
+			);
+
+			setInternalValue( {
+				...internalValue,
+				...settingsUpdates,
+			} );
+		};
+
+	return [
+		internalValue,
+		setInternalValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	];
+}

package/src/components/link-control/use-search-handler.js

@@ -51,23 +51,16 @@ const handleEntitySearch = async (
 	val,
 	suggestionsQuery,
 	fetchSearchSuggestions,
-	directEntryHandler,
 	withCreateSuggestion,
-	withURLSuggestion,
 	pageOnFront
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
-	let resultsIncludeFrontPage = false;
 
-	let results = await Promise.all( [
-		fetchSearchSuggestions( val, suggestionsQuery ),
-		directEntryHandler( val ),
-	] );
+	const results = await fetchSearchSuggestions( val, suggestionsQuery );
 
 	// Identify front page and update type to match.
-	results[ 0 ] = results[ 0 ].map( ( result ) => {
+	results.map( ( result ) => {
 		if ( Number( result.id ) === pageOnFront ) {
-			resultsIncludeFrontPage = true;
 			result.isFrontPage = true;
 			return result;
 		}
@@ -75,22 +68,6 @@ const handleEntitySearch = async (
 		return result;
 	} );
 
-	const couldBeURL = ! val.includes( ' ' );
-
-	// If it's potentially a URL search then concat on a URL search suggestion
-	// just for good measure. That way once the actual results run out we always
-	// have a URL option to fallback on.
-	if (
-		! resultsIncludeFrontPage &&
-		couldBeURL &&
-		withURLSuggestion &&
-		! isInitialSuggestions
-	) {
-		results = results[ 0 ].concat( results[ 1 ] );
-	} else {
-		results = results[ 0 ];
-	}
-
 	// If displaying initial suggestions just return plain results.
 	if ( isInitialSuggestions ) {
 		return results;
@@ -150,12 +127,18 @@ export default function useSearchHandler(
 						val,
 						{ ...suggestionsQuery, isInitialSuggestions },
 						fetchSearchSuggestions,
-						directEntryHandler,
 						withCreateSuggestion,
 						withURLSuggestion,
 						pageOnFront
 				  );
 		},
-		[ directEntryHandler, fetchSearchSuggestions, withCreateSuggestion ]
+		[
+			directEntryHandler,
+			fetchSearchSuggestions,
+			pageOnFront,
+			suggestionsQuery,
+			withCreateSuggestion,
+			withURLSuggestion,
+		]
 	);
 }

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

@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useListViewContext } from './context';
 import Inserter from '../inserter';
+import AriaReferencedText from './aria-referenced-text';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
@@ -90,12 +91,9 @@ export const Appender = forwardRef(
 						}
 					} }
 				/>
-				<div
-					className="list-view-appender__description"
-					id={ descriptionId }
-				>
+				<AriaReferencedText id={ descriptionId }>
 					{ description }
-				</div>
+				</AriaReferencedText>
 			</div>
 		);
 	}

package/src/components/list-view/aria-referenced-text.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+/**
+ * A component specifically designed to be used as an element referenced
+ * by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
+ *
+ * @param {Object}                    props          Props.
+ * @param {import('react').ReactNode} props.children
+ */
+export default function AriaReferencedText( { children, ...props } ) {
+	const ref = useRef();
+
+	useEffect( () => {
+		if ( ref.current ) {
+			// This seems like a no-op, but it fixes a bug in Firefox where
+			// it fails to recompute the text when only the text node changes.
+			// @see https://github.com/WordPress/gutenberg/pull/51035
+			ref.current.textContent = ref.current.textContent;
+		}
+	}, [ children ] );
+
+	return (
+		<div hidden { ...props } ref={ ref }>
+			{ children }
+		</div>
+	);
+}

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

@@ -44,10 +44,10 @@ const ListViewBlockContents = forwardRef(
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
 				};
 			},
-			[ clientId ]
+			[]
 		);
 
-		const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
+		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
 			useListViewContext();
 
 		const isBlockMoveTarget =
@@ -67,12 +67,13 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
-				{ renderAdditionalBlockUI &&
-					renderAdditionalBlockUI(
-						block,
-						insertedBlock,
-						setInsertedBlock
-					) }
+				{ AdditionalBlockContent && (
+					<AdditionalBlockContent
+						block={ block }
+						insertedBlock={ insertedBlock }
+						setInsertedBlock={ setInsertedBlock }
+					/>
+				) }
 				<BlockDraggable clientIds={ draggableClientIds }>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

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

@@ -10,10 +10,14 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock } from '@wordpress/icons';
-import { SPACE, ENTER } from '@wordpress/keycodes';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,6 +27,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
@@ -38,6 +43,7 @@ function ListViewBlockSelectButton(
 		isExpanded,
 		ariaLabel,
 		ariaDescribedBy,
+		updateFocusAndSelection,
 	},
 	ref
 ) {
@@ -47,6 +53,24 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
+	const {
+		getSelectedBlockClientIds,
+		getPreviousBlockClientId,
+		getBlockRootClientId,
+		getBlockOrder,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { removeBlocks } = useDispatch( blockEditorStore );
+	const isMatch = useShortcutEventMatch();
+	const isSticky = blockInformation?.positionType === 'sticky';
+
+	const positionLabel = blockInformation?.positionLabel
+		? sprintf(
+				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
+				__( 'Position: %1$s' ),
+				blockInformation.positionLabel
+		  )
+		: '';
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -57,9 +81,54 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
+	/**
+	 * @param {KeyboardEvent} event
+	 */
 	function onKeyDownHandler( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
+		} else if (
+			event.keyCode === BACKSPACE ||
+			event.keyCode === DELETE ||
+			isMatch( 'core/block-editor/remove', event )
+		) {
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const isDeletingSelectedBlocks =
+				selectedBlockClientIds.includes( clientId );
+			const firstBlockClientId = isDeletingSelectedBlocks
+				? selectedBlockClientIds[ 0 ]
+				: clientId;
+			const firstBlockRootClientId =
+				getBlockRootClientId( firstBlockClientId );
+
+			const blocksToDelete = isDeletingSelectedBlocks
+				? selectedBlockClientIds
+				: [ clientId ];
+
+			// Don't update the selection if the blocks cannot be deleted.
+			if ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {
+				return;
+			}
+
+			let blockToFocus =
+				getPreviousBlockClientId( firstBlockClientId ) ??
+				// If the previous block is not found (when the first block is deleted),
+				// fallback to focus the parent block.
+				firstBlockRootClientId;
+
+			removeBlocks( blocksToDelete, false );
+
+			// Update the selection if the original selection has been removed.
+			const shouldUpdateSelection =
+				selectedBlockClientIds.length > 0 &&
+				getSelectedBlockClientIds().length === 0;
+
+			// If there's no previous block nor parent block, focus the first block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
 		}
 	}
 
@@ -108,6 +177,13 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ positionLabel && isSticky && (
+						<Tooltip text={ positionLabel }>
+							<span className="block-editor-list-view-block-select-button__sticky">
+								<Icon icon={ pinSmall } />
+							</span>
+						</Tooltip>
+					) }
 					{ isLocked && (
 						<span className="block-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />

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

@@ -22,6 +22,7 @@ import {
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -39,6 +40,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import { unlock } from '../../lock-unlock';
+import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -125,6 +127,7 @@ function ListViewBlock( {
 		listViewInstanceId,
 		expandedState,
 		setInsertedBlock,
+		treeGridElementRef,
 	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -165,11 +168,38 @@ function ListViewBlock( {
 		[ clientId, selectBlock ]
 	);
 
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
+	const updateFocusAndSelection = useCallback(
+		( focusClientId, shouldSelectBlock ) => {
+			if ( shouldSelectBlock ) {
+				selectBlock( undefined, focusClientId, null, null );
+			}
+
+			const getFocusElement = () => {
+				const row = treeGridElementRef.current?.querySelector(
+					`[role=row][data-block="${ focusClientId }"]`
+				);
+				if ( ! row ) return null;
+				// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+				return focus.focusable.find( row )[ 0 ];
+			};
+
+			let focusElement = getFocusElement();
+			if ( focusElement ) {
+				focusElement.focus();
+			} else {
+				// The element hasn't been painted yet. Defer focusing on the next frame.
+				// This could happen when all blocks have been deleted and the default block
+				// hasn't been added to the editor yet.
+				window.requestAnimationFrame( () => {
+					focusElement = getFocusElement();
+					// Ignore if the element still doesn't exist.
+					if ( focusElement ) {
+						focusElement.focus();
+					}
+				} );
+			}
 		},
-		[ selectBlock ]
+		[ selectBlock, treeGridElementRef ]
 	);
 
 	const toggleExpanded = useCallback(
@@ -266,13 +296,11 @@ function ListViewBlock( {
 							selectedClientIds={ selectedClientIds }
 							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
+							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
+						<AriaReferencedText id={ descriptionId }>
 							{ blockPositionDescription }
-						</div>
+						</AriaReferencedText>
 					</div>
 				) }
 			</TreeGridCell>
@@ -326,10 +354,12 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
 							expand={ expand }
 							expandedState={ expandedState }
 							setInsertedBlock={ setInsertedBlock }
+							__experimentalSelectBlock={
+								updateFocusAndSelection
+							}
 						/>
 					) }
 				</TreeGridCell>

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

@@ -91,6 +91,7 @@ function ListViewBranch( props ) {
 		selectedClientIds,
 		level = 1,
 		path = '',
+		isBranchDragged = false,
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
@@ -167,7 +168,8 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
-				const showBlock = isDragged || blockInView || isSelected;
+				const showBlock =
+					isDragged || blockInView || isSelected || isBranchDragged;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
@@ -176,7 +178,7 @@ function ListViewBranch( props ) {
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
 								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
+								isDragged={ isDragged || isBranchDragged }
 								level={ level }
 								position={ position }
 								rowCount={ rowCount }
@@ -194,7 +196,7 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
+						{ hasNestedBlocks && shouldExpand && (
 							<ListViewBranch
 								parentId={ clientId }
 								blocks={ innerBlocks }
@@ -205,6 +207,7 @@ function ListViewBranch( props ) {
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
+								isBranchDragged={ isDragged || isBranchDragged }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
 								isSyncedBranch={ syncedBranch }