@wordpress/block-editor 11.4.0 → 11.6.0

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

@@ -56,20 +56,24 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}  props                 Components props.
  * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {string}  props.parentClientId  The client id of the parent block.
  * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
  * @param {string}  props.description     Optional accessible description for the tree grid component.
  * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {string}  props.showAppender    Flag to show or hide the block appender.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
 	{
 		id,
+		parentClientId,
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
+		showAppender = true,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
@@ -96,7 +100,7 @@ function OffCanvasEditor(
 				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
 			};
 		},
-		[ draggedClientIds ]
+		[ draggedClientIds, blocks ]
 	);
 
 	const { updateBlockSelection } = useBlockSelection();
@@ -227,6 +231,7 @@ function OffCanvasEditor(
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
+							parentId={ parentClientId }
 							blocks={ clientIdsTree }
 							selectBlock={ selectEditorBlock }
 							showBlockMovers={ showBlockMovers }
@@ -234,6 +239,7 @@ function OffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							showAppender={ showAppender }
 						/>
 						<TreeGridRow
 							level={ 1 }

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/provider/use-block-sync.js

@@ -76,10 +76,18 @@ export default function useBlockSync( {
 		resetBlocks,
 		resetSelection,
 		replaceInnerBlocks,
+		selectBlock,
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
-	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const {
+		hasSelectedBlock,
+		getBlockName,
+		getBlocks,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlock,
+	} = registry.select( blockEditorStore );
 	const isControlled = useSelect(
 		( select ) => {
 			return (
@@ -159,6 +167,9 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
+			const hadSelecton = hasSelectedBlock();
+			const selectionAnchor = getSelectionStart();
+			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -167,6 +178,15 @@ export default function useBlockSync( {
 					controlledSelection.selectionEnd,
 					controlledSelection.initialPosition
 				);
+			} else {
+				const selectionStillExists = getBlock(
+					selectionAnchor.clientId
+				);
+				if ( hadSelecton && ! selectionStillExists ) {
+					selectBlock( clientId );
+				} else {
+					resetSelection( selectionAnchor, selectionFocus );
+				}
 			}
 		}
 	}, [ controlledBlocks, clientId ] );
@@ -182,8 +202,6 @@ export default function useBlockSync( {
 
 	useEffect( () => {
 		const {
-			getSelectionStart,
-			getSelectionEnd,
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
@@ -220,7 +238,6 @@ export default function useBlockSync( {
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
-
 			if (
 				areBlocksDifferent &&
 				( pendingChanges.current.incoming ||

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/format-toolbar-container.js

@@ -19,11 +19,7 @@ import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function InlineSelectionToolbar( {
-	value,
-	editableContentElement,
-	activeFormats,
-} ) {
+function InlineSelectionToolbar( { editableContentElement, activeFormats } ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
@@ -32,7 +28,6 @@ function InlineSelectionToolbar( {
 	);
 	const popoverAnchor = useAnchor( {
 		editableContentElement,
-		value,
 		settings,
 	} );
 
@@ -85,7 +80,6 @@ const FormatToolbarContainer = ( {
 		return (
 			<InlineSelectionToolbar
 				editableContentElement={ editableContentElement }
-				value={ value }
 				activeFormats={ activeFormats }
 			/>
 		);

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/url-popover/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
-jest.useRealTimers();
-
 /**
  * Returns the first found popover element up the DOM tree.
  *

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