Templates: Allow browsing by source, grouping all Custom templates

packages/edit-site/src/components/page-templates-template-parts/index.js

@@ -188,6 +188,16 @@ function Preview( { item, viewType } ) {
 	);
 }
 
+function computeFilters( activeView ) {
+	switch ( activeView ) {
+		case 'all':
+			return [];
+
+		default:
+			return [ { field: 'author', operator: 'in', value: activeView } ];
+	}
+}
+
 export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
@@ -199,32 +209,14 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			...DEFAULT_VIEW,
 			type: usedType,
 			layout: defaultConfigPerViewType[ usedType ],
-			filters:
-				activeView !== 'all'
-					? [
-							{
-								field: 'author',
-								operator: 'in',
-								value: activeView,
-							},
-					  ]
-					: [],
+			filters: computeFilters( activeView ),
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
 	useEffect( () => {
 		setView( ( currentView ) => ( {
 			...currentView,
-			filters:
-				activeView !== 'all'
-					? [
-							{
-								field: 'author',
-								operator: 'in',
-								value: activeView,
-							},
-					  ]
-					: [],
+			filters: computeFilters( activeView ),
 		} ) );
 	}, [ activeView ] );
 
@@ -362,15 +354,15 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				if (
 					filter.field === 'author' &&
 					filter.operator === OPERATOR_IN &&
-					!! filter.value
+					filter.value
 				) {
 					filteredData = filteredData.filter( ( item ) => {
 						return item.author_text === filter.value;
 					} );
 				} else if (
 					filter.field === 'author' &&
 					filter.operator === OPERATOR_NOT_IN &&
-					!! filter.value
+					filter.value
 				) {
 					filteredData = filteredData.filter( ( item ) => {
 						return item.author_text !== filter.value;

packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -1,32 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../list/added-by';
-import { layout } from '@wordpress/icons';
-
-const EMPTY_ARRAY = [];
-
-function TemplateDataviewItem( { template, isActive } ) {
-	const { text, icon } = useAddedBy( template.type, template.id );
-	return (
-		<DataViewItem
-			key={ text }
-			slug={ text }
-			title={ text }
-			icon={ icon }
-			isActive={ isActive }
-			isCustom="false"
-		/>
-	);
-}
+import {
+	file as fileIcon,
+	commentAuthorAvatar as customIcon,
+	plugins as pluginIcon,
+} from '@wordpress/icons';
 
 export default function DataviewsTemplatesSidebarContent( {
 	activeView,
@@ -36,38 +25,80 @@ export default function DataviewsTemplatesSidebarContent( {
 	const { records } = useEntityRecords( 'postType', postType, {
 		per_page: -1,
 	} );
-	const firstItemPerAuthorText = useMemo( () => {
-		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
-			const author = template.author_text;
-			if ( author && ! acc[ author ] ) {
-				acc[ author ] = template;
+
+	// TODO: Can we avoid the delay and rerendering stemming from this call by
+	// preloading '/wp/v2/users/me'?
+	const currentUserId = useSelect(
+		( select ) => select( coreStore ).getCurrentUser()?.id,
+		[]
+	);
+
+	const counts = useMemo( () => {
+		if ( records ) {
+			const user = { count: 0, name: undefined };
+			const plugins = {};
+
+			for ( const template of records ) {
+				switch ( template.original_source ) {
+					case 'user':
+						if ( template.author === currentUserId ) {
+							if ( ! user.name ) {
+								user.name = template.author_text;
+							}
+							user.count++;
+						}
+						break;
+					case 'plugin':
+						if ( ! plugins[ template.theme ] ) {
+							plugins[ template.theme ] = {
+								count: 0,
+								name: template.author_text,
+							};
+						}
+						plugins[ template.theme ].count++;
+						break;
+				}
 			}
-			return acc;
-		}, {} );
-		return (
-			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
-			EMPTY_ARRAY
-		);
-	}, [ records ] );
+
+			return { user, plugins };
+		}
+	}, [ records, currentUserId ] );
 
 	return (
 		<ItemGroup>
 			<DataViewItem
-				slug={ 'all' }
+				slug="all"
 				title={ config[ postType ].title }
-				icon={ layout }
+				icon={ fileIcon }
 				isActive={ activeView === 'all' }
 				isCustom="false"
+				suffix={ <span>{ records?.length }</span> }
 			/>
-			{ firstItemPerAuthorText.map( ( template ) => {
-				return (
-					<TemplateDataviewItem
-						key={ template.author_text }
-						template={ template }
-						isActive={ activeView === template.author_text }
-					/>
-				);
-			} ) }
+			{ counts && (
+				<DataViewItem
+					key="user"
+					slug={ counts.user.name }
+					title={ __( 'My templates' ) }
+					icon={ customIcon }
+					isActive={ activeView === counts.user.name }
+					isCustom="false"
+					suffix={ <span>{ counts.user.count }</span> }
+				/>
+			) }
+			{ counts &&
+				Object.entries( counts?.plugins ).map(
+					( [ key, { count, name } ] ) => (
+						<DataViewItem
+							key={ key }
+							slug={ name }
+							title={ name }
+							icon={ pluginIcon }
+							isActive={ activeView === name }
+							isCustom="false"
+							suffix={ <span>{ count }</span> }
+						/>
+					)
+				) }
 		</ItemGroup>
 	);
 }