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 ) => ( - ) ) }