Only show zoom out inserters on block selection (#65759)

Removes code related to showing/hiding inserters on hover.
WordPress · Sep 30, 2024 · 5128f04 · 5128f04
1 parent 1a47719
commit 5128f04
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 38 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -202,11 +202,3 @@
 		border: none;
 	}
 }
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
-}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
@@ -6,36 +6,21 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-function ZoomOutModeInserterButton( { isVisible, onClick } ) {
-	const [
-		zoomOutModeInserterButtonHovered,
-		setZoomOutModeInserterButtonHovered,
-	] = useState( false );
-
+function ZoomOutModeInserterButton( { onClick } ) {
 	return (
 		<Button
 			variant="primary"
 			icon={ plus }
 			size="compact"
 			className={ clsx(
 				'block-editor-button-pattern-inserter__button',
-				'block-editor-block-tools__zoom-out-mode-inserter-button',
-				{
-					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
-				}
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			onMouseOver={ () => {
-				setZoomOutModeInserterButtonHovered( true );
-			} }
-			onMouseOut={ () => {
-				setZoomOutModeInserterButtonHovered( false );
-			} }
 			label={ _x(
 				'Add pattern',
 				'Generic label for pattern inserter button'

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
@@ -22,15 +22,13 @@ function ZoomOutModeInserters() {
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
 			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
 			getSectionRootClientId,
 			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
@@ -46,7 +44,6 @@ function ZoomOutModeInserters() {
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
@@ -63,7 +60,7 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
@@ -75,23 +72,17 @@ function ZoomOutModeInserters() {
 		const nextClientId = blockOrder[ index ];
 
 		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
+			selectedBlockClientId === previousClientId ||
+			selectedBlockClientId === nextClientId;
 
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ ! shouldRenderInsertionPoint && (
+				{ ! shouldRenderInsertionPoint && isSelected && (
 					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,