Only enter the zoom-out mode when not in the focus mode

WordPress · Dec 8, 2023 · 5c7ded2 · 5c7ded2
1 parent 0bc014c
commit 5c7ded2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -25,6 +25,7 @@ function InserterLibrary(
 		__experimentalShouldZoomPatterns = false,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onSelectTab,
 	},
 	ref
 ) {
@@ -48,6 +49,7 @@ function InserterLibrary(
 	return (
 		<InserterMenu
 			onSelect={ onSelect }
+			onSelectTab={ onSelectTab }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
 			isAppender={ isAppender }

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
@@ -47,6 +47,7 @@ function InserterMenu(
 		prioritizePatterns,
 		__experimentalOnPatternCategorySelection,
 		__experimentalShouldZoomPatterns = false,
+		onSelectTab,
 	},
 	ref
 ) {
@@ -59,8 +60,6 @@ function InserterMenu(
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
 	const [ selectedTab, setSelectedTab ] = useState( null );
-	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -234,14 +233,8 @@ function InserterMenu(
 			setSelectedPatternCategory( null );
 		}
 
-		// Enter the zoom-out mode when selecting the patterns tab and exit otherwise.
-		if ( value === 'patterns' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-		} else if ( __unstableGetEditorMode() === 'zoom-out' ) {
-			__unstableSetEditorMode( 'edit' );
-		}
-
 		setSelectedTab( value );
+		onSelectTab?.( value );
 	};
 
 	const className = classnames( 'block-editor-inserter__menu', {

diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -3,19 +3,28 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import {
+	__experimentalLibrary as Library,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { useHasEditorCanvasContainer } from '../editor-canvas-container';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function InserterSidebar() {
 	const { closeGeneralSidebar, setIsInserterOpened } =
@@ -24,6 +33,17 @@ export default function InserterSidebar() {
 		( select ) => select( editSiteStore ).__experimentalGetInsertionPoint(),
 		[]
 	);
+	const isFocusMode = useSelect( ( select ) =>
+		FOCUSABLE_ENTITIES.includes(
+			select( editSiteStore ).getEditedPostType()
+		)
+	);
+	const { __unstableSetEditorMode: setEditorMode } =
+		useDispatch( blockEditorStore );
+	const { __unstableGetEditorMode: getEditorMode } =
+		useSelect( blockEditorStore );
+	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
+	const location = useLocation();
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	const TagName = ! isMobile ? VisuallyHidden : 'div';
@@ -45,6 +65,32 @@ export default function InserterSidebar() {
 		libraryRef.current.focusSearch();
 	}, [] );
 
+	const handleSelectTab = useCallback(
+		( tab ) => {
+			// Only enter the zoom-out mode when it's not in the focus mode.
+			if ( ! hasEditorCanvasContainer && ! isFocusMode ) {
+				// Enter the zoom-out mode when selecting the patterns tab and exit otherwise.
+				if ( tab === 'patterns' ) {
+					setEditorMode( 'zoom-out' );
+				} else if ( getEditorMode() === 'zoom-out' ) {
+					setEditorMode( 'edit' );
+				}
+			}
+		},
+		[ getEditorMode, setEditorMode, isFocusMode, hasEditorCanvasContainer ]
+	);
+
+	const previousLocationRef = useRef( location );
+	useEffect(
+		function closeInserterOnNavigate() {
+			if ( location !== previousLocationRef.current ) {
+				previousLocationRef.current = location;
+				setIsInserterOpened( false );
+			}
+		},
+		[ location, setIsInserterOpened ]
+	);
+
 	return (
 		<div
 			ref={ inserterDialogRef }
@@ -72,6 +118,7 @@ export default function InserterSidebar() {
 					}
 					__experimentalShouldZoomPatterns
 					ref={ libraryRef }
+					onSelectTab={ handleSelectTab }
 				/>
 			</div>
 		</div>