@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/components/block-list/test/block-list-context.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { cloneDeep } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -19,6 +14,9 @@ import {
 	ROOT_LEVEL_ID,
 } from './fixtures/block-list-context.native';
 
+// Deep clone an object to avoid mutating it later.
+const cloneObject = ( obj ) => JSON.parse( JSON.stringify( obj ) );
+
 describe( 'findBlockLayoutByClientId', () => {
 	it( "finds a block's layout data at root level", () => {
 		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
@@ -66,7 +64,7 @@ describe( 'findBlockLayoutByClientId', () => {
 describe( 'deleteBlockLayoutByClientId', () => {
 	it( "deletes a block's layout data at root level", () => {
 		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
-		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
 		const currentBlockLayouts = deleteBlockLayoutByClientId(
 			defaultBlockLayouts,
 			ROOT_LEVEL_ID
@@ -82,7 +80,7 @@ describe( 'deleteBlockLayoutByClientId', () => {
 
 	it( "deletes a nested block's layout data with inner blocks", () => {
 		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
-		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
 		const currentBlockLayouts = deleteBlockLayoutByClientId(
 			defaultBlockLayouts,
 			NESTED_WITH_INNER_BLOCKS_ID
@@ -98,7 +96,7 @@ describe( 'deleteBlockLayoutByClientId', () => {
 
 	it( "deletes a deep nested block's layout data", () => {
 		const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
-		const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+		const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
 		const currentBlockLayouts = deleteBlockLayoutByClientId(
 			defaultBlockLayouts,
 			DEEP_NESTED_ID
@@ -120,7 +118,7 @@ describe( 'updateBlocksLayouts', () => {
 			findBlockLayoutByClientId,
 			updateBlocksLayouts,
 		} = DEFAULT_BLOCK_LIST_CONTEXT;
-		const currentBlockLayouts = cloneDeep( blocksLayouts );
+		const currentBlockLayouts = cloneObject( blocksLayouts );
 		const BLOCK_CLIENT_ID = PARAGRAPH_BLOCK_LAYOUT_DATA.clientId;
 
 		updateBlocksLayouts( currentBlockLayouts, PARAGRAPH_BLOCK_LAYOUT_DATA );
@@ -142,7 +140,7 @@ describe( 'updateBlocksLayouts', () => {
 		const { findBlockLayoutByClientId, updateBlocksLayouts } =
 			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
-			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+			current: cloneObject( BLOCKS_LAYOUTS_DATA ),
 		};
 		const PARENT_BLOCK_CLIENT_ID = GROUP_BLOCK_LAYOUT_DATA.clientId;
 
@@ -181,7 +179,7 @@ describe( 'updateBlocksLayouts', () => {
 		const { findBlockLayoutByClientId, updateBlocksLayouts } =
 			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
-			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+			current: cloneObject( BLOCKS_LAYOUTS_DATA ),
 		};
 
 		// Add block layout data to it's parents inner blocks
@@ -207,7 +205,7 @@ describe( 'updateBlocksLayouts', () => {
 		const { findBlockLayoutByClientId, updateBlocksLayouts } =
 			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
-			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+			current: cloneObject( BLOCKS_LAYOUTS_DATA ),
 		};
 
 		updateBlocksLayouts( currentBlockLayouts, {
@@ -227,7 +225,7 @@ describe( 'updateBlocksLayouts', () => {
 		const { findBlockLayoutByClientId, updateBlocksLayouts } =
 			DEFAULT_BLOCK_LIST_CONTEXT;
 		const currentBlockLayouts = {
-			current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+			current: cloneObject( BLOCKS_LAYOUTS_DATA ),
 		};
 
 		updateBlocksLayouts( currentBlockLayouts, {

package/src/components/block-list/use-block-props/index.js

@@ -34,6 +34,7 @@ import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
+import useBlockOverlayActive from '../../block-content-overlay';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -50,18 +51,14 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
- * @param {Object}  props                        Optional. Props to pass to the element. Must contain
- *                                               the ref if one is defined.
- * @param {Object}  options                      Options for internal use only.
+ * @param {Object}  props                    Optional. Props to pass to the element. Must contain
+ *                                           the ref if one is defined.
+ * @param {Object}  options                  Options for internal use only.
  * @param {boolean} options.__unstableIsHtml
- * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled.
  *
  * @return {Object} Props to pass to the element to mark as a block.
  */
-export function useBlockProps(
-	props = {},
-	{ __unstableIsHtml, __unstableIsDisabled = false } = {}
-) {
+export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const {
 		clientId,
 		className,
@@ -114,6 +111,8 @@ export function useBlockProps(
 		[ clientId ]
 	);
 
+	const hasOverlay = useBlockOverlayActive( clientId );
+
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
@@ -132,7 +131,7 @@ export function useBlockProps(
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
-		useDisabled( { isDisabled: ! __unstableIsDisabled } ),
+		useDisabled( { isDisabled: ! hasOverlay } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -144,11 +143,11 @@ export function useBlockProps(
 	}
 
 	return {
+		tabIndex: 0,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,
 		id: `block-${ clientId }${ htmlSuffix }`,
-		tabIndex: 0,
 		role: 'document',
 		'aria-label': blockLabel,
 		'data-block': clientId,
@@ -158,6 +157,7 @@ export function useBlockProps(
 			// The wp-block className is important for editor styles.
 			classnames( 'block-editor-block-list__block', {
 				'wp-block': ! isAligned,
+				'has-block-overlay': hasOverlay,
 			} ),
 			className,
 			props.className,

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -34,6 +34,7 @@ export function useBlockClassNames( clientId ) {
 				hasSelectedInnerBlock,
 				isTyping,
 				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
 			} = select( blockEditorStore );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -51,7 +52,9 @@ export function useBlockClassNames( clientId ) {
 				'is-highlighted': isBlockHighlighted( clientId ),
 				'is-multi-selected': isMultiSelected,
 				'is-partially-selected':
-					isMultiSelected && ! __unstableIsFullySelected(),
+					isMultiSelected &&
+					! __unstableIsFullySelected() &&
+					! __unstableSelectionHasUnmergeableBlock(),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +31,7 @@ function useInitialPosition( clientId ) {
 		( select ) => {
 			const {
 				getSelectedBlocksInitialCaretPosition,
-				isNavigationMode,
+				__unstableGetEditorMode,
 				isBlockSelected,
 			} = select( blockEditorStore );
 
@@ -44,7 +39,7 @@ function useInitialPosition( clientId ) {
 				return;
 			}
 
-			if ( isNavigationMode() ) {
+			if ( __unstableGetEditorMode() !== 'edit' ) {
 				return;
 			}
 
@@ -85,7 +80,7 @@ export function useFocusFirstElement( clientId ) {
 		const { ownerDocument } = ref.current;
 
 		// Do not focus the block if it already contains the active element.
-		if ( ref.current.contains( ownerDocument.activeElement ) ) {
+		if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
 			return;
 		}
 
@@ -98,7 +93,7 @@ export function useFocusFirstElement( clientId ) {
 		// tabbables.
 		const isReverse = -1 === initialPosition;
 		const target =
-			( isReverse ? last : first )( textInputs ) || ref.current;
+			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
 			ref.current.focus();

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -26,8 +26,8 @@ function listener( event ) {
  */
 export function useIsHovered() {
 	const isEnabled = useSelect( ( select ) => {
-		const { isNavigationMode, getSettings } = select( blockEditorStore );
-		return isNavigationMode() || getSettings().outlineMode;
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().outlineMode;
 	}, [] );
 
 	return useRefEffect(

package/src/components/block-list/use-in-between-inserter.js

@@ -14,8 +14,10 @@ import { InsertionPointOpenRef } from '../block-tools/insertion-point';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
-	const hasReducedUI = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasReducedUI,
+	const isInBetweenInserterDisabled = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().hasReducedUI ||
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
 		[]
 	);
 	const {
@@ -26,13 +28,14 @@ export function useInBetweenInserter() {
 		isMultiSelecting,
 		getSelectedBlockClientIds,
 		getTemplateLock,
+		__unstableIsWithinBlockOverlay,
 	} = useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
-			if ( hasReducedUI ) {
+			if ( isInBetweenInserterDisabled ) {
 				return;
 			}
 
@@ -108,16 +111,11 @@ export function useInBetweenInserter() {
 
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
-				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-content-overlay'
-				);
-				if ( parentOverlay ) {
-					return;
-				}
-
 				const clientId = element.id.slice( 'block-'.length );
-
-				if ( ! clientId ) {
+				if (
+					! clientId ||
+					__unstableIsWithinBlockOverlay( clientId )
+				) {
 					return;
 				}
 
@@ -126,7 +124,6 @@ export function useInBetweenInserter() {
 				if ( getSelectedBlockClientIds().includes( clientId ) ) {
 					return;
 				}
-
 				const elementRect = element.getBoundingClientRect();
 
 				if (
@@ -175,6 +172,7 @@ export function useInBetweenInserter() {
 			showInsertionPoint,
 			hideInsertionPoint,
 			getSelectedBlockClientIds,
+			isInBetweenInserterDisabled,
 		]
 	);
 }

package/src/components/block-list-appender/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -18,14 +18,35 @@ import { store as blockEditorStore } from '../../store';
 
 function BlockListAppender( {
 	rootClientId,
-	canInsertDefaultBlock,
-	isLocked,
 	renderAppender: CustomAppender,
 	className,
-	selectedBlockClientId,
 	tagName: TagName = 'div',
 } ) {
-	if ( isLocked || CustomAppender === false ) {
+	const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } =
+		useSelect(
+			( select ) => {
+				const {
+					canInsertBlockType,
+					getTemplateLock,
+					getSelectedBlockClientId,
+					__unstableGetEditorMode,
+				} = select( blockEditorStore );
+
+				return {
+					hideInserter:
+						!! getTemplateLock( rootClientId ) ||
+						__unstableGetEditorMode() === 'zoom-out',
+					canInsertDefaultBlock: canInsertBlockType(
+						getDefaultBlockName(),
+						rootClientId
+					),
+					selectedBlockClientId: getSelectedBlockClientId(),
+				};
+			},
+			[ rootClientId ]
+		);
+
+	if ( hideInserter || CustomAppender === false ) {
 		return null;
 	}
 
@@ -92,16 +113,4 @@ function BlockListAppender( {
 	);
 }
 
-export default withSelect( ( select, { rootClientId } ) => {
-	const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } =
-		select( blockEditorStore );
-
-	return {
-		isLocked: !! getTemplateLock( rootClientId ),
-		canInsertDefaultBlock: canInsertBlockType(
-			getDefaultBlockName(),
-			rootClientId
-		),
-		selectedBlockClientId: getSelectedBlockClientId(),
-	};
-} )( BlockListAppender );
+export default BlockListAppender;

package/src/components/block-list-appender/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +31,9 @@ function BlockListAppender( {
 		return (
 			<DefaultBlockAppender
 				rootClientId={ rootClientId }
-				lastBlockClientId={ last( blockClientIds ) }
+				lastBlockClientId={
+					blockClientIds[ blockClientIds.length - 1 ]
+				}
 				containerStyle={ styles.blockListAppender }
 				placeholder={ blockClientIds.length > 0 ? '' : null }
 				showSeparator={ showSeparator }

package/src/components/block-lock/use-block-lock.js

@@ -25,6 +25,7 @@ export default function useBlockLock( clientId ) {
 				canLockBlockType,
 				getBlockName,
 				getBlockRootClientId,
+				getTemplateLock,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
@@ -37,6 +38,7 @@ export default function useBlockLock( clientId ) {
 				canMove,
 				canRemove,
 				canLock: canLockBlockType( getBlockName( clientId ) ),
+				isContentLocked: getTemplateLock( clientId ) === 'noContent',
 				isLocked: ! canEdit || ! canMove || ! canRemove,
 			};
 		},

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Platform, findNodeHandle } from 'react-native';
-import { partial, first, castArray, last, every } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -307,21 +307,25 @@ export default compose(
 			canInsertBlockType,
 			getTemplateLock,
 		} = select( blockEditorStore );
-		const normalizedClientIds = castArray( clientIds );
+		const normalizedClientIds = Array.isArray( clientIds )
+			? clientIds
+			: [ clientIds ];
 		const block = getBlock( normalizedClientIds );
 		const blockName = getBlockName( normalizedClientIds );
 		const blockType = getBlockType( blockName );
 		const blockTitle = blockType?.title;
-		const firstClientId = first( normalizedClientIds );
+		const firstClientId = normalizedClientIds[ 0 ];
 		const rootClientId = getBlockRootClientId( firstClientId );
 		const blockOrder = getBlockOrder( rootClientId );
 
 		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+		const lastIndex = getBlockIndex(
+			normalizedClientIds[ normalizedClientIds.length - 1 ]
+		);
 
 		const innerBlocks = getBlocksByClientId( clientIds );
 
-		const canDuplicate = every( innerBlocks, ( innerBlock ) => {
+		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
 			return (
 				!! innerBlock &&
 				hasBlockSupport( innerBlock.name, 'multiple', true ) &&
@@ -336,9 +340,9 @@ export default compose(
 			isExactlyOneBlock && isDefaultBlock && isEmptyContent;
 		const isLocked = !! getTemplateLock( rootClientId );
 
-		const selectedBlockClientId = first( getSelectedBlockClientIds() );
+		const selectedBlockClientId = getSelectedBlockClientIds()[ 0 ];
 		const selectedBlock = selectedBlockClientId
-			? first( getBlocksByClientId( selectedBlockClientId ) )
+			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
 			: undefined;
 		const selectedBlockPossibleTransformations = selectedBlock
 			? getBlockTransformItems( [ selectedBlock ], rootClientId )
@@ -406,8 +410,10 @@ export default compose(
 				duplicateBlock() {
 					return duplicateBlocks( clientIds );
 				},
-				onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
-				onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
+				onMoveDown: ( ...args ) =>
+					moveBlocksDown( clientIds, rootClientId, ...args ),
+				onMoveUp: ( ...args ) =>
+					moveBlocksUp( clientIds, rootClientId, ...args ),
 				openGeneralSidebar: () =>
 					openGeneralSidebar( 'edit-post/block' ),
 				pasteBlock: ( clipboardBlock ) => {

package/src/components/block-mover/button.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray, first, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -62,7 +61,10 @@ const BlockMoverButton = forwardRef(
 		ref
 	) => {
 		const instanceId = useInstanceId( BlockMoverButton );
-		const blocksCount = castArray( clientIds ).length;
+		const normalizedClientIds = Array.isArray( clientIds )
+			? clientIds
+			: [ clientIds ];
+		const blocksCount = normalizedClientIds.length;
 
 		const {
 			blockType,
@@ -81,12 +83,11 @@ const BlockMoverButton = forwardRef(
 					getBlock,
 					getBlockListSettings,
 				} = select( blockEditorStore );
-				const normalizedClientIds = castArray( clientIds );
-				const firstClientId = first( normalizedClientIds );
+				const firstClientId = normalizedClientIds[ 0 ];
 				const blockRootClientId = getBlockRootClientId( firstClientId );
 				const firstBlockIndex = getBlockIndex( firstClientId );
 				const lastBlockIndex = getBlockIndex(
-					last( normalizedClientIds )
+					normalizedClientIds[ normalizedClientIds.length - 1 ]
 				);
 				const blockOrder = getBlockOrder( blockRootClientId );
 				const block = getBlock( firstClientId );

package/src/components/block-mover/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { first, last, castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -30,13 +29,15 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				getBlockOrder,
 				getBlockRootClientId,
 			} = select( blockEditorStore );
-			const normalizedClientIds = castArray( clientIds );
-			const firstClientId = first( normalizedClientIds );
-			const _rootClientId = getBlockRootClientId(
-				first( normalizedClientIds )
-			);
+			const normalizedClientIds = Array.isArray( clientIds )
+				? clientIds
+				: [ clientIds ];
+			const firstClientId = normalizedClientIds[ 0 ];
+			const _rootClientId = getBlockRootClientId( firstClientId );
 			const firstIndex = getBlockIndex( firstClientId );
-			const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+			const lastIndex = getBlockIndex(
+				normalizedClientIds[ normalizedClientIds.length - 1 ]
+			);
 			const blockOrder = getBlockOrder( _rootClientId );
 
 			return {

package/src/components/block-mover/index.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { first, last, partial, castArray } from 'lodash';
 import { Platform } from 'react-native';
 
 /**
@@ -149,12 +148,16 @@ export default compose(
 			getBlockRootClientId,
 			getBlockOrder,
 		} = select( blockEditorStore );
-		const normalizedClientIds = castArray( clientIds );
-		const firstClientId = first( normalizedClientIds );
+		const normalizedClientIds = Array.isArray( clientIds )
+			? clientIds
+			: [ clientIds ];
+		const firstClientId = normalizedClientIds[ 0 ];
 		const rootClientId = getBlockRootClientId( firstClientId );
 		const blockOrder = getBlockOrder( rootClientId );
 		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+		const lastIndex = getBlockIndex(
+			normalizedClientIds[ normalizedClientIds.length - 1 ]
+		);
 
 		return {
 			firstIndex,
@@ -169,15 +172,19 @@ export default compose(
 		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
 			dispatch( blockEditorStore );
 		return {
-			onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
-			onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
-			onLongMove: ( targetIndex ) =>
-				partial(
-					moveBlocksToPosition,
-					clientIds,
-					rootClientId,
-					targetIndex
-				),
+			onMoveDown: ( ...args ) =>
+				moveBlocksDown( clientIds, rootClientId, ...args ),
+			onMoveUp: ( ...args ) =>
+				moveBlocksUp( clientIds, rootClientId, ...args ),
+			onLongMove:
+				( targetIndex ) =>
+				( ...args ) =>
+					moveBlocksToPosition(
+						clientIds,
+						rootClientId,
+						targetIndex,
+						...args
+					),
 		};
 	} ),
 	withInstanceId