@wordpress/block-editor 14.1.0 → 14.2.1-next.1f6eadc42.0

package/src/components/block-draggable/use-scroll-when-dragging.js

@@ -18,36 +18,36 @@ const VELOCITY_MULTIPLIER =
  *                      and `onDragEnd` events respectively.
  */
 export default function useScrollWhenDragging() {
-	const dragStartY = useRef( null );
-	const velocityY = useRef( null );
-	const scrollParentY = useRef( null );
-	const scrollEditorInterval = useRef( null );
+	const dragStartYRef = useRef( null );
+	const velocityYRef = useRef( null );
+	const scrollParentYRef = useRef( null );
+	const scrollEditorIntervalRef = useRef( null );
 
 	// Clear interval when unmounting.
 	useEffect(
 		() => () => {
-			if ( scrollEditorInterval.current ) {
-				clearInterval( scrollEditorInterval.current );
-				scrollEditorInterval.current = null;
+			if ( scrollEditorIntervalRef.current ) {
+				clearInterval( scrollEditorIntervalRef.current );
+				scrollEditorIntervalRef.current = null;
 			}
 		},
 		[]
 	);
 
 	const startScrolling = useCallback( ( event ) => {
-		dragStartY.current = event.clientY;
+		dragStartYRef.current = event.clientY;
 
 		// Find nearest parent(s) to scroll.
-		scrollParentY.current = getScrollContainer( event.target );
+		scrollParentYRef.current = getScrollContainer( event.target );
 
-		scrollEditorInterval.current = setInterval( () => {
-			if ( scrollParentY.current && velocityY.current ) {
+		scrollEditorIntervalRef.current = setInterval( () => {
+			if ( scrollParentYRef.current && velocityYRef.current ) {
 				const newTop =
-					scrollParentY.current.scrollTop + velocityY.current;
+					scrollParentYRef.current.scrollTop + velocityYRef.current;
 
 				// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
 				// Better to use a small scroll interval.
-				scrollParentY.current.scroll( {
+				scrollParentYRef.current.scroll( {
 					top: newTop,
 				} );
 			}
@@ -55,14 +55,14 @@ export default function useScrollWhenDragging() {
 	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
-		if ( ! scrollParentY.current ) {
+		if ( ! scrollParentYRef.current ) {
 			return;
 		}
-		const scrollParentHeight = scrollParentY.current.offsetHeight;
+		const scrollParentHeight = scrollParentYRef.current.offsetHeight;
 		const offsetDragStartPosition =
-			dragStartY.current - scrollParentY.current.offsetTop;
+			dragStartYRef.current - scrollParentYRef.current.offsetTop;
 		const offsetDragPosition =
-			event.clientY - scrollParentY.current.offsetTop;
+			event.clientY - scrollParentYRef.current.offsetTop;
 
 		if ( event.clientY > offsetDragStartPosition ) {
 			// User is dragging downwards.
@@ -82,7 +82,7 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
 			const moveableDistance = Math.max(
@@ -99,19 +99,19 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
-			velocityY.current = 0;
+			velocityYRef.current = 0;
 		}
 	}, [] );
 
 	const stopScrolling = () => {
-		dragStartY.current = null;
-		scrollParentY.current = null;
+		dragStartYRef.current = null;
+		scrollParentYRef.current = null;
 
-		if ( scrollEditorInterval.current ) {
-			clearInterval( scrollEditorInterval.current );
-			scrollEditorInterval.current = null;
+		if ( scrollEditorIntervalRef.current ) {
+			clearInterval( scrollEditorIntervalRef.current );
+			scrollEditorIntervalRef.current = null;
 		}
 	};
 

package/src/components/block-edit/multiple-usage-warning.js

@@ -24,6 +24,7 @@ export function MultipleUsageWarning( {
 		<Warning
 			actions={ [
 				<Button
+					__next40pxDefaultSize
 					key="find-original"
 					variant="secondary"
 					onClick={ () => selectBlock( originalBlockClientId ) }
@@ -31,6 +32,7 @@ export function MultipleUsageWarning( {
 					{ __( 'Find original' ) }
 				</Button>,
 				<Button
+					__next40pxDefaultSize
 					key="remove"
 					variant="secondary"
 					onClick={ () => onReplace( [] ) }

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

@@ -32,6 +32,14 @@ import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
 
+function BlockStylesPanel( { clientId } ) {
+	return (
+		<PanelBody title={ __( 'Styles' ) }>
+			<BlockStyles clientId={ clientId } />
+		</PanelBody>
+	);
+}
+
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
 		( select ) => {
@@ -48,6 +56,15 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 		},
 		[ topLevelLockedBlock ]
 	);
+	const hasBlockStyles = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const { getBlockStyles } = select( blocksStore );
+			return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
+				?.length;
+		},
+		[ topLevelLockedBlock ]
+	);
 	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
 	return (
 		<div className="block-editor-block-inspector">
@@ -55,8 +72,10 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				{ ...blockInformation }
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
-			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
+			{ hasBlockStyles && (
+				<BlockStylesPanel clientId={ topLevelLockedBlock } />
+			) }
 			{ contentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
@@ -81,7 +100,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getContentLockingParent,
 			getTemplateLock,
 		} = unlock( select( blockEditorStore ) );
-
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const _selectedBlockName =
 			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
@@ -276,11 +294,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			{ ! showTabs && (
 				<>
 					{ hasBlockStyles && (
-						<div>
-							<PanelBody title={ __( 'Styles' ) }>
-								<BlockStyles clientId={ clientId } />
-							</PanelBody>
-						</div>
+						<BlockStylesPanel clientId={ clientId } />
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot group="list" />
@@ -307,6 +321,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					/>
 					<InspectorControls.Slot group="styles" />
 					<PositionControls />
+					<InspectorControls.Slot group="bindings" />
 					<div>
 						<AdvancedControls />
 					</div>

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

@@ -11,10 +11,8 @@
 	}
 
 	.components-base-control {
-		margin-bottom: #{ $grid-unit-30 };
-
-		&:last-child {
-			margin-bottom: $grid-unit-10;
+		&:where(:not(:last-child)) {
+			margin-bottom: $grid-unit-20;
 		}
 	}
 

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

@@ -101,16 +101,17 @@ export default function BlockInvalidWarning( { clientId } ) {
 			<Warning
 				actions={ [
 					<Button
+						__next40pxDefaultSize
 						key="recover"
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
-						{ __( 'Attempt Block Recovery' ) }
+						{ __( 'Attempt recovery' ) }
 					</Button>,
 				] }
 				secondaryActions={ secondaryActions }
 			>
-				{ __( 'This block contains unexpected or invalid content.' ) }
+				{ __( 'Block contains unexpected or invalid content.' ) }
 			</Warning>
 			{ compare && (
 				<Modal

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

@@ -646,6 +646,8 @@ function BlockListBlockProvider( props ) {
 				blocksWithSameName.length &&
 				blocksWithSameName[ 0 ] !== clientId;
 
+			const editorMode = __unstableGetEditorMode();
+
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -672,6 +674,7 @@ function BlockListBlockProvider( props ) {
 					) && hasSelectedInnerBlock( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
+				editorMode,
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
@@ -680,8 +683,7 @@ function BlockListBlockProvider( props ) {
 					! isDragging(),
 				initialPosition:
 					_isSelected &&
-					( __unstableGetEditorMode() === 'edit' ||
-						__unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
+					( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
 						? getSelectedBlocksInitialCaretPosition()
 						: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
@@ -728,6 +730,7 @@ function BlockListBlockProvider( props ) {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
+		editorMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		index,
@@ -782,6 +785,7 @@ function BlockListBlockProvider( props ) {
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
+		editorMode,
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,

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

@@ -107,7 +107,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			right: 0;
 			left: 0;
 			top: -$default-block-margin * 0.5;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			border-top: 4px solid $gray-400;
 			bottom: auto;
 			box-shadow: none;
@@ -215,7 +215,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border-radius: $radius-block-ui;
 		background-color: rgba($white, 0.4);
 	}
 
@@ -421,7 +420,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	width: 100%;
 	border: none;
 	outline: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;
@@ -454,3 +453,24 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		margin-bottom: auto;
 	}
 }
+
+.block-editor-block-list__zoom-out-separator {
+	/* same color as the iframe's background */
+	background: $gray-300;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin-left: -1px;
+	margin-right: -1px;
+	transition: background-color 0.3s ease;
+
+	&.is-dragged-over {
+		background: $gray-400;
+	}
+}
+
+// In Post Editor allow the separator to occupy the full width by ignoring (cancelling out) the global padding.
+.has-global-padding > .block-editor-block-list__zoom-out-separator,
+.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
+	max-width: none;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+}

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

@@ -39,6 +39,7 @@ import {
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
+import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
@@ -174,49 +175,55 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getBlockOrder,
-					getSelectedBlockClientId,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				const _order = getBlockOrder( rootClientId );
+	const {
+		order,
+		isZoomOut,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
 
-				if ( getSettings().__unstableIsPreviewMode ) {
-					return {
-						order: _order,
-						selectedBlocks: EMPTY_ARRAY,
-						visibleBlocks: EMPTY_SET,
-					};
-				}
+			const _order = getBlockOrder( rootClientId );
 
-				const selectedBlockClientId = getSelectedBlockClientId();
+			if ( getSettings().__unstableIsPreviewMode ) {
 				return {
 					order: _order,
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					shouldRenderAppender:
-						hasAppender &&
-						__unstableGetEditorMode() !== 'zoom-out' &&
-						( hasCustomAppender
-							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !== 'disabled'
-							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId &&
-									! selectedBlockClientId &&
-									! _order.length ) ),
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
 				};
-			},
-			[ rootClientId, hasAppender, hasCustomAppender ]
-		);
+			}
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+			return {
+				order: _order,
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				shouldRenderAppender:
+					hasAppender &&
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId &&
+								! selectedBlockClientId &&
+								! _order.length ) ),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -230,10 +237,24 @@ function Items( {
 						! selectedBlocks.includes( clientId )
 					}
 				>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="top"
+						/>
+					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 					/>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="bottom"
+						/>
+					) }
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }

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

@@ -26,6 +26,7 @@ import {
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
+import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
@@ -85,6 +86,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
+		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -115,6 +117,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
+		useZoomOutModeExit( { editorMode } ),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

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

@@ -68,6 +68,7 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
+			ownerDocument.defaultView.getSelection().removeAllRanges();
 			ref.current.focus();
 			return;
 		}

package/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+/**
+ * Allows Zoom Out mode to be exited by double clicking in the selected block.
+ *
+ * @param {string} clientId Block client ID.
+ */
+export function useZoomOutModeExit( { editorMode } ) {
+	const getSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings
+	);
+
+	const { __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	return useRefEffect(
+		( node ) => {
+			if ( editorMode !== 'zoom-out' ) {
+				return;
+			}
+
+			function onDoubleClick( event ) {
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
+					__unstableSetEditorMode( 'edit' );
+				}
+			}
+
+			node.addEventListener( 'dblclick', onDoubleClick );
+
+			return () => {
+				node.removeEventListener( 'dblclick', onDoubleClick );
+			};
+		},
+		[ editorMode, __unstableSetEditorMode ]
+	);
+}

package/src/components/block-list/zoom-out-separator.js

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function ZoomOutSeparator( {
+	clientId,
+	rootClientId = '',
+	position = 'top',
+} ) {
+	const [ isDraggedOver, setIsDraggedOver ] = useState( false );
+	const {
+		sectionRootClientId,
+		sectionClientIds,
+		blockInsertionPoint,
+		blockInsertionPointVisible,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockInsertionPoint,
+			getBlockOrder,
+			isBlockInsertionPointVisible,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+		const sectionRootClientIds = getBlockOrder( root );
+		return {
+			sectionRootClientId: root,
+			sectionClientIds: sectionRootClientIds,
+			blockOrder: getBlockOrder( root ),
+			blockInsertionPoint: getBlockInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+		};
+	}, [] );
+
+	const isReducedMotion = useReducedMotion();
+
+	if ( ! clientId ) {
+		return;
+	}
+
+	let isVisible = false;
+
+	const isSectionBlock =
+		rootClientId === sectionRootClientId &&
+		sectionClientIds &&
+		sectionClientIds.includes( clientId );
+
+	if ( ! isSectionBlock ) {
+		return null;
+	}
+
+	if ( position === 'top' ) {
+		isVisible =
+			blockInsertionPointVisible &&
+			blockInsertionPoint.index === 0 &&
+			clientId === sectionClientIds[ blockInsertionPoint.index ];
+	}
+
+	if ( position === 'bottom' ) {
+		isVisible =
+			blockInsertionPointVisible &&
+			clientId === sectionClientIds[ blockInsertionPoint.index - 1 ];
+	}
+
+	return (
+		<AnimatePresence>
+			{ isVisible && (
+				<motion.div
+					as="button"
+					layout={ ! isReducedMotion }
+					initial={ { height: 0 } }
+					animate={ { height: '120px' } }
+					exit={ { height: 0 } }
+					transition={ {
+						type: 'tween',
+						duration: 0.2,
+						ease: [ 0.6, 0, 0.4, 1 ],
+					} }
+					className={ clsx(
+						'block-editor-block-list__zoom-out-separator',
+						{
+							'is-dragged-over': isDraggedOver,
+						}
+					) }
+					data-is-insertion-point="true"
+					onDragOver={ () => setIsDraggedOver( true ) }
+					onDragLeave={ () => setIsDraggedOver( false ) }
+				></motion.div>
+			) }
+		</AnimatePresence>
+	);
+}

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

@@ -41,7 +41,7 @@
 
 	&:hover {
 		background-color: $gray-100;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 }
 

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

@@ -20,7 +20,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	const hasLockButtonShown = useRef( false );
+	const hasLockButtonShownRef = useRef( false );
 
 	// If the block lock button has been shown, we don't want to remove it
 	// from the toolbar until the toolbar is rendered again without it.
@@ -29,11 +29,11 @@ export default function BlockLockToolbar( { clientId } ) {
 	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
 		if ( isLocked ) {
-			hasLockButtonShown.current = true;
+			hasLockButtonShownRef.current = true;
 		}
 	}, [ isLocked ] );
 
-	if ( ! isLocked && ! hasLockButtonShown.current ) {
+	if ( ! isLocked && ! hasLockButtonShownRef.current ) {
 		return null;
 	}
 

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

@@ -129,6 +129,7 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
+					__next40pxDefaultSize
 					ref={ ref }
 					className={ clsx(
 						'block-editor-block-mover-button',