@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -94,10 +94,38 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
-	}, [] );
+	const {
+		themeSupportsLayout,
+		hasContentLockedParent,
+		isContentBlock,
+		isContentLocking,
+		isTemporarilyEditingAsBlocks,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				__unstableGetContentLockingParent,
+				getTemplateLock,
+				__unstableGetTemporarilyEditingAsBlocks,
+			} = select( blockEditorStore );
+			const _hasContentLockedParent =
+				!! __unstableGetContentLockingParent( clientId );
+			return {
+				themeSupportsLayout: getSettings().supportsLayout,
+				isContentBlock:
+					select( blocksStore ).__experimentalHasContentRoleAttribute(
+						name
+					),
+				hasContentLockedParent: _hasContentLockedParent,
+				isContentLocking:
+					getTemplateLock( clientId ) === 'noContent' &&
+					! _hasContentLockedParent,
+				isTemporarilyEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ name, clientId ]
+	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -123,6 +151,12 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
+	if ( hasContentLockedParent && ! isContentBlock ) {
+		wrapperProps = {
+			...wrapperProps,
+			tabIndex: -1,
+		};
+	}
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
@@ -185,18 +219,24 @@ function BlockListBlock( {
 		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
 	}
 
+	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
+
 	const value = {
 		clientId,
-		className:
-			wrapperProps?.[ 'data-align' ] && themeSupportsLayout
-				? classnames(
-						className,
-						`align${ wrapperProps[ 'data-align' ] }`
-				  )
-				: className,
-		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
+		className: classnames(
+			{
+				'is-content-locked': isContentLocking,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
+				'is-content-block': hasContentLockedParent && isContentBlock,
+			},
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			className
+		),
+		wrapperProps: restWrapperProps,
 		isAligned,
 	};
+
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
 
 	return (

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

@@ -34,15 +34,15 @@ export const IntersectionObserver = createContext();
 function Root( { className, ...settings } ) {
 	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
+	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
 		( select ) => {
-			const { getSettings, isNavigationMode: _isNavigationMode } =
+			const { getSettings, __unstableGetEditorMode } =
 				select( blockEditorStore );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode,
 				isFocusMode: focusMode,
-				isNavigationMode: _isNavigationMode(),
+				editorMode: __unstableGetEditorMode(),
 			};
 		},
 		[]
@@ -74,7 +74,7 @@ function Root( { className, ...settings } ) {
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': isNavigationMode,
+				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings

package/src/components/block-list/style.scss

@@ -13,15 +13,8 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Select tool/navigation mode shows the default cursor until an additional click edits.
-	&.is-navigate-mode {
-		cursor: default;
-	}
-
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
@@ -50,17 +43,14 @@
 		}
 
 		// Provide exceptions for placeholders.
-		.components-placeholder {
+		.components-placeholder,
+		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 			::selection {
 				background: transparent;
 			}
 		}
 	}
 
-	&.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
 	.block-editor-block-list__block.is-highlighted::after {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: $border-width solid transparent;
@@ -123,6 +113,15 @@
 	padding: 0;
 }
 
+.is-content-locked {
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+	.is-content-block {
+		pointer-events: initial;
+	}
+}
+
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
@@ -331,6 +330,14 @@
 	}
 }
 
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+	&,
+	& .block-editor-block-list__block {
+		opacity: 1;
+	}
+}
+
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,
@@ -431,3 +438,23 @@
 		margin-bottom: auto;
 	}
 }
+
+/** Zoom Out mode styles **/
+.block-editor-iframe__body {
+	transition: all 0.3s;
+	transform-origin: top center;
+
+	&.is-zoomed-out {
+		margin: 100px 0;
+		transform: scale(0.45);
+
+		// Add a bit more space between the top level blocks.
+		.wp-site-blocks > * + * {
+			margin-block-start: 2.5rem;
+		}
+
+		> .block-list-appender {
+			display: none;
+		}
+	}
+}

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;
 			}
 
@@ -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 ) => {