Put results that contains the title on top of the list

packages/edit-site/src/components/navigation-sidebar/navigation-panel/search-results.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import { map, sortBy, keyBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,16 +61,17 @@ export default function SearchResults( { items, search } ) {
 		},
 		[ items, itemType ]
 	);
+	const itemInfosMap = useMemo( () => keyBy( itemInfos, 'slug' ), [
+		itemInfos,
+	] );
 
 	const itemsFiltered = useMemo( () => {
 		if ( items === null || search.length === 0 ) {
 			return [];
 		}
 
 		return items.filter( ( { slug } ) => {
-			const { title, description } = itemInfos.find(
-				( info ) => info.slug === slug
-			);
+			const { title, description } = itemInfosMap[ slug ];
 
 			return (
 				normalizedSearch( slug, search ) ||
@@ -80,14 +81,27 @@ export default function SearchResults( { items, search } ) {
 		} );
 	}, [ items, itemInfos, search ] );
 
+	const itemsSorted = useMemo( () => {
+		if ( ! itemsFiltered ) {
+			return [];
+		}
+
+		return sortBy( itemsFiltered, [
+			( { slug } ) => {
+				const { title } = itemInfosMap[ slug ];
+				return ! normalizedSearch( title, search );
+			},
+		] );
+	}, [ itemsFiltered, search ] );
+
 	const ItemComponent =
 		itemType === 'wp_template' || itemType === 'wp_template_part'
 			? TemplateNavigationItem
 			: ContentNavigationItem;
 
 	return (
 		<NavigationGroup title={ __( 'Search results' ) }>
-			{ map( itemsFiltered, ( item ) => (
+			{ map( itemsSorted, ( item ) => (
 				<ItemComponent
 					item={ item }
 					key={ `${ item.taxonomy || item.type }-${ item.id }` }