Implement list block in React Native

packages/block-editor/src/components/block-edit/index.js

@@ -31,12 +31,13 @@ class BlockEdit extends Component {
 	}
 
 	static getDerivedStateFromProps( props ) {
-		const { clientId, name, isSelected } = props;
+		const { clientId, name, isSelected, onFocus } = props;
 
 		return {
 			name,
 			isSelected,
 			clientId,
+			onFocus,
 		};
 	}
 

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

@@ -31,6 +31,8 @@ import { isURL } from '@wordpress/url';
  */
 import FormatEdit from './format-edit';
 import FormatToolbar from './format-toolbar';
+import { withBlockEditContext } from '../block-edit/context';
+import { ListEdit } from './list-edit';
 
 import styles from './style.scss';
 
@@ -70,8 +72,19 @@ const gutenbergFormatNamesToAztec = {
 };
 
 export class RichText extends Component {
-	constructor() {
+	constructor( { multiline } ) {
 		super( ...arguments );
+
+		this.isMultiline = false;
+		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
+			this.multilineTag = multiline === true ? 'p' : multiline;
+			this.isMultiline = true;
+		}
+
+		if ( this.multilineTag === 'li' ) {
+			this.multilineWrapperTags = [ 'ul', 'ol' ];
+		}
+
 		this.isIOS = Platform.OS === 'ios';
 		this.onChange = this.onChange.bind( this );
 		this.onEnter = this.onEnter.bind( this );
@@ -501,6 +514,7 @@ export class RichText extends Component {
 			style,
 			formattingControls,
 			isSelected,
+			onTagNameChange,
 		} = this.props;
 
 		const record = this.getRecord();
@@ -522,6 +536,14 @@ export class RichText extends Component {
 
 		return (
 			<View>
+				{ isSelected && this.multilineTag === 'li' && (
+					<ListEdit
+						onTagNameChange={ onTagNameChange }
+						tagName={ tagName }
+						value={ record }
+						onChange={ this.onFormatChange }
+					/>
+				) }
 				{ isSelected && (
 					<BlockFormatControls>
 						<FormatToolbar controls={ formattingControls } />
@@ -561,6 +583,7 @@ export class RichText extends Component {
 					fontWeight={ this.props.fontWeight }
 					fontStyle={ this.props.fontStyle }
 					disableEditingMenu={ this.props.disableEditingMenu }
+					isMultiline={ this.isMultiline }
 				/>
 				{ isSelected && <FormatEdit value={ record } onChange={ this.onFormatChange } /> }
 			</View>
@@ -582,13 +605,46 @@ const RichTextContainer = compose( [
 			formatTypes: getFormatTypes(),
 		};
 	} ),
+	withBlockEditContext( ( context, ownProps ) => {
+		// When explicitly set as not selected, do nothing.
+		if ( ownProps.isSelected === false ) {
+			return {
+				clientId: context.clientId,
+			};
+		}
+		// When explicitly set as selected, use the value stored in the context instead.
+		if ( ownProps.isSelected === true ) {
+			return {
+				isSelected: context.isSelected,
+				clientId: context.clientId,
+			};
+		}
+
+		// Ensures that only one RichText component can be focused.
+		return {
+			clientId: context.clientId,
+			isSelected: context.isSelected,
+			onFocus: context.onFocus,
+		};
+	} ),
 ] )( RichText );
 
-RichTextContainer.Content = ( { value, format, tagName: Tag, ...props } ) => {
+RichTextContainer.Content = ( { value, format, tagName: Tag, multiline, ...props } ) => {
 	let content;
+	let html = value;
+	let MultilineTag;
+
+	if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
+		MultilineTag = multiline === true ? 'p' : multiline;
+	}
+
+	if ( ! html && MultilineTag ) {
+		html = `<${ MultilineTag }></${ MultilineTag }>`;
+	}
+
 	switch ( format ) {
 		case 'string':
-			content = <RawHTML>{ value }</RawHTML>;
+			content = <RawHTML>{ html }</RawHTML>;
 			break;
 	}
 

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

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+
+import { Toolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	indentListItems,
+	outdentListItems,
+	changeListType,
+} from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+
+import BlockFormatControls from '../block-format-controls';
+
+/**
+ * Whether or not the root list is selected.
+ *
+ * @return {boolean} True if the root list or nothing is selected, false if an
+ *                   inner list is selected.
+ */
+function isListRootSelected() {
+	// Consider the root list selected if nothing is selected.
+	return true;
+}
+
+/**
+ * Wether or not the selected list has the given tag name.
+ *
+ * @param {string}  tagName     The tag name the list should have.
+ * @param {string}  rootTagName The current root tag name, to compare with in
+ *                              case nothing is selected.
+ *
+ * @return {boolean}             [description]
+ */
+function isActiveListType( tagName, rootTagName ) {
+	return tagName === rootTagName;
+}
+
+export const ListEdit = ( {
+	onTagNameChange,
+	tagName,
+	value,
+	onChange,
+} ) => (
+	<BlockFormatControls>
+		<Toolbar
+			controls={ [
+				onTagNameChange && {
+					icon: 'editor-ul',
+					title: __( 'Convert to unordered list' ),
+					isActive: isActiveListType( 'ul', tagName ),
+					onClick() {
+						onChange( changeListType( value, { type: 'ul' } ) );
+
+						if ( isListRootSelected() ) {
+							onTagNameChange( 'ul' );
+						}
+					},
+				},
+				onTagNameChange && {
+					icon: 'editor-ol',
+					title: __( 'Convert to ordered list' ),
+					isActive: isActiveListType( 'ol', tagName ),
+					onClick() {
+						onChange( changeListType( value, { type: 'ol' } ) );
+
+						if ( isListRootSelected() ) {
+							onTagNameChange( 'ol' );
+						}
+					},
+				},
+				{
+					icon: 'editor-outdent',
+					title: __( 'Outdent list item' ),
+					onClick: () => {
+						onChange( outdentListItems( value ) );
+					},
+				},
+				{
+					icon: 'editor-indent',
+					title: __( 'Indent list item' ),
+					onClick: () => {
+						onChange( indentListItems( value, { type: tagName } ) );
+					},
+				},
+			].filter( Boolean ) }
+		/>
+	</BlockFormatControls>
+);

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

@@ -15,6 +15,7 @@ import * as more from './more';
 import * as paragraph from './paragraph';
 import * as image from './image';
 import * as nextpage from './nextpage';
+import * as list from './list';
 
 export const registerCoreBlocks = () => {
 	[
@@ -24,6 +25,7 @@ export const registerCoreBlocks = () => {
 		more,
 		image,
 		nextpage,
+		list,
 	].forEach( ( { name, settings } ) => {
 		registerBlockType( name, settings );
 	} );