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 1e12d6706d81b..1a96fdc059143 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 658fa319e9c66..20f61e451b21f 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -13,7 +13,7 @@ import { notAllowed, } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; import { useMemo } from '@wordpress/element'; /** @@ -68,6 +68,50 @@ const DEFAULT_POST_BASE = { layout: defaultLayouts[ LAYOUT_LIST ].layout, }; +export function useDefaultViewsWithItemCounts( { postType } ) { + const defaultViews = useDefaultViews( { postType } ); + const { records, totalItems } = useEntityRecords( 'postType', postType, { + per_page: -1, + status: [ 'any', 'trash' ], + } ); + + return useMemo( () => { + if ( ! defaultViews ) { + return []; + } + + // If there are no records, return the default views with no counts. + if ( ! records ) { + return defaultViews; + } + + const counts = { + drafts: records.filter( ( record ) => record.status === 'draft' ) + .length, + future: records.filter( ( record ) => record.status === 'future' ) + .length, + pending: records.filter( ( record ) => record.status === 'pending' ) + .length, + private: records.filter( ( record ) => record.status === 'private' ) + .length, + published: records.filter( + ( record ) => record.status === 'publish' + ).length, + trash: records.filter( ( record ) => record.status === 'trash' ) + .length, + }; + + // All items excluding trashed items as per the default "all" status query. + counts.all = totalItems ? totalItems - counts.trash : 0; + + // Filter out views with > 0 item counts. + return defaultViews.map( ( _view ) => { + _view.count = counts[ _view.slug ]; + return _view; + } ); + }, [ defaultViews, records, totalItems ] ); +} + export function useDefaultViews( { postType } ) { const labels = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 86420c4eec1d1..3f7f5b965fce7 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,6 +36,9 @@ export default function DataViewsSidebarContent() { slug={ dataview.slug } title={ dataview.title } icon={ dataview.icon } + 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 14e6bf1d03fca..3473c8e20e1a4 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] {