Zoom out: try click through to disengage

packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
@@ -16,13 +16,16 @@ import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
+	const registry = useRegistry();
 	const {
 		blockOrder,
 		sectionRootClientId,
 		insertionPoint,
 		setInserterIsOpened,
+		selectedClientId,
 	} = useSelect( ( select ) => {
-		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const { getSettings, getBlockOrder, 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
@@ -37,18 +40,34 @@ function ZoomOutModeInserters() {
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
+			selectedClientId: getSelectedBlockClientId(),
 		};
 	}, [] );
 
 	const isMounted = useRef( false );
 
+	useEffect( () => {
+		if ( selectedClientId && ! blockOrder.includes( selectedClientId ) ) {
+			const { tab } = unlock(
+				registry.select( 'core/editor' )
+			).getInsertionPoint();
+			if ( tab ) {
+				setInserterIsOpened( { tab: 'blocks' } );
+			} else {
+				registry
+					.dispatch( blockEditorStore )
+					.__unstableSetEditorMode( 'edit' );
+			}
+		}
+	}, [ selectedClientId, blockOrder, setInserterIsOpened, registry ] );
+
 	useEffect( () => {
 		if ( ! isMounted.current ) {
 			isMounted.current = true;
 			return;
 		}
 		// reset insertion point when the block order changes
-		setInserterIsOpened( true );
+		setInserterIsOpened( { tab: 'patterns' } );
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blockOrder ] );
 

packages/block-editor/src/components/inserter/library.js

@@ -21,6 +21,7 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalInitialTab,
+		__experimentalSetTab,
 		__experimentalInitialCategory,
 		__experimentalFilterValue,
 		__experimentalOnPatternCategorySelection,
@@ -56,6 +57,7 @@ function InserterLibrary(
 				__experimentalOnPatternCategorySelection
 			}
 			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalSetTab={ __experimentalSetTab }
 			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }

packages/block-editor/src/components/inserter/menu.js

@@ -48,7 +48,8 @@ function InserterMenu(
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
 		onClose,
-		__experimentalInitialTab,
+		__experimentalInitialTab: selectedTab = 'blocks',
+		__experimentalSetTab: setSelectedTab,
 		__experimentalInitialCategory,
 	},
 	ref
@@ -67,9 +68,6 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState(
-		__experimentalInitialTab
-	);
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {

packages/block-editor/src/hooks/use-zoom-out.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 
+let originalEditingMode = null;
+
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
  *
@@ -18,29 +20,25 @@ export function useZoomOut( zoomOut = true ) {
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
 
-	const originalEditingMode = useRef( null );
-	const mode = __unstableGetEditorMode();
-
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingMode.current ) {
-			originalEditingMode.current = mode;
-		}
+		originalEditingMode = __unstableGetEditorMode();
 
 		return () => {
 			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if ( __unstableGetEditorMode() !== originalEditingMode.current ) {
-				__unstableSetEditorMode( originalEditingMode.current );
+			if ( __unstableGetEditorMode() !== originalEditingMode ) {
+				__unstableSetEditorMode( originalEditingMode );
 			}
 		};
 	}, [] );
 
 	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
 	useEffect( () => {
+		const mode = __unstableGetEditorMode();
 		if ( zoomOut && mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-		} else if ( ! zoomOut && originalEditingMode.current !== mode ) {
-			__unstableSetEditorMode( originalEditingMode.current );
+		} else if ( ! zoomOut && originalEditingMode !== mode ) {
+			__unstableSetEditorMode( originalEditingMode );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+	}, [ __unstableSetEditorMode, zoomOut ] );
 }

packages/block-editor/src/store/selectors.js

@@ -2800,7 +2800,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 				sectionRootClientId
 			);
 			if ( sectionClientIds?.includes( clientId ) ) {
-				return true;
+				return ! isBlockSelected( state, clientId );
 			}
 		} else if ( clientId && ! getBlockRootClientId( state, clientId ) ) {
 			return true;
@@ -2898,7 +2898,14 @@ export const getBlockEditingMode = createRegistrySelector(
 					sectionRootClientId
 				);
 				if ( ! sectionsClientIds?.includes( clientId ) ) {
-					return 'disabled';
+					if (
+						! isBlockSelected(
+							state,
+							getBlockRootClientId( state, clientId )
+						)
+					) {
+						return 'disabled';
+					}
 				}
 			}
 

packages/editor/src/components/inserter-sidebar/index.js

@@ -63,6 +63,9 @@ export default function InserterSidebar( {
 						insertionPoint.insertionIndex
 					}
 					__experimentalInitialTab={ insertionPoint.tab }
+					__experimentalSetTab={ ( tab ) => {
+						setIsInserterOpened( { tab } );
+					} }
 					__experimentalInitialCategory={ insertionPoint.category }
 					__experimentalFilterValue={ insertionPoint.filterValue }
 					__experimentalOnPatternCategorySelection={