DataViews Sidebar: Display item count on DataViews sidebar (#65223)

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 <ramonopoly@git.wordpress.org>
Co-authored-by: Souptik2001 <souptik@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

Unlinked contributors: finitelydope, jarekmorawski.

Source: WordPress/gutenberg@338940a

build/edit-site/index.js

@@ -37925,6 +37925,47 @@ const DEFAULT_POST_BASE = {
   fields: ['title', 'author', 'status'],
   layout: defaultLayouts[LAYOUT_LIST].layout
 };
+function useDefaultViewsWithItemCounts({
+  postType
+}) {
+  const defaultViews = useDefaultViews({
+    postType
+  });
+  const {
+    records,
+    totalItems
+  } = (0,external_wp_coreData_namespaceObject.useEntityRecords)('postType', postType, {
+    per_page: -1,
+    status: ['any', 'trash']
+  });
+  return (0,external_wp_element_namespaceObject.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]);
+}
 function useDefaultViews({
   postType
 }) {
@@ -44338,7 +44379,8 @@ function DataViewItem({
   icon,
   isActive,
   isCustom,
-  suffix
+  suffix,
+  navigationItemSuffix
 }) {
   const {
     params: {
@@ -44364,6 +44406,7 @@ function DataViewItem({
     children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SidebarNavigationItem, {
       icon: iconToUse,
       ...linkInfo,
+      suffix: navigationItemSuffix,
       "aria-current": isActive ? 'true' : undefined,
       children: title
     }), suffix]
@@ -45066,7 +45109,7 @@ function DataViewsSidebarContent() {
       isCustom = 'false'
     }
   } = sidebar_dataviews_useLocation();
-  const defaultViews = useDefaultViews({
+  const defaultViews = useDefaultViewsWithItemCounts({
     postType
   });
   if (!postType) {
@@ -45080,6 +45123,9 @@ function DataViewsSidebarContent() {
           slug: dataview.slug,
           title: dataview.title,
           icon: dataview.icon,
+          navigationItemSuffix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("span", {
+            children: dataview.count
+          }),
           type: dataview.view.type,
           isActive: !isCustomBoolean && dataview.slug === activeView,
           isCustom: false

build/edit-site/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-core-commands', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-patterns', 'wp-plugins', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-priority-queue', 'wp-private-apis', 'wp-router', 'wp-url', 'wp-warning', 'wp-widgets'), 'version' => '9cb7f3a9241519faebc7');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-core-commands', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-patterns', 'wp-plugins', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-priority-queue', 'wp-private-apis', 'wp-router', 'wp-url', 'wp-warning', 'wp-widgets'), 'version' => 'a3fea22a2a3b02100829');

gutenberg.php

@@ -14,7 +14,7 @@
 
 ### BEGIN AUTO-GENERATED DEFINES
 define( 'GUTENBERG_VERSION', '19.2.0' );
-define( 'GUTENBERG_GIT_COMMIT', '07c6a1faf3319d69f036c1161d6faad91a7fffe8' );
+define( 'GUTENBERG_GIT_COMMIT', '338940a77d5b9152f276e5ec31db01b4ba2d7332' );
 ### END AUTO-GENERATED DEFINES
 defined( 'GUTENBERG_MINIMUM_WP_VERSION' ) or define( 'GUTENBERG_MINIMUM_WP_VERSION', '6.5' );