@wordpress/block-editor 11.3.6 → 11.5.0

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

@@ -174,6 +174,11 @@ function ListView(
 		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
 	);
 
+	// If there are no blocks to show, do not render the list view.
+	if ( ! clientIdsTree.length ) {
+		return null;
+	}
+
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator

package/src/components/media-replace-flow/style.scss

@@ -23,24 +23,22 @@
 	}
 
 	.block-editor-link-control {
-		width: 220px; // Hardcoded width avoids resizing of control when switching between preview/edit.
+		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
 			margin: 0; // Reset default LinkControl margins.
 		}
 
-		.components-base-control .components-base-control__field {
-			margin-bottom: 0;
-		}
-
-		.block-editor-link-control__search-item-title {
-			max-width: 180px;
+		.block-editor-link-control__search-item-title,
+		.block-editor-link-control__search-item-info {
+			max-width: 200px;
 			white-space: nowrap;
 		}
 
-		.block-editor-link-control__search-item-info {
-			white-space: nowrap;
+		.block-editor-link-control__tools {
+			justify-content: flex-end;
+			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 		}
 
 		.block-editor-link-control__search-item.is-current {

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

@@ -137,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Submit',
+				name: 'Apply',
 			} )
 		);
 

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

@@ -15,26 +15,23 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import Inserter from '../inserter';
 
 export const Appender = forwardRef(
-	( { nestingLevel, blockCount, ...props }, ref ) => {
+	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
 		const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 		const instanceId = useInstanceId( Appender );
-		const { hideInserter, clientId } = useSelect( ( select ) => {
-			const {
-				getTemplateLock,
-				__unstableGetEditorMode,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+		const { hideInserter } = useSelect(
+			( select ) => {
+				const { getTemplateLock, __unstableGetEditorMode } =
+					select( blockEditorStore );
 
-			const _clientId = getSelectedBlockClientId();
-
-			return {
-				clientId: getSelectedBlockClientId(),
-				hideInserter:
-					!! getTemplateLock( _clientId ) ||
-					__unstableGetEditorMode() === 'zoom-out',
-			};
-		}, [] );
+				return {
+					hideInserter:
+						!! getTemplateLock( clientId ) ||
+						__unstableGetEditorMode() === 'zoom-out',
+				};
+			},
+			[ clientId ]
+		);
 
 		const blockTitle = useBlockDisplayTitle( {
 			clientId,

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

@@ -73,7 +73,7 @@ const ListViewBlockContents = forwardRef(
 			setInsertedBlockAttributes,
 		} = useInsertedBlock( lastInsertedBlockClientId );
 
-		const hasExistingLinkValue = insertedBlockAttributes?.id;
+		const hasExistingLinkValue = insertedBlockAttributes?.url;
 
 		useEffect( () => {
 			if (
@@ -121,6 +121,7 @@ const ListViewBlockContents = forwardRef(
 							);
 							setIsLinkUIOpen( false );
 						} }
+						onCancel={ () => setIsLinkUIOpen( false ) }
 					/>
 				) }
 				<BlockDraggable clientIds={ draggableClientIds }>

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

@@ -220,6 +220,7 @@ function ListViewBranch( props ) {
 					<TreeGridCell>
 						{ ( treeGridCellProps ) => (
 							<Appender
+								clientId={ parentId }
 								nestingLevel={ level }
 								blockCount={ blockCount }
 								{ ...treeGridCellProps }

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

@@ -80,9 +80,10 @@ function OffCanvasEditor(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
+	const { visibleBlockCount, shouldShowInnerBlocks, parentId } = useSelect(
 		( select ) => {
 			const {
+				getBlockRootClientId,
 				getGlobalBlockCount,
 				getClientIdsOfDescendants,
 				__unstableGetEditorMode,
@@ -94,9 +95,13 @@ function OffCanvasEditor(
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
 				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
+				parentId:
+					blocks.length > 0
+						? getBlockRootClientId( blocks[ 0 ].clientId )
+						: undefined,
 			};
 		},
-		[ draggedClientIds ]
+		[ draggedClientIds, blocks ]
 	);
 
 	const { updateBlockSelection } = useBlockSelection();
@@ -227,6 +232,7 @@ function OffCanvasEditor(
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
+							parentId={ parentId }
 							blocks={ clientIdsTree }
 							selectBlock={ selectEditorBlock }
 							showBlockMovers={ showBlockMovers }

package/src/components/off-canvas-editor/leaf-more-menu.js

@@ -2,9 +2,14 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
-import { addSubmenu, moreVertical } from '@wordpress/icons';
+import {
+	addSubmenu,
+	chevronUp,
+	chevronDown,
+	moreVertical,
+} from '@wordpress/icons';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -85,14 +90,24 @@ function AddSubmenuItem( { block, onClose } ) {
 export default function LeafMoreMenu( props ) {
 	const { clientId, block } = props;
 
-	const { removeBlocks } = useDispatch( blockEditorStore );
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
 
-	const label = sprintf(
+	const removeLabel = sprintf(
 		/* translators: %s: block name */
 		__( 'Remove %s' ),
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -103,17 +118,39 @@ export default function LeafMoreMenu( props ) {
 			{ ...props }
 		>
 			{ ( { onClose } ) => (
-				<MenuGroup>
-					<AddSubmenuItem block={ block } onClose={ onClose } />
-					<MenuItem
-						onClick={ () => {
-							removeBlocks( [ clientId ], false );
-							onClose();
-						} }
-					>
-						{ label }
-					</MenuItem>
-				</MenuGroup>
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						<AddSubmenuItem block={ block } onClose={ onClose } />
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
 			) }
 		</DropdownMenu>
 	);

package/src/components/off-canvas-editor/link-ui.js

@@ -137,6 +137,7 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
+			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl
@@ -151,6 +152,7 @@ export function LinkUI( props ) {
 				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
+				onCancel={ props.onCancel }
 				renderControlBottom={
 					! url
 						? () => (

package/src/components/responsive-block-control/index.js

@@ -92,6 +92,7 @@ function ResponsiveBlockControl( props ) {
 
 			<div className="block-editor-responsive-block-control__inner">
 				<ToggleControl
+					__nextHasNoMarginBottom
 					className="block-editor-responsive-block-control__toggle"
 					label={ toggleControlLabel }
 					checked={ ! isResponsive }

package/src/components/rich-text/index.js

@@ -19,12 +19,9 @@ import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
 	__unstableCreateElement,
-	isEmpty,
-	isCollapsed,
 	removeFormat,
 } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { Popover } from '@wordpress/components';
 
 /**
@@ -39,6 +36,7 @@ import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useBeforeInputRules } from './use-before-input-rules';
 import { useInputRules } from './use-input-rules';
+import { useDelete } from './use-delete';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
@@ -110,7 +108,6 @@ function RichTextWrapper(
 		__unstableEmbedURLOnPaste,
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
-		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		...props
 	},
@@ -281,6 +278,7 @@ function RichTextWrapper(
 
 	const {
 		value,
+		getValue,
 		onChange,
 		ref: richTextRef,
 	} = useRichText( {
@@ -316,45 +314,6 @@ function RichTextWrapper(
 	const keyboardShortcuts = useRef( new Set() );
 	const inputEvents = useRef( new Set() );
 
-	function onKeyDown( event ) {
-		const { keyCode } = event;
-
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
-			const { start, end, text } = value;
-			const isReverse = keyCode === BACKSPACE;
-			const hasActiveFormats =
-				value.activeFormats && !! value.activeFormats.length;
-
-			// Only process delete if the key press occurs at an uncollapsed edge.
-			if (
-				! isCollapsed( value ) ||
-				hasActiveFormats ||
-				( isReverse && start !== 0 ) ||
-				( ! isReverse && end !== text.length )
-			) {
-				return;
-			}
-
-			if ( onMerge ) {
-				onMerge( ! isReverse );
-			}
-
-			// Only handle remove on Backspace. This serves dual-purpose of being
-			// an intentional user interaction distinguishing between Backspace and
-			// Delete to remove the empty field, but also to avoid merge & remove
-			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
-				onRemove( ! isReverse );
-			}
-
-			event.preventDefault();
-		}
-	}
-
 	function onFocus() {
 		anchorRef.current?.focus();
 	}
@@ -401,7 +360,7 @@ function RichTextWrapper(
 					richTextRef,
 					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
-						value,
+						getValue,
 						onChange,
 						__unstableAllowPrefixTransformations,
 						formatTypes,
@@ -428,6 +387,11 @@ function RichTextWrapper(
 						preserveWhiteSpace,
 						pastePlainText,
 					} ),
+					useDelete( {
+						value,
+						onMerge,
+						onRemove,
+					} ),
 					useEnter( {
 						removeEditorOnlyFormats,
 						value,
@@ -449,8 +413,6 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
-				onFocus={ unstableOnFocus }
-				onKeyDown={ onKeyDown }
 			/>
 		</>
 	);

package/src/components/rich-text/use-delete.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { isCollapsed, isEmpty } from '@wordpress/rich-text';
+
+export function useDelete( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			const { keyCode } = event;
+
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			const { value, onMerge, onRemove } = propsRef.current;
+
+			if ( keyCode === DELETE || keyCode === BACKSPACE ) {
+				const { start, end, text } = value;
+				const isReverse = keyCode === BACKSPACE;
+				const hasActiveFormats =
+					value.activeFormats && !! value.activeFormats.length;
+
+				// Only process delete if the key press occurs at an uncollapsed edge.
+				if (
+					! isCollapsed( value ) ||
+					hasActiveFormats ||
+					( isReverse && start !== 0 ) ||
+					( ! isReverse && end !== text.length )
+				) {
+					return;
+				}
+
+				if ( onMerge ) {
+					onMerge( ! isReverse );
+				}
+
+				// Only handle remove on Backspace. This serves dual-purpose of being
+				// an intentional user interaction distinguishing between Backspace and
+				// Delete to remove the empty field, but also to avoid merge & remove
+				// causing destruction of two fields (merge, then removed merged).
+				if ( onRemove && isEmpty( value ) && isReverse ) {
+					onRemove( ! isReverse );
+				}
+
+				event.preventDefault();
+			}
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-input-rules.js

@@ -29,7 +29,7 @@ function findSelection( blocks ) {
 			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
 				attributeKey
 			].replace( START_OF_SELECTED_AREA, '' );
-			return blocks[ i ].clientId;
+			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
 		}
 
 		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
@@ -38,6 +38,8 @@ function findSelection( blocks ) {
 			return nestedSelection;
 		}
 	}
+
+	return [];
 }
 
 export function useInputRules( props ) {
@@ -49,12 +51,15 @@ export function useInputRules( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function inputRule() {
-			const { value, onReplace, selectionChange } = propsRef.current;
+			const { getValue, onReplace, selectionChange } = propsRef.current;
 
 			if ( ! onReplace ) {
 				return;
 			}
 
+			// We must use getValue() here because value may be update
+			// asynchronously.
+			const value = getValue();
 			const { start, text } = value;
 			const characterBefore = text.slice( start - 1, start );
 
@@ -83,15 +88,17 @@ export function useInputRules( props ) {
 			} );
 			const block = transformation.transform( content );
 
-			selectionChange( findSelection( [ block ] ) );
+			selectionChange( ...findSelection( [ block ] ) );
 			onReplace( [ block ] );
 			__unstableMarkAutomaticChange();
+
+			return true;
 		}
 
 		function onInput( event ) {
 			const { inputType, type } = event;
 			const {
-				value,
+				getValue,
 				onChange,
 				__unstableAllowPrefixTransformations,
 				formatTypes,
@@ -103,9 +110,10 @@ export function useInputRules( props ) {
 			}
 
 			if ( __unstableAllowPrefixTransformations && inputRule ) {
-				inputRule();
+				if ( inputRule() ) return;
 			}
 
+			const value = getValue();
 			const transformed = formatTypes.reduce(
 				( accumlator, { __unstableInputRule } ) => {
 					if ( __unstableInputRule ) {

package/src/components/url-input/index.js

@@ -468,7 +468,7 @@ class URLInput extends Component {
 			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
-			'aria-controls': suggestionsListboxId,
+			'aria-owns': suggestionsListboxId,
 			'aria-activedescendant':
 				selectedSuggestion !== null
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
@@ -531,7 +531,8 @@ class URLInput extends Component {
 				tabIndex: '-1',
 				id: `${ suggestionOptionIdPrefix }-${ index }`,
 				ref: this.bindSuggestionNode( index ),
-				'aria-selected': index === selectedSuggestion,
+				'aria-selected':
+					index === selectedSuggestion ? true : undefined,
 			};
 		};
 

package/src/components/url-popover/stories/index.js

@@ -28,6 +28,7 @@ const TestURLPopover = () => {
 					onClose={ close }
 					renderSettings={ () => (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ setTarget }
 						/>

package/src/components/writing-flow/use-selection-observer.js

@@ -72,7 +72,11 @@ function findDepth( a, b ) {
  * @param {boolean}     value `contentEditable` value (true or false)
  */
 function setContentEditableWrapper( node, value ) {
-	node.contentEditable = value;
+	// Since we are calling this on every selection change, check if the value
+	// needs to be updated first because it trigger the browser to recalculate
+	// style.
+	if ( node.contentEditable !== String( value ) )
+		node.contentEditable = value;
 	// Firefox doesn't automatically move focus.
 	if ( value ) node.focus();
 }

package/src/hooks/align.js

@@ -119,7 +119,7 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const blockEdit = <BlockEdit { ...props } />;
+		const blockEdit = <BlockEdit key="edit" { ...props } />;
 		const { name: blockName } = props;
 		// Compute the block valid alignments by taking into account,
 		// if the theme supports wide alignments or not and the layout's