Show children of top level main container when in zoomed out view (#…

…56890)
WordPress · Dec 8, 2023 · 3522b1a · 3522b1a
1 parent 55e84f0
commit 3522b1a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -290,6 +290,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						<BlockTitle
 							clientId={ clientId }
 							maximumLength={ 35 }
+							context="list-view"
 						/>
 					</Button>
 				</FlexItem>

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -46,7 +46,7 @@ const defaultRenderToggle = ( {
 			blockTitle
 		);
 	} else if ( ! label && prioritizePatterns ) {
-		label = __( 'Add pattern' );
+		label = __( 'Add section' );
 	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -105,12 +105,17 @@ function ListViewBranch( props ) {
 	const parentBlockInformation = useBlockDisplayInformation( parentId );
 	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
 
-	const canParentExpand = useSelect(
+	const { canParentExpand, getBlockById } = useSelect(
 		( select ) => {
-			if ( ! parentId ) {
-				return true;
-			}
-			return select( blockEditorStore ).canEditBlock( parentId );
+			const { canEditBlock, getBlockParents, getBlockName, getBlock } =
+				select( blockEditorStore );
+
+			return {
+				canParentExpand: canEditBlock( parentId ),
+				getBlocksParents: getBlockParents,
+				getName: getBlockName,
+				getBlockById: getBlock,
+			};
 		},
 		[ parentId ]
 	);
@@ -132,6 +137,10 @@ function ListViewBranch( props ) {
 	return (
 		<>
 			{ filteredBlocks.map( ( block, index ) => {
+				const isContentSection =
+					getBlockById( block.clientId )?.attributes?.tagName ===
+					'main';
+
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
@@ -154,7 +163,8 @@ function ListViewBranch( props ) {
 				const hasNestedBlocks = !! innerBlocks?.length;
 
 				const shouldExpand =
-					hasNestedBlocks && shouldShowInnerBlocks
+					hasNestedBlocks &&
+					( shouldShowInnerBlocks || isContentSection )
 						? expandedState[ clientId ] ?? isExpanded
 						: undefined;
 
@@ -221,6 +231,7 @@ function ListViewBranch( props ) {
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
 								isSyncedBranch={ syncedBranch }
+								shouldShowInnerBlocks={ shouldShowInnerBlocks }
 							/>
 						) }
 					</AsyncModeProvider>

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2846,9 +2846,14 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 
 	// In zoom-out mode, the block overlay is always active for top level blocks.
 	if (
-		editorMode === 'zoom-out' &&
-		clientId &&
-		! getBlockRootClientId( state, clientId )
+		( editorMode === 'zoom-out' &&
+			clientId &&
+			! getBlockRootClientId( state, clientId ) &&
+			! getBlock( state, clientId )?.attributes?.tagName === 'main' ) ||
+		getBlockParents( state, clientId )?.find(
+			( parentId ) =>
+				getBlock( state, parentId )?.attributes?.tagName === 'main'
+		)
 	) {
 		return true;
 	}