@wordpress/block-editor 11.4.0 → 11.5.0

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

@@ -8,6 +8,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,33 +18,45 @@ import useMovingAnimation from '../use-moving-animation';
 
 const AnimatedTreeGridRow = animated( TreeGridRow );
 
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
+const ListViewLeaf = forwardRef(
+	(
+		{
+			isSelected,
+			position,
+			level,
+			rowCount,
+			children,
+			className,
+			path,
+			...props
+		},
+		ref
+	) => {
+		const animationRef = useMovingAnimation( {
+			isSelected,
+			adjustScrolling: false,
+			enableAnimation: true,
+			triggerAnimationOnChange: path,
+		} );
 
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames( 'block-editor-list-view-leaf', className ) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}
+		const mergedRef = useMergeRefs( [ ref, animationRef ] );
+
+		return (
+			<AnimatedTreeGridRow
+				ref={ mergedRef }
+				className={ classnames(
+					'block-editor-list-view-leaf',
+					className
+				) }
+				level={ level }
+				positionInSet={ position }
+				setSize={ rowCount }
+				{ ...props }
+			>
+				{ children }
+			</AnimatedTreeGridRow>
+		);
+	}
+);
+
+export default ListViewLeaf;

package/src/components/list-view/use-list-view-scroll-into-view.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { getScrollContainer } from '@wordpress/dom';
+import { useLayoutEffect } from '@wordpress/element';
+
+export default function useListViewScrollIntoView( {
+	isSelected,
+	selectedClientIds,
+	rowItemRef,
+} ) {
+	const isSingleSelection = selectedClientIds.length === 1;
+
+	useLayoutEffect( () => {
+		// Skip scrolling into view if this particular block isn't selected,
+		// or if more than one block is selected overall. This is to avoid
+		// scrolling the view in a multi selection where the user has intentionally
+		// selected multiple blocks within the list view, but the initially
+		// selected block may be out of view.
+		if ( ! isSelected || ! isSingleSelection || ! rowItemRef.current ) {
+			return;
+		}
+
+		const scrollContainer = getScrollContainer( rowItemRef.current );
+		const { ownerDocument } = rowItemRef.current;
+
+		const windowScroll =
+			scrollContainer === ownerDocument.body ||
+			scrollContainer === ownerDocument.documentElement;
+
+		// If the there is no scroll container, of if the scroll container is the window,
+		// do not scroll into view, as the block is already in view.
+		if ( windowScroll || ! scrollContainer ) {
+			return;
+		}
+
+		const rowRect = rowItemRef.current.getBoundingClientRect();
+		const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+		// If the selected block is not currently visible, scroll to it.
+		if (
+			rowRect.top < scrollContainerRect.top ||
+			rowRect.bottom > scrollContainerRect.bottom
+		) {
+			rowItemRef.current.scrollIntoView();
+		}
+	}, [ isSelected, isSingleSelection, rowItemRef ] );
+}

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/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/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';
 
 /**
@@ -12,6 +17,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import BlockTitle from '../block-title';
+import { useListViewContext } from './context';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -25,6 +31,7 @@ const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
 ];
 
 function AddSubmenuItem( { block, onClose } ) {
+	const { expandedState, expand } = useListViewContext();
 	const { insertBlock, replaceBlock, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
 
@@ -69,6 +76,9 @@ function AddSubmenuItem( { block, onClose } ) {
 						updateSelectionOnInsert
 					);
 				}
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
 				onClose();
 			} }
 		>
@@ -80,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 }
@@ -98,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

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';
@@ -280,6 +278,7 @@ function RichTextWrapper(
 
 	const {
 		value,
+		getValue,
 		onChange,
 		ref: richTextRef,
 	} = useRichText( {
@@ -315,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();
 	}
@@ -400,7 +360,7 @@ function RichTextWrapper(
 					richTextRef,
 					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
-						value,
+						getValue,
 						onChange,
 						__unstableAllowPrefixTransformations,
 						formatTypes,
@@ -427,6 +387,11 @@ function RichTextWrapper(
 						preserveWhiteSpace,
 						pastePlainText,
 					} ),
+					useDelete( {
+						value,
+						onMerge,
+						onRemove,
+					} ),
 					useEnter( {
 						removeEditorOnlyFormats,
 						value,
@@ -448,7 +413,6 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
-				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/spacing-sizes-control/style.scss

@@ -126,7 +126,7 @@
 		}
 	}
 
-	[class*="ThumbWrapper-thumbColor"] {
+	.components-range-control__thumb-wrapper {
 		z-index: 3;
 	}
 

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