Refactor components to hooks

packages/block-editor/src/components/block-list/index.js

@@ -40,7 +40,7 @@ import {
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
 import { unlock } from '../../lock-unlock';
-import MaybeDisableNonMainBlocks from './disable-non-main-blocks';
+import useZoomOutBlockEditingMode from './use-zoom-out-block-editing-mode';
 
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
@@ -121,9 +121,10 @@ function Root( { className, ...settings } ) {
 		settings
 	);
 
+	useZoomOutBlockEditingMode();
+
 	return (
 		<IntersectionObserver.Provider value={ intersectionObserver }>
-			<MaybeDisableNonMainBlocks />
 			<div { ...innerBlocksProps } />
 			{ !! temporarilyEditingAsBlocks && (
 				<StopEditingAsBlocksOnOutsideSelect

packages/block-editor/src/components/block-list/use-zoom-out-block-editing-mode.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
+
+export default function useZoomOutBlockEditingMode() {
+	const { clientId: rootClientId = '' } = useBlockEditContext();
+
+	const { unsetBlockEditingMode, setBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	const { isZoomOutMode, sectionsContainerClientId, sectionsClientIds } =
+		useSelect( ( select ) => {
+			const {
+				__unstableGetEditorMode,
+				getSectionsContainerClientId,
+				getClientIdsOfDescendants,
+			} = select( blockEditorStore );
+
+			// TODO: We need a better API as using the post type
+			// in block editor package is not allowed.
+			const postType = select( 'core/editor' ).getCurrentPostType();
+
+			const _sectionsContainerClientId =
+				getSectionsContainerClientId( postType );
+
+			return {
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+				sectionsContainerClientId: _sectionsContainerClientId,
+				sectionsClientIds: getClientIdsOfDescendants(
+					_sectionsContainerClientId
+				),
+			};
+		}, [] );
+
+	useEffect( () => {
+		if ( isZoomOutMode ) {
+			setBlockEditingMode( rootClientId, 'disabled' );
+			setBlockEditingMode( sectionsContainerClientId, 'contentOnly' );
+			sectionsClientIds.forEach( ( clientId ) => {
+				setBlockEditingMode( clientId, 'default' );
+			} );
+
+			return () => {
+				sectionsClientIds.forEach( ( clientId ) => {
+					unsetBlockEditingMode( clientId );
+				} );
+				unsetBlockEditingMode( sectionsContainerClientId );
+				unsetBlockEditingMode( rootClientId );
+			};
+		}
+	}, [
+		isZoomOutMode,
+		rootClientId,
+		sectionsContainerClientId,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		...sectionsClientIds,
+		setBlockEditingMode,
+		unsetBlockEditingMode,
+	] );
+}