Editor: Combine selectors in the 'Header' component (#68697)

* Editor: Combine selectors in the 'Header' component * Combine selectors in the 'InserterMenu' component Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Jan 16, 2025 · 9f7d7dc · 9f7d7dc
1 parent 74986ed
commit 9f7d7dc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -54,15 +54,17 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
-	const hasSectionRootClientId = useSelect(
-		( select ) =>
-			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
-		[]
-	);
+	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
+		const { isZoomOut, getSectionRootClientId } = unlock(
+			select( blockEditorStore )
+		);
+
+		return {
+			isZoomOutMode: isZoomOut(),
+			hasSectionRootClientId: !! getSectionRootClientId(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -68,28 +68,32 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		hasBlockSelection,
+		hasSectionRootClientId,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
 			getEditorMode,
 			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
+		const { getBlockSelectionStart, getSectionRootClientId } = unlock(
+			select( blockEditorStore )
+		);
 
 		return {
 			postType: getCurrentPostType(),
 			isTextEditor: getEditorMode() === 'text',
 			isPublishSidebarOpened: _isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
+			hasBlockSelection: !! getBlockSelectionStart(),
+			hasSectionRootClientId: !! getSectionRootClientId(),
 		};
 	}, [] );
 
-	const canBeZoomedOut = [ 'post', 'page', 'wp_template' ].includes(
-		postType
-	);
+	const canBeZoomedOut =
+		[ 'post', 'page', 'wp_template' ].includes( postType ) &&
+		hasSectionRootClientId;
 
 	const disablePreviewOption = [
 		NAVIGATION_POST_TYPE,
@@ -107,12 +111,6 @@ function Header( {
 				( ! hasBlockSelection || isBlockToolsCollapsed ) ) );
 	const hasBackButton = useHasBackButton();
 
-	const hasSectionRootClientId = useSelect(
-		( select ) =>
-			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
-		[]
-	);
-
 	/*
 	 * The edit-post-header classname is only kept for backward compatibility
 	 * as some plugins might be relying on its presence.
@@ -180,11 +178,9 @@ function Header( {
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 
-				{ canBeZoomedOut &&
-					isWideViewport &&
-					hasSectionRootClientId && (
-						<ZoomOutToggle disabled={ forceDisableBlockTools } />
-					) }
+				{ isWideViewport && canBeZoomedOut && (
+					<ZoomOutToggle disabled={ forceDisableBlockTools } />
+				) }
 
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />