DataViews Sidebar: Display item count on DataViews sidebar #62028

Souptik2001 · 2024-05-27T13:24:25Z

What?

Display item count on DataViews sidebar.

Why?

As per the issue -

In the Pattern management sidebar each category is represented by a menu item. Inside each menu item is a count indicating how many patterns there are in the category.
Therefore, it would be good to also display that on the "Pages" management sidebar, so that anyone can get the count of each view without visiting it.

How?

Display the page count beside each view.
Acheived by fetching all the pages and then doing a filter using Javascript.

Testing Instructions

Check the screencast below or the steps mentioned -

Go to site-editor.
Go to "Pages".
On the sidebar, you will see that you have the count of each item/view.

Testing Instructions for Keyboard

Screenshots or screencast

There is one problem as you can see in the below video, that the "All Pages" count displays three, that's because it just "All the pages" but inside it, it doesn't display the trash pages, because of which it displays only two items. So, should this be the correct behaviour, or the count should also display 2, or the trash items should also be displayed under all pages.

Screen.Recording.2024-05-27.at.6.mp4

Signed-off-by: Souptik Datta <[email protected]>

…item-count

github-actions · 2024-05-27T13:24:39Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @finitelydope, @jarekmorawski.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: finitelydope, jarekmorawski.

Co-authored-by: Souptik2001 <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-05-27T13:24:51Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Souptik2001! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Souptik2001 · 2024-05-27T13:27:25Z

packages/edit-site/src/components/sidebar-dataviews/use-data-views.js

+export default function useDataViews( postType ) {
+	// Fetch all the posts of the post type.
+	const data = useEntityRecords( 'postType', postType, {
+		per_page: -1,


I am a little skeptical about fetching all the results using -1 like this.
But I am not able to think about any better way. Please suggest if you get any better approach. 🙏

If you just want the total count, did you try looking at totalItems returned by useEntityRecords?

Example:

const { totalItems } = useEntityRecords( 'postType', 'post', { status: [ 'any', 'trash' ] } ) );

useEntityRecords makes a call to the getEntityRecordsTotalItems selector, which returns the count sent via response headers in X-WP-Total when calling getEntityRecords.

Or you call getEntityRecordsTotalItems directly maybe.

Trying something over here with a new route and wp_count_posts

REST API: new endpoint to fetch post counts by post status #66294

jameskoster · 2024-05-28T10:32:13Z

Thanks for the PR :)

There is one problem as you can see in the below video, that the "All Pages" count displays three, that's because it just "All the pages" but inside it, it doesn't display the trash pages, because of which it displays only two items. So, should this be the correct behaviour, or the count should also display 2, or the trash items should also be displayed under all pages.

Good question, I think the count should be representative of the visible records, as it is in wp-admin. So in this case the count on 'All pages' should be 2.

Signed-off-by: Souptik Datta <[email protected]>

Souptik2001 · 2024-05-28T19:30:03Z

Thanks @jameskoster !

I have updated the logic to exclude trash pages count from All Pages view.

Souptik2001 · 2024-05-28T19:31:40Z

packages/edit-site/src/components/sidebar-dataviews/default-views.js

+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_NONE,
+						value: 'trash',
+					},
+				],


Although this filter is not needed for the query which is run to fetch all the pages, because trash is excluded by default, but this needed in the JS filter we are doing here - https://github.com/WordPress/gutenberg/pull/62028/files#diff-67163f722d76f852faaff5a7c0c6046d411846fc118479e62b70273363272d5cR27

Why are we doing JS filtering? IMO, we shouldn't because the REST API can be altered and extended in multiple ways so the only way to get a reliable result is to use the same REST API used in the dataviews.

I need to spend more time with data views, so I can't respond to the above point, but I don't think we need this filter here at all. The resulting filter badge, when clicked, does nothing.

jameskoster · 2024-05-29T13:43:36Z

packages/edit-site/src/components/sidebar-dataviews/dataview-item.js

@@ -51,6 +52,7 @@ export default function DataViewItem( {
 			<SidebarNavigationItem
 				icon={ iconToUse }
 				{ ...linkInfo }
+				suffix={ <span>{ count }</span> }


Is the span needed? 🤔

The span is not needed, but if count is 0 it might mess up with the boolean logic:

gutenberg/packages/edit-site/src/components/sidebar-navigation-item/index.js

Line 56 in e1aaee2

{ 'with-suffix': ! withChevron && suffix },

Passing an object (which the React element <span /> essentially is) will always evaluate to true, bypassing that problem.

But again, the span is not needed. The same can be achieved with a React.Fragment:

Suggested change

suffix={ <span>{ count }</span> }

suffix={ <>{ count }</> }

Alternatively, we'd alter suffix to deal better with 0 values, but this sounds like overkill.

jameskoster · 2024-05-29T13:44:37Z

I left one little comment, but in terms of design this seems good. Just needs a code review :)

ellatrix · 2024-06-25T13:38:25Z

This is an enhancement, so punting to WP 6.7.

jameskoster · 2024-06-26T10:03:13Z

I think this just needs a code review 🙏

jasmussen · 2024-08-06T12:29:31Z

@WordPress/gutenberg-core Would appreciate a review of this one! It might need a rebase at this point, though.

DaniGuardiola

Looks good to me and tests well locally. Needs a rebase, and there are some open conversations pending response @Souptik2001.

I actually tried to perform the rebase myself, but then realized the branch is in a fork and not this repo, so I can't push to it.

jasmussen · 2024-09-10T07:47:07Z

@DaniGuardiola Would you be up for performing this rebase, then pushing to a branch directly in based on the core repo? We can credit the author using this.

ramonjd · 2024-09-10T23:27:43Z

I'm happy to rebase today and implement the suggestion to use totalItems count since I made it 😄

I'll leave it open to make sure @DaniGuardiola is still happy with it, or wants to make further tweaks.

…ord counts

ramonjd · 2024-09-11T03:45:47Z

I have a rebased PR over at #65223 (I also couldn't push to this branch), based on the recent changes to trunk. The PR is essentially the same as this one in terms of functionality.

In my testing, it does expose some inconsistencies and bugs with the filtering:

All pages doesn't include trashed items, but the count does. Should we include trashed items in the default view?

Toggling status filters (and sometimes author filters) crashes the browser. This is from trunk.

Kapture.2024-09-11.at.13.36.40.mp4

…ord counts

ramonjd · 2024-09-11T06:02:39Z

Toggling status filters (and sometimes author filters) crashes the browser.

PR to fix that I think:

#65227

jasmussen · 2024-09-11T07:13:48Z

All pages doesn't include trashed items, but the count does. Should we include trashed items in the default view?

@jameskoster I believed you worked on some mockups here. Any instincts? Mine would be to omit the trashed items from the count.

jameskoster · 2024-09-11T11:47:37Z

Agreed. I left a comment in #65223 to that effect 👍

…ord counts

noisysocks · 2024-09-18T00:01:08Z

Closing this in favour of #65223. Let's remember to props @Souptik2001 for the good work here.

@Souptik2001

This PR pulls across @Souptik2001's work from #62028 and using useEntityRecords to get record counts. It also: - Adds a `navigationItemSuffix` prop to DataViewItem so that consumers can pass a suffix to the SidebarNavigationItem component. - Refactors custom count hook to include default dataviews that it doesn't affect other components Reduce RHS padding Co-authored-by: ramonjd <[email protected]> Co-authored-by: Souptik2001 <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: jasmussen <[email protected]> Unlinked contributors: finitelydope, jarekmorawski.

@Souptik2001

This PR pulls across @Souptik2001's work from WordPress/gutenberg#62028 and using useEntityRecords to get record counts. It also: - Adds a `navigationItemSuffix` prop to DataViewItem so that consumers can pass a suffix to the SidebarNavigationItem component. - Refactors custom count hook to include default dataviews that it doesn't affect other components Reduce RHS padding Co-authored-by: ramonjd <[email protected]> Co-authored-by: Souptik2001 <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: jasmussen <[email protected]> Unlinked contributors: finitelydope, jarekmorawski. Source: WordPress/gutenberg@338940a

Souptik2001 added 2 commits May 27, 2024 18:42

feat: Display item count on dataviews sidebar

1b5531a

Signed-off-by: Souptik Datta <[email protected]>

Merge branch 'WordPress:trunk' into update/dataviews-sidebar-display-…

ce135d9

…item-count

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 27, 2024

Souptik2001 commented May 27, 2024

View reviewed changes

Souptik2001 mentioned this pull request May 27, 2024

Data views: Show total count in menu item #57072

Closed

jameskoster requested review from jorgefilipecosta, youknowriad and oandregal May 28, 2024 10:32

Souptik2001 added 2 commits May 29, 2024 00:41

Merge branch 'trunk' into update/dataviews-sidebar-display-item-count

eb0647f

feat: Remove trash page count on "all pages" view

fb217d1

Signed-off-by: Souptik Datta <[email protected]>

Souptik2001 commented May 28, 2024

View reviewed changes

jameskoster reviewed May 29, 2024

View reviewed changes

jameskoster requested a review from a team May 29, 2024 13:44

akasunil added the [Type] Enhancement A suggestion for improvement. label Jun 20, 2024

jameskoster requested a review from a team June 26, 2024 10:03

jameskoster mentioned this pull request Jul 4, 2024

Tracking issue: Further advancing data views #63128

Closed

46 tasks

DaniGuardiola approved these changes Aug 7, 2024

View reviewed changes

ramonjd added a commit that referenced this pull request Sep 11, 2024

Pulling across work from #62028 and using useEntityRecords to get rec…

1f6ccf6

…ord counts

ramonjd mentioned this pull request Sep 11, 2024

DataViews Sidebar: Display item count on DataViews sidebar #65223

Merged

ramonjd added a commit that referenced this pull request Sep 11, 2024

Pulling across work from #62028 and using useEntityRecords to get rec…

4181091

…ord counts

ramonjd added a commit that referenced this pull request Sep 12, 2024

Pulling across work from #62028 and using useEntityRecords to get rec…

977e0ca

…ord counts

ramonjd added a commit that referenced this pull request Sep 13, 2024

Pulling across work from #62028 and using useEntityRecords to get rec…

2281876

…ord counts

noisysocks closed this Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DataViews Sidebar: Display item count on DataViews sidebar #62028

DataViews Sidebar: Display item count on DataViews sidebar #62028

Souptik2001 commented May 27, 2024 •

edited

Loading

github-actions bot commented May 27, 2024 •

edited

Loading

github-actions bot commented May 27, 2024

Souptik2001 May 27, 2024

ramonjd Jun 27, 2024 •

edited

Loading

ramonjd Oct 22, 2024

jameskoster commented May 28, 2024

Souptik2001 commented May 28, 2024

Souptik2001 May 28, 2024

youknowriad Sep 11, 2024

ramonjd Sep 11, 2024

jameskoster May 29, 2024

tyxla Sep 11, 2024

jameskoster commented May 29, 2024

ellatrix commented Jun 25, 2024

jameskoster commented Jun 26, 2024

jasmussen commented Aug 6, 2024

DaniGuardiola left a comment

jasmussen commented Sep 10, 2024

ramonjd commented Sep 10, 2024

ramonjd commented Sep 11, 2024

ramonjd commented Sep 11, 2024

jasmussen commented Sep 11, 2024

jameskoster commented Sep 11, 2024

noisysocks commented Sep 18, 2024

DataViews Sidebar: Display item count on DataViews sidebar #62028

DataViews Sidebar: Display item count on DataViews sidebar #62028

Conversation

Souptik2001 commented May 27, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented May 27, 2024 • edited Loading

Unlinked Accounts

github-actions bot commented May 27, 2024

Souptik2001 May 27, 2024

Choose a reason for hiding this comment

ramonjd Jun 27, 2024 • edited Loading

Choose a reason for hiding this comment

ramonjd Oct 22, 2024

Choose a reason for hiding this comment

jameskoster commented May 28, 2024

Souptik2001 commented May 28, 2024

Souptik2001 May 28, 2024

Choose a reason for hiding this comment

youknowriad Sep 11, 2024

Choose a reason for hiding this comment

ramonjd Sep 11, 2024

Choose a reason for hiding this comment

jameskoster May 29, 2024

Choose a reason for hiding this comment

tyxla Sep 11, 2024

Choose a reason for hiding this comment

jameskoster commented May 29, 2024

ellatrix commented Jun 25, 2024

jameskoster commented Jun 26, 2024

jasmussen commented Aug 6, 2024

DaniGuardiola left a comment

Choose a reason for hiding this comment

jasmussen commented Sep 10, 2024

ramonjd commented Sep 10, 2024

ramonjd commented Sep 11, 2024

ramonjd commented Sep 11, 2024

jasmussen commented Sep 11, 2024

jameskoster commented Sep 11, 2024

noisysocks commented Sep 18, 2024

Souptik2001 commented May 27, 2024 •

edited

Loading

github-actions bot commented May 27, 2024 •

edited

Loading

ramonjd Jun 27, 2024 •

edited

Loading