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 ) && (