Introduce section container selection when assembling patterns (zoom out mode)

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

@@ -31,6 +31,8 @@ import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
 } from './private-actions';
+import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1432,16 +1434,30 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select } ) => {
-		// When switching to zoom-out mode, we need to select the root block
+	( { dispatch, select, registry } ) => {
+		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			if ( firstSelectedClientId ) {
-				dispatch.selectBlock(
-					select.getBlockHierarchyRootClientId(
+			const { sectionRootClientId } = unlock(
+				registry.select( STORE_NAME ).getSettings()
+			);
+			if ( sectionRootClientId ) {
+				const sectionClientIds =
+					select.getBlockOrder( sectionRootClientId );
+				if ( sectionClientIds ) {
+					const parents = select.getBlockParents(
 						firstSelectedClientId
-					)
+					);
+					const firstSectionClientId = parents.find( ( parent ) =>
+						sectionClientIds.includes( parent )
+					);
+					dispatch.selectBlock( firstSectionClientId );
+				}
+			} else if ( firstSelectedClientId ) {
+				const rootClientId = select.getBlockHierarchyRootClientId(
+					firstSelectedClientId
 				);
+				dispatch.selectBlock( rootClientId );
 			}
 		}
 

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

@@ -2814,11 +2814,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 	const editorMode = __unstableGetEditorMode( state );
 
 	// In zoom-out mode, the block overlay is always active for top level blocks.
-	if (
-		editorMode === 'zoom-out' &&
-		clientId &&
-		! getBlockRootClientId( state, clientId )
-	) {
+	if ( editorMode === 'zoom-out' && clientId ) {
 		return true;
 	}
 
@@ -2891,6 +2887,26 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 export const getBlockEditingMode = createRegistrySelector(
 	( select ) =>
 		( state, clientId = '' ) => {
+			// In zoom-out mode, override the behavior set by
+			// __unstableSetBlockEditingMode to only allow editing the top-level
+			// sections.
+			const editorMode = __unstableGetEditorMode( state );
+			if ( editorMode === 'zoom-out' ) {
+				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
+					return 'disabled';
+				}
+
+				const { sectionRootClientId } = unlock( getSettings( state ) );
+				if ( clientId === sectionRootClientId ) {
+					return 'contentOnly';
+				}
+
+				const sectionsClientIds = getBlockOrder( state );
+				if ( sectionsClientIds.includes( clientId ) ) {
+					return 'default';
+				}
+			}
+
 			const blockEditingMode = state.blockEditingModes.get( clientId );
 			if ( blockEditingMode ) {
 				return blockEditingMode;

packages/editor/src/components/provider/index.js

@@ -163,11 +163,11 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			},
 			[]
 		);
-		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
 			editorSettings,
-			type,
-			id
+			rootLevelPost.type,
+			rootLevelPost.id,
+			post.type
 		);
 		const [ blocks, onInput, onChange ] = useBlockEditorProps(
 			post,
@@ -262,7 +262,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ mode === 'template-locked' && (
 								<DisableNonPageContentBlocks />
 							) }
-							{ type === 'wp_navigation' && (
+							{ rootLevelPost.type === 'wp_navigation' && (
 								<NavigationBlockEditingMode />
 							) }
 							<BlockRemovalWarnings />

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -12,15 +12,18 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useViewportMatch } from '@wordpress/compose';
 import { store as blocksStore } from '@wordpress/blocks';
-import { privateApis } from '@wordpress/block-editor';
+import {
+	privateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import { lock, unlock } from '../../lock-unlock';
 
 const EMPTY_BLOCKS_LIST = [];
 
@@ -85,13 +88,14 @@ const BLOCK_EDITOR_SETTINGS = [
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
- * @param {Object} settings EditorProvider settings prop.
- * @param {string} postType Editor root level post type.
- * @param {string} postId   Editor root level post ID.
+ * @param {Object} settings        EditorProvider settings prop.
+ * @param {string} postType        Editor root level post type.
+ * @param {string} postId          Editor root level post ID.
+ * @param {string} contextPostType The post type of the edited post.
  *
  * @return {Object} Block Editor Settings.
  */
-function useBlockEditorSettings( settings, postType, postId ) {
+function useBlockEditorSettings( settings, postType, postId, contextPostType ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		allowRightClickOverrides,
@@ -108,6 +112,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		pageForPosts,
 		userPatternCategories,
 		restBlockPatternCategories,
+		sectionRootClientId,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -119,10 +124,31 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
 			const { getBlockTypes } = select( blocksStore );
+			const { getBlocksByName, getBlockAttributes } =
+				select( blockEditorStore );
 			const siteSettings = canUser( 'read', 'settings' )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
+			function getSectionRootBlock() {
+				if ( ! contextPostType ) {
+					return null;
+				}
+
+				if ( [ 'post', 'page' ].includes( contextPostType ) ) {
+					return (
+						getBlocksByName( 'core/post-content' )?.[ 0 ] ?? null
+					);
+				}
+
+				return (
+					getBlocksByName( 'core/group' ).find(
+						( clientId ) =>
+							getBlockAttributes( clientId )?.tagName === 'main'
+					) ?? null
+				);
+			}
+
 			return {
 				allowRightClickOverrides: get(
 					'core',
@@ -146,9 +172,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
 				restBlockPatternCategories: getBlockPatternCategories(),
+				sectionRootClientId: getSectionRootBlock(),
 			};
 		},
-		[ postType, postId, isLargeViewport ]
+		[ postType, postId, isLargeViewport, contextPostType ]
 	);
 
 	const settingsBlockPatterns =
@@ -230,8 +257,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 
 	const forceDisableFocusMode = settings.focusMode === false;
 
-	return useMemo(
-		() => ( {
+	return useMemo( () => {
+		const blockEditorSettings = {
 			...Object.fromEntries(
 				Object.entries( settings ).filter( ( [ key ] ) =>
 					BLOCK_EDITOR_SETTINGS.includes( key )
@@ -278,30 +305,34 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
-		} ),
-		[
-			allowedBlockTypes,
-			allowRightClickOverrides,
-			focusMode,
-			forceDisableFocusMode,
-			hasFixedToolbar,
-			isDistractionFree,
-			keepCaretInsideBlock,
-			settings,
-			hasUploadPermissions,
-			userPatternCategories,
-			blockPatterns,
-			blockPatternCategories,
-			canUseUnfilteredHTML,
-			undo,
-			createPageEntity,
-			userCanCreatePages,
-			pageOnFront,
-			pageForPosts,
-			postType,
-			setIsInserterOpened,
-		]
-	);
+		};
+		lock( blockEditorSettings, {
+			sectionRootClientId,
+		} );
+		return blockEditorSettings;
+	}, [
+		allowedBlockTypes,
+		allowRightClickOverrides,
+		focusMode,
+		forceDisableFocusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
+		settings,
+		hasUploadPermissions,
+		userPatternCategories,
+		blockPatterns,
+		blockPatternCategories,
+		canUseUnfilteredHTML,
+		undo,
+		createPageEntity,
+		userCanCreatePages,
+		pageOnFront,
+		pageForPosts,
+		postType,
+		setIsInserterOpened,
+		sectionRootClientId,
+	] );
 }
 
 export default useBlockEditorSettings;