Fix don't show inserter in Zoom Out dropzone when the text is visible (…

…#68031) * Hide inserter * Comment case Co-authored-by: Sarah Norris <[email protected]> --------- Co-authored-by: getdave <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: mikachan <[email protected]>
WordPress · Dec 17, 2024 · 7dd3127 · 7dd3127 · github-actions · Dec 17, 2024
1 parent ca298ed
commit 7dd3127
Showing 1 changed file with 21 additions and 3 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
@@ -20,13 +20,17 @@ function ZoomOutModeInserters() {
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
+		blockInsertionPoint,
+		insertionPointVisible,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getSectionRootClientId,
+			getBlockInsertionPoint,
+			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -38,6 +42,8 @@ function ZoomOutModeInserters() {
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
+			blockInsertionPoint: getBlockInsertionPoint(),
+			insertionPointVisible: isBlockInsertionPointVisible(),
 		};
 	}, [] );
 
@@ -62,7 +68,19 @@ function ZoomOutModeInserters() {
 	const index = blockOrder.findIndex(
 		( clientId ) => selectedBlockClientId === clientId
 	);
-	const nextClientId = blockOrder[ index + 1 ];
+
+	const insertionIndex = index + 1;
+
+	const nextClientId = blockOrder[ insertionIndex ];
+
+	// If the block insertion point is visible, and the insertion
+	// indicies match then we don't need to render the inserter.
+	if (
+		insertionPointVisible &&
+		blockInsertionPoint?.index === insertionIndex
+	) {
+		return null;
+	}
 
 	return (
 		<BlockPopoverInbetween
@@ -73,11 +91,11 @@ function ZoomOutModeInserters() {
 				onClick={ () => {
 					setInserterIsOpened( {
 						rootClientId: sectionRootClientId,
-						insertionIndex: index + 1,
+						insertionIndex,
 						tab: 'patterns',
 						category: 'all',
 					} );
-					showInsertionPoint( sectionRootClientId, index + 1, {
+					showInsertionPoint( sectionRootClientId, insertionIndex, {
 						operation: 'insert',
 					} );
 				} }