Zoom Out: Use the block editor for insertion point data (#63934)

* Zoom Out: Use the block editor for insertion point data * remove unlock Co-authored-by: scruffian <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · Jul 25, 2024 · d77fe65 · d77fe65
1 parent 877628c
commit d77fe65
Showing 1 changed file with 16 additions and 18 deletions.
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, useState } from '@wordpress/element';
 
 /**
@@ -16,32 +16,29 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
+		blockInsertionPoint,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
 		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
+			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+			isBlockInsertionPointVisible,
 		} = 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,
+			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
@@ -50,6 +47,8 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
+	const blockEditorDispatch = useDispatch( blockEditorStore );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -65,14 +64,8 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
-
 		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
-
-		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
-			return null;
-		}
+			blockInsertionPointVisible && blockInsertionPoint.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
@@ -86,6 +79,8 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === previousClientId ||
 			hoveredBlockClientId === nextClientId;
 
+		const { showInsertionPoint } = blockEditorDispatch;
+
 		return (
 			<BlockPopoverInbetween
 				key={ index }
@@ -104,7 +99,7 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
-				{ shouldRenderInserter && (
+				{ ! shouldRenderInsertionPoint && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }
 						onClick={ () => {
@@ -114,6 +109,9 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }