diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js index 1e12d6706d81b5..1a96fdc0591439 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js +++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js @@ -27,6 +27,7 @@ export default function DataViewItem( { isActive, isCustom, suffix, + navigationItemSuffix, } ) { const { params: { postType }, @@ -55,6 +56,7 @@ export default function DataViewItem( { { title } diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 0a9debe7631e4f..842bc14376ff36 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -24,7 +24,6 @@ import { LAYOUT_TABLE, LAYOUT_GRID, OPERATOR_IS_ANY, - OPERATOR_IS_NONE, } from '../../utils/constants'; export const defaultLayouts = { @@ -69,15 +68,18 @@ const DEFAULT_POST_BASE = { layout: defaultLayouts[ LAYOUT_LIST ].layout, }; -function useDataViewItemCounts( { postType } ) { +export function useDefaultViewsWithItemCounts( { postType } ) { + const defaultViews = useDefaultViews( { postType } ); const { records, totalItems } = useEntityRecords( 'postType', postType, { per_page: -1, status: [ 'any', 'trash' ], } ); + return useMemo( () => { - if ( ! records ) { - return {}; + if ( ! records || ! defaultViews ) { + return []; } + const counts = { all: totalItems, drafts: records.filter( ( record ) => record.status === 'draft' ) @@ -94,8 +96,17 @@ function useDataViewItemCounts( { postType } ) { trash: records.filter( ( record ) => record.status === 'trash' ) .length, }; - return counts; - }, [ records, totalItems ] ); + + // Filter out views with > 0 item counts. + return defaultViews + .map( ( _view ) => { + if ( counts?.[ _view.slug ] > 0 ) { + _view.count = counts[ _view.slug ]; + } + return _view; + } ) + .filter( ( view ) => !! view.count ); + }, [ defaultViews, records, totalItems ] ); } export function useDefaultViews( { postType } ) { @@ -103,7 +114,6 @@ export function useDefaultViews( { postType } ) { ( select ) => select( coreStore ).getPostType( postType )?.labels, [ postType ] ); - const counts = useDataViewItemCounts( { postType } ); return useMemo( () => { return [ @@ -111,17 +121,7 @@ export function useDefaultViews( { postType } ) { title: labels?.all_items || __( 'All items' ), slug: 'all', icon: pages, - view: { - ...DEFAULT_POST_BASE, - filters: [ - { - field: 'status', - operator: OPERATOR_IS_NONE, - value: 'trash', - }, - ], - }, - count: counts?.all, + view: DEFAULT_POST_BASE, }, { title: __( 'Published' ), @@ -137,7 +137,6 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.published, }, { title: __( 'Scheduled' ), @@ -153,7 +152,6 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.future, }, { title: __( 'Drafts' ), @@ -169,7 +167,6 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.drafts, }, { title: __( 'Pending' ), @@ -185,7 +182,6 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.pending, }, { title: __( 'Private' ), @@ -201,7 +197,6 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.private, }, { title: __( 'Trash' ), @@ -219,8 +214,7 @@ export function useDefaultViews( { postType } ) { }, ], }, - count: counts?.trash, }, ]; - }, [ labels, counts ] ); + }, [ labels ] ); } diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index b4f3010e3bbef3..3f7f5b965fce71 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/index.js +++ b/packages/edit-site/src/components/sidebar-dataviews/index.js @@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import { useDefaultViews } from './default-views'; +import { useDefaultViewsWithItemCounts } from './default-views'; import { unlock } from '../../lock-unlock'; import DataViewItem from './dataview-item'; import CustomDataViewsList from './custom-dataviews-list'; @@ -18,7 +18,9 @@ export default function DataViewsSidebarContent() { const { params: { postType, activeView = 'all', isCustom = 'false' }, } = useLocation(); - const defaultViews = useDefaultViews( { postType } ); + + const defaultViews = useDefaultViewsWithItemCounts( { postType } ); + if ( ! postType ) { return null; } @@ -34,7 +36,9 @@ export default function DataViewsSidebarContent() { slug={ dataview.slug } title={ dataview.title } icon={ dataview.icon } - suffix={ { dataview.count } } + navigationItemSuffix={ + { dataview.count } + } type={ dataview.view.type } isActive={ ! isCustomBoolean && diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss index 14e6bf1d03fca8..3473c8e20e1a45 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/style.scss +++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss @@ -15,6 +15,10 @@ min-width: initial; } + .edit-site-sidebar-navigation-item.with-suffix { + padding-right: $grid-unit-10; + } + &:hover, &:focus, &[aria-current] {