Add native support for Inserter (Ported from gutenberg-mobile) (#16114)

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

@@ -20,6 +20,7 @@ export { default as BlockInvalidWarning } from './block-list/block-invalid-warni
 
 // Content Related Components
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as Inserter } from './inserter';
 
 // State Related Components
 export { default as BlockEditorProvider } from './provider';

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { FlatList, Text, TouchableHighlight, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet, Icon } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+class Inserter extends Component {
+	calculateNumberOfColumns() {
+		const bottomSheetWidth = BottomSheet.getWidth();
+		const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } = styles.modalItem;
+		const { paddingLeft: containerPaddingLeft, paddingRight: containerPaddingRight } = styles.content;
+		const { width: itemWidth } = styles.modalIconWrapper;
+		const itemTotalWidth = itemWidth + itemPaddingLeft + itemPaddingRight;
+		const containerTotalWidth = bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
+		return Math.floor( containerTotalWidth / itemTotalWidth );
+	}
+
+	render() {
+		const numberOfColumns = this.calculateNumberOfColumns();
+		const bottomPadding = this.props.addExtraBottomPadding && styles.contentBottomPadding;
+
+		return (
+			<BottomSheet
+				isVisible={ true }
+				onClose={ this.props.onDismiss }
+				contentStyle={ [ styles.content, bottomPadding ] }
+				hideHeader
+			>
+				<FlatList
+					scrollEnabled={ false }
+					key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
+					keyboardShouldPersistTaps="always"
+					numColumns={ numberOfColumns }
+					data={ this.props.items }
+					ItemSeparatorComponent={ () =>
+						<View style={ styles.rowSeparator } />
+					}
+					keyExtractor={ ( item ) => item.name }
+					renderItem={ ( { item } ) =>
+						<TouchableHighlight
+							style={ styles.touchableArea }
+							underlayColor="transparent"
+							activeOpacity={ .5 }
+							accessibilityLabel={ item.title }
+							onPress={ () => this.props.onValueSelected( item.name ) }>
+							<View style={ styles.modalItem }>
+								<View style={ styles.modalIconWrapper }>
+									<View style={ styles.modalIcon }>
+										<Icon icon={ item.icon.src } fill={ styles.modalIcon.fill } size={ styles.modalIcon.width } />
+									</View>
+								</View>
+								<Text style={ styles.modalItemLabel }>{ item.title }</Text>
+							</View>
+						</TouchableHighlight>
+					}
+				/>
+			</BottomSheet>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select, { clientId, isAppender, rootClientId } ) => {
+		const {
+			getInserterItems,
+			getBlockRootClientId,
+			getBlockSelectionEnd,
+		} = select( 'core/block-editor' );
+
+		let destinationRootClientId = rootClientId;
+		if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
+			const end = getBlockSelectionEnd();
+			if ( end ) {
+				destinationRootClientId = getBlockRootClientId( end ) || undefined;
+			}
+		}
+		const inserterItems = getInserterItems( destinationRootClientId );
+
+		return {
+			items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
+		};
+	} ),
+] )( Inserter );

packages/block-editor/src/components/inserter/style.native.scss

@@ -0,0 +1,57 @@
+/** @format */
+
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.content {
+	padding: 0 0 0 0;
+	align-items: center;
+	justify-content: space-evenly;
+}
+
+.contentBottomPadding {
+	padding-bottom: 20px;
+}
+
+.rowSeparator {
+	height: 12px;
+}
+
+.modalItem {
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-left: 8;
+	padding-right: 8;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.modalIconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIcon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+	fill: $gray-dark;
+}
+
+.modalItemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	font-size: 12;
+	color: $gray-dark;
+}

packages/blocks/src/api/index.native.js

@@ -21,8 +21,12 @@ export {
 	getUnregisteredTypeHandlerName,
 	getBlockType,
 	getBlockTypes,
+	getBlockSupport,
 	hasBlockSupport,
 	isReusableBlock,
+	getChildBlockNames,
+	hasChildBlocks,
+	hasChildBlocksWithInserterSupport,
 	setDefaultBlockName,
 	getDefaultBlockName,
 } from './registration';