Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation panel: Add search to content menus #27280

Merged
merged 20 commits into from
Feb 9, 2021
Merged

Navigation panel: Add search to content menus #27280

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
8eabc5a
Add search to content menus
david-szabo97 Nov 25, 2020
aa403d3
Add debounced search hook
david-szabo97 Jan 11, 2021
3763736
Debounce search in posts menu
david-szabo97 Jan 11, 2021
5dd0194
Fix errors when items is null
david-szabo97 Jan 11, 2021
ab05739
Add debounced search to categories
david-szabo97 Jan 11, 2021
0e993fd
Add debouned search to pages
david-szabo97 Jan 11, 2021
ca9db07
Fix clicking on content search result doing nothing
david-szabo97 Jan 20, 2021
82fe63f
Check if request is resolved
david-szabo97 Jan 20, 2021
36712a3
Hide "no results" when debouncing or loading data
david-szabo97 Jan 20, 2021
980d7da
Cleanup
david-szabo97 Jan 20, 2021
01e5731
Fix pages search
david-szabo97 Jan 20, 2021
96f57bd
Add no title
david-szabo97 Jan 20, 2021
40336e1
Add debouncing to categories
david-szabo97 Jan 28, 2021
bed56e4
Fix categories search
david-szabo97 Jan 28, 2021
eed8c0b
Put results that contains the title on top of the list
david-szabo97 Jan 28, 2021
6849679
Disable filtering for server-side filtered items
david-szabo97 Jan 28, 2021
28a5ffd
Fix client side filtering
david-szabo97 Feb 4, 2021
7942cee
Fix loading text disappearing too early
david-szabo97 Feb 4, 2021
758453d
Rename noFilter to disableFilter
david-szabo97 Feb 4, 2021
1ca70c5
Merge branch 'master' into add/navigation-panel-content-search
david-szabo97 Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,5 @@ export const MENU_TEMPLATES = 'templates';
export const MENU_TEMPLATES_ALL = 'templates-all';
export const MENU_TEMPLATES_PAGES = 'templates-pages';
export const MENU_TEMPLATES_POSTS = 'templates-posts';

export const SEARCH_DEBOUNCE_IN_MS = 75;
41 changes: 41 additions & 0 deletions ...s/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* WordPress dependencies
*/
import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
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( () => {
const { type, slug, link, id } = item;
setPage( {
type,
slug,
path: getPathAndQueryString( link ),
context: {
postType: type,
postId: id,
},
} );
}, [ setPage, item ] );

if ( ! item ) {
return null;
}

return (
<NavigationItem
className="edit-site-navigation-panel__content-item"
item={ `${ item.taxonomy || item.type }-${ item.id }` }
title={ getTitle( item ) || __( '(no title)' ) }
onClick={ onActivateItem }
/>
);
}
68 changes: 65 additions & 3 deletions .../edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,85 @@
/**
* WordPress dependencies
*/
import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
import {
__experimentalNavigationMenu as NavigationMenu,
__experimentalNavigationItem as NavigationItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
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';
import useDebouncedSearch from '../use-debounced-search';

export default function ContentCategoriesMenu() {
const {
search,
searchQuery,
onSearch,
isDebouncing,
} = useDebouncedSearch();

const { categories, isResolved } = useSelect(
( select ) => {
const { getEntityRecords, hasFinishedResolution } = select(
'core'
);
const getEntityRecordsArgs = [
'taxonomy',
'category',
{
search: searchQuery,
},
];
const hasResolvedPosts = hasFinishedResolution(
'getEntityRecords',
getEntityRecordsArgs
);
return {
categories: getEntityRecords( ...getEntityRecordsArgs ),
isResolved: hasResolvedPosts,
};
},
[ searchQuery ]
);

const shouldShowLoadingForDebouncing = search && isDebouncing;
const showLoading = ! isResolved || shouldShowLoadingForDebouncing;

return (
<NavigationMenu
menu={ MENU_CONTENT_CATEGORIES }
title={ __( 'Categories' ) }
parentMenu={ MENU_ROOT }
hasSearch={ true }
onSearch={ onSearch }
search={ search }
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
isSearchDebouncing={ isDebouncing || ! isResolved }
>
<NavigationEntityItems kind="taxonomy" name="category" />
{ search && ! isDebouncing && (
<SearchResults
items={ categories }
search={ search }
disableFilter
/>
) }

{ ! search &&
categories?.map( ( category ) => (
<ContentNavigationItem
item={ category }
key={ `${ category.taxonomy }-${ category.id }` }
/>
) ) }

{ showLoading && (
<NavigationItem title={ __( 'Loading…' ) } isText />
) }
</NavigationMenu>
);
}
68 changes: 65 additions & 3 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,85 @@
/**
* WordPress dependencies
*/
import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
import {
__experimentalNavigationMenu as NavigationMenu,
__experimentalNavigationItem as NavigationItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
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';
import useDebouncedSearch from '../use-debounced-search';

export default function ContentPagesMenu() {
const {
search,
searchQuery,
onSearch,
isDebouncing,
} = useDebouncedSearch();

const { pages, isResolved } = useSelect(
( select ) => {
const { getEntityRecords, hasFinishedResolution } = select(
'core'
);
const getEntityRecordsArgs = [
'postType',
'page',
{
search: searchQuery,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as my remark for posts below: https://github.com/WordPress/gutenberg/pull/27280/files#r563820929

},
];
const hasResolvedPosts = hasFinishedResolution(
'getEntityRecords',
getEntityRecordsArgs
);
return {
pages: getEntityRecords( ...getEntityRecordsArgs ),
isResolved: hasResolvedPosts,
};
},
[ searchQuery ]
);

const shouldShowLoadingForDebouncing = search && isDebouncing;
const showLoading = ! isResolved || shouldShowLoadingForDebouncing;

return (
<NavigationMenu
menu={ MENU_CONTENT_PAGES }
title={ __( 'Pages' ) }
parentMenu={ MENU_ROOT }
hasSearch={ true }
onSearch={ onSearch }
search={ search }
isSearchDebouncing={ isDebouncing || ! isResolved }
>
<NavigationEntityItems kind="postType" name="page" />
{ search && ! isDebouncing && (
<SearchResults
items={ pages }
search={ search }
disableFilter
/>
) }

{ ! search &&
pages?.map( ( page ) => (
<ContentNavigationItem
item={ page }
key={ `${ page.type }-${ page.id }` }
/>
) ) }

{ showLoading && (
<NavigationItem title={ __( 'Loading…' ) } isText />
) }
</NavigationMenu>
);
}
90 changes: 75 additions & 15 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,57 @@ import {
__experimentalNavigationMenu as NavigationMenu,
__experimentalNavigationItem as NavigationItem,
} from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { 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';
import useDebouncedSearch from '../use-debounced-search';

export default function ContentPostsMenu() {
const showOnFront = useSelect(
( select ) =>
select( 'core' ).getEditedEntityRecord( 'root', 'site' )
.show_on_front,
[]
const {
search,
searchQuery,
onSearch,
isDebouncing,
} = useDebouncedSearch();

const { posts, showOnFront, isResolved } = useSelect(
( select ) => {
const {
getEntityRecords,
getEditedEntityRecord,
hasFinishedResolution,
} = select( 'core' );
const getEntityRecodsArgs = [
'postType',
'post',
{
search: searchQuery,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that this will implicitly search the content of the posts too. My expectation was that the search will only be applied to post titles so as to make it consistent with existing template searching, but this might make sense too. What do you all think? 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My expectation was that the search will only be applied to post titles so as to make it consistent with existing template searching, but this might make sense too.

Same thought here. While I would expect it the component to search only by titles, returning results for some matching content may be nice! Although if we go with that we should probably ensure the results are prioritized with those matching titles to show up first.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I know, there is no way to search only in the title. Is there? 🤔 We might need to come up with a custom endpoint if we want to search by title only or do the prioritization.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think its a bad thing that we search content, its a feature not a bug! However, I do have a complaint about how it orders things. The results seem to be ordered based on the date of the post. So if I am look for 'example', the posts with the word 'example' in their title show up after more recent posts that have the word 'example' in their content:

Screen Shot 2021-01-27 at 7 30 10 PM

I guess my recommendation would be to sort the results such that results with titles corresponding to the search are at the top.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pushed a commit which puts results with titles at the top.

},
];
const hasResolvedPosts = hasFinishedResolution(
'getEntityRecords',
getEntityRecodsArgs
);
return {
posts: getEntityRecords( ...getEntityRecodsArgs ),
isResolved: hasResolvedPosts,
showOnFront: getEditedEntityRecord( 'root', 'site' )
.show_on_front,
};
},
[ searchQuery ]
);

const { setPage } = useDispatch( 'core/edit-site' );

const onActivateFrontItem = () => {
const onActivateFrontItem = useCallback( () => {
setPage( {
type: 'page',
path: '/',
Expand All @@ -33,22 +64,51 @@ export default function ContentPostsMenu() {
queryContext: { page: 1 },
},
} );
};
}, [ setPage ] );

const shouldShowLoadingForDebouncing = search && isDebouncing;
const showLoading = ! isResolved || shouldShowLoadingForDebouncing;

return (
<NavigationMenu
menu={ MENU_CONTENT_POSTS }
title={ __( 'Posts' ) }
parentMenu={ MENU_ROOT }
hasSearch={ true }
onSearch={ onSearch }
search={ search }
isSearchDebouncing={ isDebouncing || ! isResolved }
>
{ showOnFront === 'posts' && (
<NavigationItem
item={ 'content-/' }
title={ __( 'All Posts' ) }
onClick={ onActivateFrontItem }
{ search && ! isDebouncing && (
<SearchResults
items={ posts }
search={ search }
disableFilter
/>
) }
<NavigationEntityItems kind="postType" name="post" />

{ ! search && (
<>
{ showOnFront === 'posts' && (
<NavigationItem
item={ 'post-/' }
title={ __( 'All Posts' ) }
onClick={ onActivateFrontItem }
/>
) }
Comment on lines +93 to +99
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All Posts is not included in the search results. Should we also include this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine to omit it. Furthermore I'm not sure if we should be displaying it in posts menu anyway since it sounds more like page template to me. This should probably be reserved just for individual posts and not a collection of them.


{ posts?.map( ( post ) => (
<ContentNavigationItem
item={ post }
key={ `${ post.type }-${ post.id }` }
/>
) ) }
</>
) }

{ showLoading && (
<NavigationItem title={ __( 'Loading…' ) } isText />
) }
</NavigationMenu>
);
}
Loading