Zoom out: try click through to disengage

WordPress · May 10, 2024 · e706baf · e706baf
1 parent b2d3dca
commit e706baf
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -21,8 +21,10 @@ function ZoomOutModeInserters() {
 		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,11 +39,18 @@ function ZoomOutModeInserters() {
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
+			selectedClientId: getSelectedBlockClientId(),
 		};
 	}, [] );
 
 	const isMounted = useRef( false );
 
+	useEffect( () => {
+		if ( selectedClientId && ! blockOrder.includes( selectedClientId ) ) {
+			setInserterIsOpened( { tab: 'blocks' } );
+		}
+	}, [ selectedClientId, blockOrder, setInserterIsOpened ] );
+
 	useEffect( () => {
 		if ( ! isMounted.current ) {
 			isMounted.current = true;

diff --git a/packages/block-editor/src/components/inserter/library.js b/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 }

diff --git a/packages/block-editor/src/components/inserter/menu.js b/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( {

diff --git a/packages/block-editor/src/store/selectors.js b/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,12 @@ export const getBlockEditingMode = createRegistrySelector(
 					sectionRootClientId
 				);
 				if ( ! sectionsClientIds?.includes( clientId ) ) {
-					return 'disabled';
+					return getBlockParents( state, clientId ).some(
+						( parentClientId ) =>
+							isBlockSelected( state, parentClientId )
+					)
+						? 'default'
+						: 'disabled';
 				}
 			}
 

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/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={