[RNMobile] Add Reusable blocks to the inserter menu

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

@@ -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/1ca1fe0c64dfe1a385221399fc94b0fb14f34199/packages/components/src/mobile/bottom-sheet/index.native.js#L355-L372)>) 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,100 @@
+/**
+ * External dependencies
+ */
+import {
+	FlatList,
+	View,
+	TouchableWithoutFeedback,
+	Dimensions,
+} from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { BottomSheet, InserterButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const MIN_COL_NUM = 3;
+
+export default function BlockTypesList( { name, items, onSelect, listProps } ) {
+	const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );
+	const [ itemWidth, setItemWidth ] = useState();
+	const [ maxWidth, setMaxWidth ] = useState();
+
+	useEffect( () => {
+		Dimensions.addEventListener( 'change', onLayout );
+		onLayout();
+		return () => {
+			Dimensions.removeEventListener( 'change', onLayout );
+		};
+	}, [] );
+
+	function calculateItemWidth() {
+		const {
+			paddingLeft: itemPaddingLeft,
+			paddingRight: itemPaddingRight,
+		} = InserterButton.Styles.modalItem;
+		const { width } = InserterButton.Styles.modalIconWrapper;
+		return width + itemPaddingLeft + itemPaddingRight;
+	}
+
+	function onLayout() {
+		const columnStyle = styles[ 'block-types-list__column' ];
+		const sumLeftRightPadding =
+			columnStyle.paddingLeft + columnStyle.paddingRight;
+
+		const bottomSheetWidth = BottomSheet.getWidth();
+		const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;
+		const itemTotalWidth = calculateItemWidth();
+
+		const columnsFitToWidth = Math.floor(
+			containerTotalWidth / itemTotalWidth
+		);
+
+		const numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );
+
+		setNumberOfColumns( numColumns );
+		setMaxWidth( containerTotalWidth / numColumns );
+
+		if ( columnsFitToWidth < MIN_COL_NUM ) {
+			const updatedItemWidth =
+				( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;
+			setItemWidth( updatedItemWidth );
+		}
+	}
+
+	return (
+		<FlatList
+			onLayout={ onLayout }
+			key={ `InserterUI-${ name }-${ numberOfColumns }` } //re-render when numberOfColumns changes
+			keyboardShouldPersistTaps="always"
+			numColumns={ numberOfColumns }
+			data={ items }
+			initialNumToRender={ 3 }
+			ItemSeparatorComponent={ () => (
+				<TouchableWithoutFeedback accessible={ false }>
+					<View
+						style={ styles[ 'block-types-list__row-separator' ] }
+					/>
+				</TouchableWithoutFeedback>
+			) }
+			keyExtractor={ ( item ) => item.id }
+			renderItem={ ( { item } ) => (
+				<InserterButton
+					{ ...{
+						item,
+						itemWidth,
+						maxWidth,
+						onSelect,
+					} }
+				/>
+			) }
+			{ ...listProps }
+		/>
+	);
+}

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

@@ -0,0 +1,7 @@
+.block-types-list__row-separator {
+	height: 12px;
+}
+
+.block-types-list__column {
+	padding: $grid-unit-20;
+}

packages/block-editor/src/components/inserter/block-types-tab.native.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesList from '../block-types-list';
+import useClipboardBlock from './hooks/use-clipboard-block';
+import { store as blockEditorStore } from '../../store';
+
+const NON_BLOCK_CATEGORIES = [ 'reusable' ];
+
+function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
+	const clipboardBlock = useClipboardBlock( rootClientId );
+
+	const { items } = useSelect(
+		( select ) => {
+			const { getInserterItems } = select( blockEditorStore );
+
+			const allItems = getInserterItems( rootClientId );
+			const blockItems = allItems.filter(
+				( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category )
+			);
+
+			return {
+				items: clipboardBlock
+					? [ clipboardBlock, ...blockItems ]
+					: blockItems,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	return (
+		<BlockTypesList
+			name="Blocks"
+			items={ items }
+			onSelect={ onSelect }
+			listProps={ listProps }
+		/>
+	);
+}
+
+export default BlockTypesTab;

packages/block-editor/src/components/inserter/hooks/use-clipboard-block.native.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { rawHandler, store as blocksStore } from '@wordpress/blocks';
+import { getClipboard } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default function useClipboardBlock( destinationRootClientId ) {
+	const { canInsertBlockType } = useSelect( blockEditorStore );
+	const { getBlockType } = useSelect( blocksStore );
+
+	const clipboard = getClipboard();
+	const clipboardBlock = rawHandler( { HTML: clipboard } )[ 0 ];
+
+	const canAddClipboardBlock = canInsertBlockType(
+		clipboardBlock?.name,
+		destinationRootClientId
+	);
+
+	if ( ! canAddClipboardBlock ) {
+		return undefined;
+	}
+
+	const { icon, name } = getBlockType( clipboardBlock.name );
+	const { attributes: initialAttributes, innerBlocks } = clipboardBlock;
+
+	return {
+		id: 'clipboard',
+		name,
+		icon,
+		initialAttributes,
+		innerBlocks,
+	};
+}