[Mobile] - Add BlockListCompact (#43431)

* Mobile - Introduce BlockListCompact - Lighter version of the default BlockList with simpler functionality for use cases like the List V2 block

* Mobile - Update List V2 tests since it's not needed to fire the layout event change with the BlockListCompact component

* Mobile - BlockListCompact - Add note of the component props and which block is currently using it

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

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+	const {
+		marginHorizontal = styles.defaultBlock.marginLeft,
+		marginVertical = styles.defaultBlock.marginTop,
+		rootClientId,
+	} = props;
+	const { blockClientIds } = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			const blockOrder = getBlockOrder( rootClientId );
+
+			return {
+				blockClientIds: blockOrder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const containerStyle = {
+		marginVertical: -marginVertical,
+		marginHorizontal: -marginHorizontal,
+	};
+
+	return (
+		<View style={ containerStyle }>
+			{ blockClientIds.map( ( currentClientId ) => (
+				<BlockListBlock
+					clientId={ currentClientId }
+					key={ currentClientId }
+					marginHorizontal={ marginHorizontal }
+					marginVertical={ marginVertical }
+				/>
+			) ) }
+		</View>
+	);
+}
+
+export default BlockListCompact;

packages/block-editor/src/components/inner-blocks/index.native.js

@@ -21,6 +21,7 @@ import getBlockContext from './get-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
+		useCompactList,
 	} = props;
 
 	const block = useSelect(
@@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
+	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
+
 	let blockList = (
-		<BlockList
+		<BlockListComponent
 			marginVertical={ marginVertical }
 			marginHorizontal={ marginHorizontal }
 			rootClientId={ clientId }

packages/block-library/src/list-item/edit.native.js

@@ -86,7 +86,7 @@ export default function ListItemEdit( {
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
-		renderAppender: false,
+		useCompactList: true,
 	} );
 
 	const onSplit = useSplit( clientId );

packages/block-library/src/list/test/edit.native.js

@@ -119,20 +119,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
@@ -180,61 +166,18 @@ describe( 'List V2 block', () => {
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
 
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 2/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
 		const secondNestedLevelBlock = within(
 			firstNestedLevelBlock
 		).getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( secondNestedLevelBlock ).getByTestId(
-				'block-list-wrapper'
-			),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -256,20 +199,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
@@ -300,60 +229,19 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 1/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
 		const innerBlockList = within( firstNestedLevelBlock ).getByA11yLabel(
 			/List Block\. Row 1/
 		);
 
-		fireEvent(
-			within( innerBlockList ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		// Select nested List Item block
 		const listItemBlock = within( innerBlockList ).getByA11yLabel(
 			/List item Block\. Row 1/
@@ -386,20 +274,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -428,20 +302,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -481,20 +341,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list

packages/block-library/src/list/v2/edit.js

@@ -139,6 +139,7 @@ function Edit( { attributes, setAttributes, clientId, style } ) {
 		...( Platform.isNative && {
 			marginVertical: NATIVE_MARGIN_SPACING,
 			marginHorizontal: NATIVE_MARGIN_SPACING,
+			useCompactList: true,
 		} ),
 	} );
 	useMigrateOnLoad( attributes, clientId );