[RNMobile] Flatten inner blocks to fix call stack size exceeded crash

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

@@ -6,9 +6,9 @@ import { View, Platform, Pressable } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useRef, useState, useCallback } from '@wordpress/element';
+import { useRef, useState, useCallback, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 import {
 	KeyboardAwareFlatList,
 	WIDE_ALIGNMENTS,
@@ -69,7 +69,9 @@ export default function BlockList( {
 	withFooter = true,
 } ) {
 	const {
-		blockClientIds,
+		rootBlock,
+		blockOrder,
+		blocks,
 		blockCount,
 		blockInsertionPointIsVisible,
 		isReadOnly,
@@ -78,9 +80,13 @@ export default function BlockList( {
 		isStackedHorizontally,
 		maxWidth,
 		isRTL,
+		hasNestedInnerBlocks,
+		selectedBlockId,
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlock,
+				getBlocks,
 				getBlockCount,
 				getBlockHierarchyRootClientId,
 				getBlockOrder,
@@ -94,20 +100,16 @@ export default function BlockList( {
 				selectedBlockClientId
 			);
 
-			let blockOrder = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-			if ( filterInnerBlocks ) {
-				blockOrder = filterInnerBlocks( blockOrder );
-			}
-
 			const {
 				isRTL: isRTLSetting,
 				maxWidth: maxWidthSetting,
 				readOnly,
 			} = getSettings();
 
 			return {
-				blockClientIds: blockOrder,
+				rootBlock: getBlock( rootClientId ),
+				blockOrder: getBlockOrder( rootClientId ),
+				blocks: getBlocks( rootClientId ),
 				blockCount: getBlockCount(),
 				blockInsertionPointIsVisible:
 					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
@@ -118,11 +120,66 @@ export default function BlockList( {
 				isStackedHorizontally: orientation === 'horizontal',
 				maxWidth: maxWidthSetting,
 				isRTL: isRTLSetting,
+				hasNestedInnerBlocks: getBlocks( rootClientId ).some(
+					( item ) => item.innerBlocks?.length > 0
+				),
+				selectedBlockId: selectedBlockClientId,
 			};
 		},
-		[ filterInnerBlocks, orientation, rootClientId ]
+		[ orientation, rootClientId ]
 	);
 
+	// Calculate ids of blocks to render in the block list.
+	const blockClientIds = useMemo( () => {
+		const blockOrderFiltered = filterInnerBlocks
+			? // Display only blocks that fulfill the condition passed in `filterInnerBlocks` function.
+			  filterInnerBlocks( blockOrder )
+			: blockOrder;
+		const blocksFiltered = blocks.filter( ( item ) =>
+			blockOrderFiltered.includes( item.clientId )
+		);
+
+		// In order to avoid deeply nested structures, try to flatten nested inner blocks.
+		const blocksFlattened = [];
+		const canFlattenInnerBlocks = ( block ) => {
+			const blockType = getBlockType( block.name );
+			return (
+				block.innerBlocks.length > 0 &&
+				// If the block is selected, we render the block as usual.
+				// Otherwise, the group blocks won't be editable.
+				selectedBlockId !== block.clientId &&
+				// `canFlattenInnerBlocks` is a helper that edit component of a blocks can define.
+				// By default, we assume that inner blocks can't be flattened.
+				blockType?.edit?.canFlattenInnerBlocks?.()
+			);
+		};
+		if (
+			hasNestedInnerBlocks &&
+			rootClientId !== undefined &&
+			canFlattenInnerBlocks( rootBlock )
+		) {
+			const flattenInnerBlocks = ( items ) => {
+				return items.forEach( ( item ) =>
+					canFlattenInnerBlocks( item )
+						? flattenInnerBlocks( item.innerBlocks )
+						: blocksFlattened.push( item.clientId )
+				);
+			};
+			flattenInnerBlocks( blocksFiltered );
+			return blocksFlattened;
+		}
+
+		return blockOrderFiltered;
+	}, [
+		filterInnerBlocks,
+		blockOrder,
+		blocks,
+		rootClientId,
+		hasNestedInnerBlocks,
+		selectedBlockId,
+		rootBlock,
+	] );
+
 	const { insertBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const extraData = useRef( {

packages/block-library/src/column/edit.native.js

@@ -239,7 +239,7 @@ function ColumnEditWrapper( props ) {
 	);
 }
 
-export default compose( [
+const ColumnEditWrapperComposed = compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockCount,
@@ -274,3 +274,11 @@ export default compose( [
 	} ),
 	withPreferredColorScheme,
 ] )( ColumnEditWrapper );
+
+// Determines if the block can be removed from the block hierarchy
+// in order to flatten deeply nested inner blocks. If true and the following conditions are met, its inner blocks will be rendered in the parent block.
+// - The block is being rendered as an inner block.
+// - The block is not selected.
+ColumnEditWrapperComposed.canFlattenInnerBlocks = () => true;
+
+export default ColumnEditWrapperComposed;

packages/block-library/src/group/edit.native.js

@@ -99,7 +99,7 @@ function GroupEdit( {
 	);
 }
 
-export default compose( [
+const GroupEditComposed = compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlock,
@@ -135,3 +135,11 @@ export default compose( [
 	} ),
 	withPreferredColorScheme,
 ] )( GroupEdit );
+
+// Determines if the block can be removed from the block hierarchy
+// in order to flatten deeply nested inner blocks. If true and the following conditions are met, its inner blocks will be rendered in the parent block.
+// - The block is being rendered as an inner block.
+// - The block is not selected.
+GroupEditComposed.canFlattenInnerBlocks = () => true;
+
+export default GroupEditComposed;