do displacement on drag

WordPress · Jul 25, 2024 · aba1f8f · aba1f8f
1 parent ed9b8af
commit aba1f8f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -184,10 +184,10 @@ function Items( {
 		selectedBlocks,
 		visibleBlocks,
 		shouldRenderAppender,
-		insertionPoint,
 		isZoomOut,
 		sectionRootClientId,
 		sectionClientIds,
+		blockInsertionPoint,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -199,6 +199,7 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				__unstableGetEditorMode,
+				getBlockInsertionPoint,
 			} = unlock( select( blockEditorStore ) );
 			const _order = getBlockOrder( rootClientId );
 
@@ -213,13 +214,6 @@ function Items( {
 			const { sectionRootClientId: root } = unlock( getSettings() );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const sectionRootClientIds = getBlockOrder( root );
-			// To do: move ZoomOutModeInserters to core/editor.
-			// Or we perhaps we should move the insertion point state to the
-			// block-editor store. I'm not sure what it was ever moved to the editor
-			// store, because all the inserter components all live in the
-			// block-editor package.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const editor = select( 'core/editor' );
 			return {
 				order: _order,
 				selectedBlocks: getSelectedBlockClientIds(),
@@ -238,7 +232,7 @@ function Items( {
 				sectionRootClientId: root,
 				sectionClientIds: sectionRootClientIds,
 				blockOrder: getBlockOrder( root ),
-				insertionPoint: unlock( editor ).getInsertionPoint(),
+				blockInsertionPoint: getBlockInsertionPoint(),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]
@@ -291,11 +285,9 @@ function Items( {
 				>
 					{ renderZoomOutSeparator(
 						isSectionBlock( clientId, sectionClientIds ) &&
-							insertionPoint.insertionIndex === 0 &&
+							blockInsertionPoint.index === 0 &&
 							clientId ===
-								sectionClientIds[
-									insertionPoint.insertionIndex
-								]
+								sectionClientIds[ blockInsertionPoint.index ]
 					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
@@ -305,7 +297,7 @@ function Items( {
 						isSectionBlock( clientId, sectionClientIds ) &&
 							clientId ===
 								sectionClientIds[
-									insertionPoint.insertionIndex - 1
+									blockInsertionPoint.index - 1
 								]
 					) }
 				</AsyncModeProvider>

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
@@ -17,7 +17,7 @@ function ZoomOutModeInserters() {
 	const {
 		hasSelection,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPoint,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -29,27 +29,21 @@ function ZoomOutModeInserters() {
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+			getBlockInsertionPoint,
 		} = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
-		// To do: move ZoomOutModeInserters to core/editor.
-		// Or we perhaps we should move the insertion point state to the
-		// block-editor store. I'm not sure what it was ever moved to the editor
-		// store, because all the inserter components all live in the
-		// block-editor package.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editor = select( 'core/editor' );
 		return {
 			hasSelection: !! getSelectionStart().clientId,
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPoint: getBlockInsertionPoint(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
-
+	const dispatch = useDispatch( blockEditorStore );
 	const isMounted = useRef( false );
 
 	useEffect( () => {
@@ -76,10 +70,9 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
+		const shouldRenderInserter = blockInsertionPoint.index !== index;
 
-		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
+		const shouldRenderInsertionPoint = blockInsertionPoint.index === index;
 
 		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
 			return null;
@@ -97,6 +90,7 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === previousClientId ||
 			hoveredBlockClientId === nextClientId;
 
+		const { showInsertionPoint } = unlock( dispatch );
 		return (
 			<BlockPopoverInbetween
 				key={ index }
@@ -113,6 +107,10 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }