Add search to content menus

WordPress · Nov 25, 2020 · ba283b4 · ba283b4
1 parent 54b6de8
commit ba283b4
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 26 deletions.
diff --git a/...s/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/...s/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { getPathAndQueryString } from '@wordpress/url';
+
+const getTitle = ( entity ) =>
+	entity.taxonomy ? entity.name : entity?.title?.rendered;
+
+export default function ContentNavigationItem( { item } ) {
+	const { setPage } = useDispatch( 'core/edit-site' );
+
+	const onActivateItem = useCallback(
+		( { type, slug, link, id } ) => {
+			setPage( {
+				type,
+				slug,
+				path: getPathAndQueryString( link ),
+				context: {
+					postType: type,
+					postId: id,
+				},
+			} );
+		},
+		[ setPage ]
+	);
+
+	if ( ! item ) {
+		return null;
+	}
+
+	return (
+		<NavigationItem
+			className="edit-site-navigation-panel__content-item"
+			item={ `${ item.taxonomy || item.type }-${ item.id }` }
+			title={ getTitle( item ) }
+			onClick={ onActivateItem }
+		/>
+	);
+}
diff --git a/.../edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js b/.../edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
@@ -1,23 +1,59 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
+import {
+	__experimentalNavigationMenu as NavigationMenu,
+	__experimentalNavigationItem as NavigationItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import NavigationEntityItems from '../navigation-entity-items';
 import { MENU_CONTENT_CATEGORIES, MENU_ROOT } from '../constants';
+import ContentNavigationItem from '../content-navigation-item';
+import SearchResults from '../search-results';
 
 export default function ContentCategoriesMenu() {
+	const [ search, setSearch ] = useState( '' );
+	const onSearch = useCallback( ( value ) => {
+		setSearch( value );
+	} );
+
+	const categories = useSelect(
+		( select ) =>
+			select( 'core' ).getEntityRecords( 'taxonomy', 'category', {
+				per_page: -1,
+			} ),
+		[]
+	);
+
 	return (
 		<NavigationMenu
 			menu={ MENU_CONTENT_CATEGORIES }
 			title={ __( 'Categories' ) }
 			parentMenu={ MENU_ROOT }
+			hasSearch={ true }
+			onSearch={ onSearch }
+			search={ search }
 		>
-			<NavigationEntityItems kind="taxonomy" name="category" />
+			{ search && (
+				<SearchResults items={ categories } search={ search } />
+			) }
+
+			{ ! search &&
+				categories?.map( ( category ) => (
+					<ContentNavigationItem
+						item={ category }
+						key={ `${ category.taxonomy }-${ category.id }` }
+					/>
+				) ) }
+
+			{ ! search && categories === null && (
+				<NavigationItem title={ __( 'Loading…' ) } isText />
+			) }
 		</NavigationMenu>
 	);
 }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-pages.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-pages.js
@@ -1,23 +1,57 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
+import {
+	__experimentalNavigationMenu as NavigationMenu,
+	__experimentalNavigationItem as NavigationItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import NavigationEntityItems from '../navigation-entity-items';
 import { MENU_CONTENT_PAGES, MENU_ROOT } from '../constants';
+import ContentNavigationItem from '../content-navigation-item';
+import SearchResults from '../search-results';
 
 export default function ContentPagesMenu() {
+	const [ search, setSearch ] = useState( '' );
+	const onSearch = useCallback( ( value ) => {
+		setSearch( value );
+	} );
+
+	const pages = useSelect(
+		( select ) =>
+			select( 'core' ).getEntityRecords( 'postType', 'page', {
+				per_page: -1,
+			} ),
+		[]
+	);
+
 	return (
 		<NavigationMenu
 			menu={ MENU_CONTENT_PAGES }
 			title={ __( 'Pages' ) }
 			parentMenu={ MENU_ROOT }
+			hasSearch={ true }
+			onSearch={ onSearch }
+			search={ search }
 		>
-			<NavigationEntityItems kind="postType" name="page" />
+			{ search && <SearchResults items={ pages } search={ search } /> }
+
+			{ ! search &&
+				pages?.map( ( page ) => (
+					<ContentNavigationItem
+						item={ page }
+						key={ `${ page.type }-${ page.id }` }
+					/>
+				) ) }
+
+			{ ! search && pages === null && (
+				<NavigationItem title={ __( 'Loading…' ) } isText />
+			) }
 		</NavigationMenu>
 	);
 }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js
@@ -5,26 +5,36 @@ import {
 	__experimentalNavigationMenu as NavigationMenu,
 	__experimentalNavigationItem as NavigationItem,
 } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import NavigationEntityItems from '../navigation-entity-items';
 import { MENU_CONTENT_POSTS, MENU_ROOT } from '../constants';
+import ContentNavigationItem from '../content-navigation-item';
+import SearchResults from '../search-results';
 
 export default function ContentPostsMenu() {
-	const showOnFront = useSelect(
-		( select ) =>
-			select( 'core' ).getEditedEntityRecord( 'root', 'site' )
-				.show_on_front,
-		[]
-	);
+	const [ search, setSearch ] = useState( '' );
+	const onSearch = useCallback( ( value ) => {
+		setSearch( value );
+	} );
+
+	const { posts, showOnFront } = useSelect( ( select ) => {
+		const { getEntityRecords, getEditedEntityRecord } = select( 'core' );
+		return {
+			posts: getEntityRecords( 'postType', 'post', {
+				per_page: -1,
+			} ),
+			showOnFront: getEditedEntityRecord( 'root', 'site' ).show_on_front,
+		};
+	}, [] );
 
 	const { setPage } = useDispatch( 'core/edit-site' );
 
-	const onActivateFrontItem = () => {
+	const onActivateFrontItem = useCallback( () => {
 		setPage( {
 			type: 'page',
 			path: '/',
@@ -33,22 +43,41 @@ export default function ContentPostsMenu() {
 				queryContext: { page: 1 },
 			},
 		} );
-	};
+	}, [ setPage ] );
 
 	return (
 		<NavigationMenu
 			menu={ MENU_CONTENT_POSTS }
 			title={ __( 'Posts' ) }
 			parentMenu={ MENU_ROOT }
+			hasSearch={ true }
+			onSearch={ onSearch }
+			search={ search }
 		>
-			{ showOnFront === 'posts' && (
-				<NavigationItem
-					item={ 'content-/' }
-					title={ __( 'All Posts' ) }
-					onClick={ onActivateFrontItem }
-				/>
+			{ search && <SearchResults items={ posts } search={ search } /> }
+
+			{ ! search && (
+				<>
+					{ showOnFront === 'posts' && (
+						<NavigationItem
+							item={ 'post-/' }
+							title={ __( 'All Posts' ) }
+							onClick={ onActivateFrontItem }
+						/>
+					) }
+
+					{ posts?.map( ( post ) => (
+						<ContentNavigationItem
+							item={ post }
+							key={ `${ post.type }-${ post.id }` }
+						/>
+					) ) }
+				</>
+			) }
+
+			{ ! search && posts === null && (
+				<NavigationItem title={ __( 'Loading…' ) } isText />
 			) }
-			<NavigationEntityItems kind="postType" name="post" />
 		</NavigationMenu>
 	);
 }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/search-results.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/search-results.js
@@ -16,9 +16,17 @@ import { __ } from '@wordpress/i18n';
 import { normalizedSearch } from './utils';
 import { useSelect } from '@wordpress/data';
 import TemplateNavigationItem from './template-navigation-item';
+import ContentNavigationItem from './content-navigation-item';
 
 export default function SearchResults( { items, search } ) {
-	const itemType = items?.length > 0 ? items[ 0 ].type : null;
+	let itemType = null;
+	if ( items.length > 0 ) {
+		if ( items[ 0 ].taxonomy ) {
+			itemType = 'taxonomy';
+		} else {
+			itemType = items[ 0 ].type;
+		}
+	}
 
 	const itemInfos = useSelect(
 		( select ) => {
@@ -33,6 +41,14 @@ export default function SearchResults( { items, search } ) {
 				} ) );
 			}
 
+			if ( itemType === 'taxonomy' ) {
+				return items.map( ( item ) => ( {
+					slug: item.slug,
+					title: item.name,
+					description: item.description,
+				} ) );
+			}
+
 			return items.map( ( item ) => ( {
 				slug: item.slug,
 				title: item.title?.rendered,
@@ -60,12 +76,17 @@ export default function SearchResults( { items, search } ) {
 		} );
 	}, [ items, itemInfos, search ] );
 
+	const ItemComponent =
+		itemType === 'wp_template' || itemType === 'wp_template_part'
+			? TemplateNavigationItem
+			: ContentNavigationItem;
+
 	return (
 		<NavigationGroup title={ __( 'Search results' ) }>
 			{ map( itemsFiltered, ( item ) => (
-				<TemplateNavigationItem
+				<ItemComponent
 					item={ item }
-					key={ `${ item.type }-${ item.id }` }
+					key={ `${ item.taxonomy || item.type }-${ item.id }` }
 				/>
 			) ) }
 		</NavigationGroup>