diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
new file mode 100644
index 00000000000000..fd8163ec206acd
--- /dev/null
+++ b/packages/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 (
+
+ );
+}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
index f2243940aca5b1..369fddda1409d2 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
+++ b/packages/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 (
-
+ { search && (
+
+ ) }
+
+ { ! search &&
+ categories?.map( ( category ) => (
+
+ ) ) }
+
+ { ! search && categories === null && (
+
+ ) }
);
}
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
index bfa08369f338da..f24c28bff49de5 100644
--- 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 (
-
+ { search && }
+
+ { ! search &&
+ pages?.map( ( page ) => (
+
+ ) ) }
+
+ { ! search && pages === null && (
+
+ ) }
);
}
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
index 79337feed401e7..1e9ad6331dd793 100644
--- 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 (
- { showOnFront === 'posts' && (
-
+ { search && }
+
+ { ! search && (
+ <>
+ { showOnFront === 'posts' && (
+
+ ) }
+
+ { posts?.map( ( post ) => (
+
+ ) ) }
+ >
+ ) }
+
+ { ! search && posts === null && (
+
) }
-
);
}
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
index 39e7b60cb1781c..6b7675ebe4c1ff 100644
--- 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 (
{ map( itemsFiltered, ( item ) => (
-
) ) }