[RNMobile] Consolidate inserter block filter (#34545)

* Consolidate inserter block filtering

* Use an array of available embeds

* Update packages/block-editor/src/components/inserter/menu.native.js

Fix typo

Co-authored-by: Carlos Garcia <fluiddot@gmail.com>

* Move allowed block filter to a util file

* Clean up typo and remove unused prop

* Fix default named params

Co-authored-by: jhnstn <jason@readysetandco.com>
Co-authored-by: Carlos Garcia <fluiddot@gmail.com>

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

@@ -10,28 +10,16 @@ import BlockTypesList from '../block-types-list';
 import useClipboardBlock from './hooks/use-clipboard-block';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-
-const NON_BLOCK_CATEGORIES = [ 'reusable' ];
-
-const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+import { filterInserterItems } from './utils';
 
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const clipboardBlock = useClipboardBlock( rootClientId );
 
 	const { blockTypes } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
-
-			const allItems = getInserterItems( rootClientId );
-			const blockItems = allItems.filter(
-				( { id, category } ) =>
-					! NON_BLOCK_CATEGORIES.includes( category ) &&
-					// We don't want to show all possible embed variations
-					// as different blocks in the inserter. We'll only show a
-					// few popular ones.
-					( category !== 'embed' ||
-						( category === 'embed' &&
-							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
+			const blockItems = filterInserterItems(
+				getInserterItems( rootClientId )
 			);
 
 			return {

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

@@ -22,10 +22,9 @@ import InserterSearchResults from './search-results';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
+import { filterInserterItems } from './utils';
 
 const MIN_ITEMS_FOR_SEARCH = 2;
-const REUSABLE_BLOCKS_CATEGORY = 'reusable';
-
 function InserterMenu( {
 	onSelect,
 	onDismiss,
@@ -69,9 +68,9 @@ function InserterMenu( {
 			}
 
 			const allItems = getInserterItems( targetRootClientId );
-			const reusableBlockItems = allItems.filter(
-				( { category } ) => category === REUSABLE_BLOCKS_CATEGORY
-			);
+			const reusableBlockItems = filterInserterItems( allItems, {
+				onlyReusable: true,
+			} );
 
 			return {
 				items: allItems,

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

@@ -8,19 +8,17 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTypesList from '../block-types-list';
 import { store as blockEditorStore } from '../../store';
-
-const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+import { filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 	const { items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
-			const reusableBlockItems = allItems.filter(
-				( { category } ) => category === REUSABLE_BLOCKS_CATEGORY
-			);
 
-			return { items: reusableBlockItems };
+			return {
+				items: filterInserterItems( allItems, { onlyReusable: true } ),
+			};
 		},
 		[ rootClientId ]
 	);

packages/block-editor/src/components/inserter/search-results.native.js

@@ -11,9 +11,7 @@ import BlockTypesList from '../block-types-list';
 import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-
-const NON_BLOCK_CATEGORIES = [ 'reusable' ];
-const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+import { filterInserterItems } from './utils';
 
 function InserterSearchResults( {
 	filterValue,
@@ -28,18 +26,10 @@ function InserterSearchResults( {
 				rootClientId
 			);
 
-			const blockItems = allItems.filter(
-				( { id, category } ) =>
-					! NON_BLOCK_CATEGORIES.includes( category ) &&
-					// We don't want to show all possible embed variations
-					// as different blocks in the inserter. We'll only show a
-					// few popular ones.
-					( category !== 'embed' ||
-						( category === 'embed' &&
-							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
-			);
-
-			const filteredItems = searchItems( blockItems, filterValue );
+			const availableItems = filterInserterItems( allItems, {
+				allowReusable: true,
+			} );
+			const filteredItems = searchItems( availableItems, filterValue );
 
 			return { blockTypes: filteredItems };
 		},

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

@@ -0,0 +1,28 @@
+const REUSABLE_BLOCKS_CATEGORY = 'reusable';
+const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+
+export function blockAllowed( block, { onlyReusable, allowReusable } ) {
+	const { id, category } = block;
+	const isReusable = category === REUSABLE_BLOCKS_CATEGORY;
+
+	if ( onlyReusable ) {
+		return isReusable;
+	}
+
+	if ( isReusable ) {
+		return allowReusable;
+	}
+	// We don't want to show all possible embed variations
+	// as different blocks in the inserter. We'll only show a
+	// few popular ones.
+	return category !== 'embed' || ALLOWED_EMBED_VARIATIONS.includes( id );
+}
+
+export function filterInserterItems(
+	items,
+	{ onlyReusable = false, allowReusable = false } = {}
+) {
+	return items.filter( ( block ) =>
+		blockAllowed( block, { onlyReusable, allowReusable } )
+	);
+}