[RNMobile] Update Inserter Block Search Styling

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function InserterNoResults() {
+	const {
+		'inserter-search-no-results__container': containerStyle,
+		'inserter-search-no-results__text-primary': textPrimaryBaseStyle,
+		'inserter-search-no-results__text-primary--dark': textPrimaryDarkStyle,
+		'inserter-search-no-results__text-secondary': textSecondaryBaseStyle,
+		'inserter-search-no-results__text-secondary--dark': textSecondaryDarkStyle,
+	} = styles;
+	const textPrimaryStyle = usePreferredColorSchemeStyle(
+		textPrimaryBaseStyle,
+		textPrimaryDarkStyle
+	);
+	const textSecondaryStyle = usePreferredColorSchemeStyle(
+		textSecondaryBaseStyle,
+		textSecondaryDarkStyle
+	);
+
+	return (
+		<View>
+			<View style={ containerStyle }>
+				<Text style={ textPrimaryStyle }>
+					{ __( 'No blocks found' ) }
+				</Text>
+				<Text style={ textSecondaryStyle }>
+					{ __( 'Try another search term' ) }
+				</Text>
+			</View>
+		</View>
+	);
+}
+
+export default InserterNoResults;

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

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { searchItems } from './search-items';
 import BlockTypesList from '../block-types-list';
+import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 
 function InserterSearchResults( {
@@ -28,6 +29,10 @@ function InserterSearchResults( {
 		[ rootClientId, filterValue ]
 	);
 
+	if ( ! items || items?.length === 0 ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<BlockTypesList name="Blocks" { ...{ items, onSelect, listProps } } />
 	);

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

@@ -13,6 +13,42 @@
 	padding-top: 8;
 }
 
+.inserter-search-results__column {
+	padding: $grid-unit-20;
+}
+
+.inserter-search-results__row-separator {
+	height: 12px;
+}
+
+.inserter-search-results__list {
+	padding-bottom: 20px;
+	padding-top: 8px;
+}
+
+.inserter-search-no-results__container {
+	margin-top: 60px;
+	align-items: center;
+}
+
+.inserter-search-no-results__text-primary {
+	font-size: 16px;
+	color: $light-primary;
+}
+
+.inserter-search-no-results__text-primary--dark {
+	color: $dark-primary;
+}
+
+.inserter-search-no-results__text-secondary {
+	font-size: 14px;
+	color: $light-secondary;
+}
+
+.inserter-search-no-results__text-secondary--dark {
+	color: $dark-secondary;
+}
+
 .inserter-tabs__wrapper {
 	overflow: hidden;
 }

packages/components/src/index.native.js

@@ -103,6 +103,7 @@ export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
+export { default as Gridicons } from './mobile/gridicons';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';

packages/components/src/mobile/gridicons/index.native.js

@@ -22,3 +22,15 @@ export const refresh = fromPathData24x24(
 export const empty = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
 );
+
+export const search = fromPathData24x24(
+	'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z'
+);
+
+export default {
+	empty,
+	posts,
+	pages,
+	refresh,
+	search,
+};