[Mobile] List V2 Support

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

@@ -469,7 +469,7 @@ class EmptyListComponent extends Component {
 			renderFooterAppender,
 		} = this.props;
 
-		if ( renderFooterAppender ) {
+		if ( renderFooterAppender || renderAppender === false ) {
 			return null;
 		}
 

packages/block-editor/src/components/rich-text/index.native.js

@@ -113,6 +113,7 @@ function RichTextWrapper(
 		setRef,
 		disableSuggestions,
 		disableAutocorrection,
+		containerWidth,
 		...props
 	},
 	forwardedRef
@@ -639,6 +640,7 @@ function RichTextWrapper(
 			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
+			containerWidth={ containerWidth }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap

@@ -97,7 +97,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -277,7 +284,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}

packages/block-library/src/file/test/__snapshots__/edit.native.js.snap

@@ -54,7 +54,14 @@ exports[`File block renders file error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -144,7 +151,14 @@ exports[`File block renders file error state without crashing 1`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -262,7 +276,14 @@ exports[`File block renders file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -334,7 +355,14 @@ exports[`File block renders file without crashing 1`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}

packages/block-library/src/index.native.js

@@ -41,6 +41,7 @@ import * as mediaText from './media-text';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
@@ -75,6 +76,7 @@ export const coreBlocks = [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -179,6 +181,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once List V2 is released on the web editor.
+function listCheck( listBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
+		listBlock.settings = listBlock?.settingsV2;
+	}
+	return listBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,9 +240,11 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +256,8 @@ export const registerCoreBlocks = () => {
 		video,
 		nextpage,
 		separator,
-		list,
+		listCheck( list, blocksFlags ),
+		listItem,
 		quote,
 		mediaText,
 		preformatted,

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

@@ -30,7 +30,7 @@ import {
 } from './hooks';
 import { convertToListItems } from './utils';
 
-function IndentUI( { clientId } ) {
+export function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
 	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
 

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

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSplit, useMerge } from './hooks';
+import { convertToListItems } from './utils';
+import { IndentUI } from './edit.js';
+import styles from './style.scss';
+import ListStyleType from './list-style-type';
+
+export default function ListItemEdit( {
+	attributes,
+	setAttributes,
+	onReplace,
+	clientId,
+	style,
+} ) {
+	const [ contentWidth, setContentWidth ] = useState();
+	const { placeholder, content } = attributes;
+	const {
+		blockIndex,
+		hasInnerBlocks,
+		indentationLevel,
+		numberOfListItems,
+		ordered,
+		reversed,
+		start,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockCount,
+				getBlockIndex,
+				getBlockParentsByBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const currentIdentationLevel = getBlockParentsByBlockName(
+				clientId,
+				'core/list-item',
+				true
+			).length;
+			const currentBlockIndex = getBlockIndex( clientId );
+			const blockWithInnerBlocks = getBlockCount( clientId ) > 0;
+			const rootClientId = getBlockRootClientId( clientId );
+			const blockAttributes = getBlockAttributes( rootClientId );
+			const totalListItems = getBlockCount( rootClientId );
+			const {
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			} = blockAttributes || {};
+
+			return {
+				blockIndex: currentBlockIndex,
+				hasInnerBlocks: blockWithInnerBlocks,
+				indentationLevel: currentIdentationLevel,
+				numberOfListItems: totalListItems,
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
+	} );
+
+	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		setContentWidth( ( prevState ) => {
+			const { width } = nativeEvent.layout;
+
+			if ( ! prevState || prevState.width !== width ) {
+				return Math.floor( width );
+			}
+			return prevState;
+		} );
+	}, [] );
+
+	return (
+		<View style={ styles[ 'wp-block-list-item__list-item-parent' ] }>
+			<View style={ styles[ 'wp-block-list-item__list-item' ] }>
+				<View style={ styles[ 'wp-block-list-item__list-item-icon' ] }>
+					<ListStyleType
+						blockIndex={ blockIndex }
+						indentationLevel={ indentationLevel }
+						numberOfListItems={ numberOfListItems }
+						ordered={ ordered }
+						reversed={ reversed }
+						start={ start }
+						style={ style }
+					/>
+				</View>
+				<View
+					style={ styles[ 'wp-block-list-item__list-item-content' ] }
+					onLayout={ onLayout }
+				>
+					<RichText
+						identifier="content"
+						tagName="p"
+						onChange={ ( nextContent ) =>
+							setAttributes( { content: nextContent } )
+						}
+						value={ content }
+						placeholder={ placeholder || __( 'List' ) }
+						onSplit={ onSplit }
+						onMerge={ onMerge }
+						onReplace={ ( blocks, ...args ) => {
+							onReplace( convertToListItems( blocks ), ...args );
+						} }
+						style={ style }
+						deleteEnter={ true }
+						containerWidth={ contentWidth }
+					/>
+				</View>
+			</View>
+			<View { ...innerBlocksProps }></View>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</View>
+	);
+}

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

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/components';
+
+export const circle = ( size, color ) => (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Rect width={ size } height={ size } rx={ size / 2 } fill={ color } />
+	</SVG>
+);
+
+export const circleOutline = ( size, color ) => (
+	<SVG
+		width={ size }
+		height={ size }
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Rect
+			x="0.5"
+			y="0.5"
+			width={ size - 1 }
+			height={ size - 1 }
+			rx={ size / 2 }
+			stroke={ color }
+		/>
+	</SVG>
+);
+
+export const square = ( size, color ) => (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Rect width={ size } height={ size } fill={ color } />
+	</SVG>
+);