[RNMobile] Add Reusable blocks to the inserter menu

packages/block-editor/src/components/block-types-list/README.md

@@ -24,7 +24,7 @@ Renders a list of blocks types.
 ```jsx
 import { BlockTypesList } from '@wordpress/block-editor';
 
-const MyBlockTypesList = () => <BlockTypesList items={ filteredItems } />;;
+const MyBlockTypesList = () => <BlockTypesList items={ filteredItems } />;
 ```
 
 ### Props
@@ -35,6 +35,25 @@ The blocks that will be displayed in the block list.
 
 -   Type: `Array<Block>`
 -   Required: Yes
+-   Platform: Web | Mobile
+
+#### name
+
+Name of the list to be used as part of component's key.
+
+-   Type: `String`
+-   Required: Yes
+-   Platform: Mobile
+
+#### listProps
+
+Extra `FlatList` props for customizing the list.
+
+On Mobile usually this component is rendered inside `BottomSheet` component, which already [generates these props](<(https://github.com/WordPress/gutenberg/blob/c3c514ba1123be5a7cf881c223c038cfc31b3f59/packages/components/src/mobile/bottom-sheet/index.native.js#L335-L354)>) for this component.
+
+-   Type: `String`
+-   Required: No
+-   Platform: Mobile
 
 ## Related components
 

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

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import {
+	FlatList,
+	View,
+	TouchableWithoutFeedback,
+	Dimensions,
+} from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { BottomSheet, InserterButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const MIN_COL_NUM = 3;
+
+export class BlockTypesList extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onLayout = this.onLayout.bind( this );
+		this.renderItem = this.renderItem.bind( this );
+
+		this.state = {
+			numberOfColumns: MIN_COL_NUM,
+		};
+
+		Dimensions.addEventListener( 'change', this.onLayout );
+	}
+
+	componentWillUnmount() {
+		Dimensions.removeEventListener( 'change', this.onLayout );
+	}
+
+	calculateMinItemWidth( bottomSheetWidth ) {
+		const { paddingLeft, paddingRight } = styles.columnPadding;
+		return (
+			( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) /
+			MIN_COL_NUM
+		);
+	}
+
+	calculateItemWidth() {
+		const {
+			paddingLeft: itemPaddingLeft,
+			paddingRight: itemPaddingRight,
+		} = InserterButton.Styles.modalItem;
+		const { width: itemWidth } = InserterButton.Styles.modalIconWrapper;
+		return itemWidth + itemPaddingLeft + itemPaddingRight;
+	}
+
+	calculateColumnsProperties() {
+		const bottomSheetWidth = BottomSheet.getWidth();
+		const { paddingLeft, paddingRight } = styles.columnPadding;
+		const itemTotalWidth = this.calculateItemWidth();
+		const containerTotalWidth =
+			bottomSheetWidth - ( paddingLeft + paddingRight );
+		const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth );
+
+		if ( numofColumns < MIN_COL_NUM ) {
+			return {
+				numOfColumns: MIN_COL_NUM,
+				itemWidth: this.calculateMinItemWidth( bottomSheetWidth ),
+				maxWidth: containerTotalWidth / MIN_COL_NUM,
+			};
+		}
+		return {
+			numOfColumns: numofColumns,
+			maxWidth: containerTotalWidth / numofColumns,
+		};
+	}
+
+	onLayout() {
+		const {
+			numOfColumns,
+			itemWidth,
+			maxWidth,
+		} = this.calculateColumnsProperties();
+		const numberOfColumns = numOfColumns;
+
+		this.setState( { numberOfColumns, itemWidth, maxWidth } );
+	}
+
+	renderItem( { item } ) {
+		const { itemWidth, maxWidth } = this.state;
+		const { onSelect } = this.props;
+		return (
+			<InserterButton
+				item={ item }
+				itemWidth={ itemWidth }
+				maxWidth={ maxWidth }
+				onSelect={ onSelect }
+			/>
+		);
+	}
+
+	render() {
+		const { name, items, listProps } = this.props;
+		const { numberOfColumns } = this.state;
+
+		return (
+			<FlatList
+				onLayout={ this.onLayout }
+				key={ `InserterUI-${ name }-${ numberOfColumns }` } //re-render when numberOfColumns changes
+				keyboardShouldPersistTaps="always"
+				numColumns={ numberOfColumns }
+				data={ items }
+				ItemSeparatorComponent={ () => (
+					<TouchableWithoutFeedback accessible={ false }>
+						<View style={ styles.rowSeparator } />
+					</TouchableWithoutFeedback>
+				) }
+				keyExtractor={ ( item ) => item.id }
+				renderItem={ this.renderItem }
+				{ ...listProps }
+			/>
+		);
+	}
+}
+
+export default BlockTypesList;

packages/block-editor/src/components/block-types-list/style.native.scss

@@ -0,0 +1,7 @@
+.rowSeparator {
+	height: 12px;
+}
+
+.columnPadding {
+	padding: $grid-unit-20;
+}

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

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableHighlight, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function InserterListItem( {
+	getStylesFromColorScheme,
+	item,
+	itemWidth,
+	maxWidth,
+	onSelect,
+} ) {
+	const onPress = () => {
+		onSelect( item );
+	};
+
+	const iconWrapperStyle = getStylesFromColorScheme(
+		styles.iconWrapper,
+		styles.iconWrapperDark
+	);
+	const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
+	const itemLabelStyle = getStylesFromColorScheme(
+		styles.itemLabel,
+		styles.itemLabelDark
+	);
+
+	const clipboardBlockStyles = getStylesFromColorScheme(
+		styles.clipboardBlock,
+		styles.clipboardBlockDark
+	);
+
+	const isClipboardBlock = item.id === 'clipboard';
+
+	return (
+		<TouchableHighlight
+			style={ styles.touchableArea }
+			underlayColor="transparent"
+			activeOpacity={ 0.5 }
+			accessibilityLabel={ item.title }
+			onPress={ onPress }
+		>
+			<View style={ [ styles.item, { width: maxWidth } ] }>
+				<View
+					style={ [
+						iconWrapperStyle,
+						itemWidth && {
+							width: itemWidth,
+						},
+						isClipboardBlock && clipboardBlockStyles,
+					] }
+				>
+					<View style={ iconStyle }>
+						<Icon
+							icon={ item.icon.src || item.icon }
+							fill={ iconStyle.fill }
+							size={ iconStyle.width }
+						/>
+					</View>
+				</View>
+				<Text style={ itemLabelStyle }>
+					{ isClipboardBlock ? __( 'Copied block' ) : item.title }
+				</Text>
+			</View>
+		</TouchableHighlight>
+	);
+}
+
+function getWidth() {
+	const {
+		paddingLeft: itemPaddingLeft,
+		paddingRight: itemPaddingRight,
+	} = styles.item;
+	const { width: itemWidth } = styles.iconWrapper;
+	return itemWidth + itemPaddingLeft + itemPaddingRight;
+}
+
+const ThemedInserterListItem = withPreferredColorScheme( InserterListItem );
+
+ThemedInserterListItem.getWidth = getWidth;
+
+export default ThemedInserterListItem;

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

@@ -0,0 +1,63 @@
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.item {
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: $grid-unit-20 / 2;
+	padding-right: $grid-unit-20 / 2;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.iconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
+.icon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+	fill: $gray-dark;
+}
+
+.iconDark {
+	fill: $white;
+}
+
+.itemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	font-size: 12;
+	color: $gray-dark;
+}
+
+.itemLabelDark {
+	color: $white;
+}
+
+.clipboardBlock {
+	background-color: transparent;
+	border-width: 1px;
+	border-color: $light-gray-400;
+}
+
+.clipboardBlockDark {
+	border-color: $gray-70;
+}