diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 019a37bffdde26..f1e387c5a59634 100644
--- 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
index d0af73e7dcb0ca..b32fda6d031b14 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -68,6 +68,7 @@ function Header( {
showIconLabels,
hasFixedToolbar,
hasBlockSelection,
+ hasSectionRootClientId,
} = useSelect( ( select ) => {
const { get: getPreference } = select( preferencesStore );
const {
@@ -75,6 +76,9 @@ function Header( {
getCurrentPostType,
isPublishSidebarOpened: _isPublishSidebarOpened,
} = select( editorStore );
+ const { getBlockSelectionStart, getSectionRootClientId } = unlock(
+ select( blockEditorStore )
+ );
return {
postType: getCurrentPostType(),
@@ -82,14 +86,14 @@ function Header( {
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 && (
-
- ) }
+ { isWideViewport && canBeZoomedOut && (
+
+ ) }
{ ( isWideViewport || ! showIconLabels ) && (