do displacement on drag

WordPress · Jul 25, 2024 · 4e1b5c5 · 4e1b5c5
1 parent 82e61c4
commit 4e1b5c5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 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
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,9 +16,9 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
+		blockInsertionPointVisible,
 		blockInsertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -39,16 +39,18 @@ function ZoomOutModeInserters() {
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+			blockInsertionPoint: getBlockInsertionPoint(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
-
 	const blockEditorDispatch = useDispatch( blockEditorStore );
 
+	const isMounted = useRef( false );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -80,7 +82,6 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === nextClientId;
 
 		const { showInsertionPoint } = blockEditorDispatch;
-
 		return (
 			<BlockPopoverInbetween
 				key={ index }