Reduce number of select calls by lifting useSelect calls to ZoomOutMo…

…deInserters
WordPress · Jul 18, 2024 · 59adab5 · 59adab5
1 parent bd47463
commit 59adab5
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 91 deletions.
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,57 +6,12 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-function ZoomOutModeInserterButton( {
-	previousClientId,
-	nextClientId,
-	index,
-} ) {
-	const {
-		sectionRootClientId,
-		setInserterIsOpened,
-		hasSelection,
-		selectedBlockClientId,
-		hoveredBlockClientId,
-	} = useSelect( ( select ) => {
-		const {
-			getSettings,
-			getSelectionStart,
-			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-		} = select( blockEditorStore );
-		const { sectionRootClientId: root } = unlock( getSettings() );
-
-		return {
-			hasSelection: !! getSelectionStart().clientId,
-			sectionRootClientId: root,
-			setInserterIsOpened:
-				getSettings().__experimentalSetIsInserterOpened,
-			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
-		};
-	}, [] );
-
-	const isSelected =
-		hasSelection &&
-		( selectedBlockClientId === previousClientId ||
-			selectedBlockClientId === nextClientId );
-
-	const isHovered =
-		hoveredBlockClientId === previousClientId ||
-		hoveredBlockClientId === nextClientId;
-
+function ZoomOutModeInserterButton( { isVisible, onClick } ) {
 	const [
 		zoomOutModeInserterButtonHovered,
 		setZoomOutModeInserterButtonHovered,
@@ -71,20 +26,10 @@ function ZoomOutModeInserterButton( {
 				'block-editor-button-pattern-inserter__button',
 				'block-editor-block-tools__zoom-out-mode-inserter-button',
 				{
-					'is-visible':
-						isHovered ||
-						isSelected ||
-						zoomOutModeInserterButtonHovered,
+					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
 				}
 			) }
-			onClick={ () => {
-				setInserterIsOpened( {
-					rootClientId: sectionRootClientId,
-					insertionIndex: index,
-					tab: 'patterns',
-					category: 'all',
-				} );
-			} }
+			onClick={ onClick }
 			onMouseOver={ () => {
 				setZoomOutModeInserterButtonHovered( true );
 			} }

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
@@ -14,34 +14,41 @@ import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const { blockOrder, insertionPoint, setInserterIsOpened } = useSelect(
-		( select ) => {
-			const {
-				getSettings,
-				getBlockOrder,
-				getSelectionStart,
-				getSelectedBlockClientId,
-			} = 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(),
-				sectionRootClientId: root,
-				setInserterIsOpened:
-					getSettings().__experimentalSetIsInserterOpened,
-				selectedBlockClientId: getSelectedBlockClientId(),
-			};
-		},
-		[]
-	);
+	const {
+		hasSelection,
+		blockOrder,
+		insertionPoint,
+		setInserterIsOpened,
+		sectionRootClientId,
+		selectedBlockClientId,
+		hoveredBlockClientId,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			getBlockOrder,
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getHoveredBlockClientId,
+		} = 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(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+			selectedBlockClientId: getSelectedBlockClientId(),
+			hoveredBlockClientId: getHoveredBlockClientId(),
+		};
+	}, [] );
 
 	const isMounted = useRef( false );
 
@@ -78,11 +85,23 @@ function ZoomOutModeInserters() {
 			return null;
 		}
 
+		const previousClientId = clientId;
+		const nextClientId = blockOrder[ index ];
+
+		const isSelected =
+			hasSelection &&
+			( selectedBlockClientId === previousClientId ||
+				selectedBlockClientId === nextClientId );
+
+		const isHovered =
+			hoveredBlockClientId === previousClientId ||
+			hoveredBlockClientId === nextClientId;
+
 		return (
 			<BlockPopoverInbetween
 				key={ index }
-				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index ] }
+				previousClientId={ previousClientId }
+				nextClientId={ nextClientId }
 			>
 				{ shouldRenderInsertionPoint && (
 					<div
@@ -98,9 +117,15 @@ function ZoomOutModeInserters() {
 				) }
 				{ shouldRenderInserter && (
 					<ZoomOutModeInserterButton
-						previousClientId={ clientId }
-						nextClientId={ blockOrder[ index ] }
-						index={ index }
+						isVisible={ isSelected || isHovered }
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
 					/>
 				) }
 			</BlockPopoverInbetween>