Update: Show template sources on templates Dataviews sidebar. (#58124)

* Update: Show template sources on templates Dataviews sidebar. * Fix rebase * Remove leftover suffix * Make sidebar work for templates & parts * Fix view name * Update component * Do not reset layout --------- Co-authored-by: André Maneiro <[email protected]>
WordPress · Jan 23, 2024 · 46446b8 · 46446b8
1 parent e8dbce0
commit 46446b8
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 5 deletions.
diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js
@@ -13,7 +13,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
@@ -176,16 +176,42 @@ function Preview( { item, viewType } ) {
 
 export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
-	const { layout } = params;
+	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
 		return {
 			...DEFAULT_VIEW,
 			type: window?.__experimentalAdminViews
 				? layout ?? DEFAULT_VIEW.type
 				: DEFAULT_VIEW.type,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: 'in',
+								value: activeView,
+							},
+					  ]
+					: [],
 		};
-	}, [ layout ] );
+	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
+	useEffect( () => {
+		setView( ( currentView ) => ( {
+			...currentView,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: 'in',
+								value: activeView,
+							},
+					  ]
+					: [],
+		} ) );
+	}, [ activeView ] );
+
 	const { records, isResolving: isLoadingData } = useEntityRecords(
 		'postType',
 		postType,

diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -29,14 +29,15 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { path },
+		params: { path, layout },
 	} = useLocation();
 
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
 		path,
+		layout,
 		activeView: isCustom === 'true' ? customViewId : slug,
 		isCustom,
 	} );

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
+/**
+ * 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"
+		/>
+	);
+}
+
+export default function DataviewsTemplatesSidebarContent( {
+	activeView,
+	postType,
+	config,
+} ) {
+	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;
+			}
+			return acc;
+		}, {} );
+		return (
+			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
+			EMPTY_ARRAY
+		);
+	}, [ records ] );
+
+	return (
+		<ItemGroup>
+			<DataViewItem
+				slug={ 'all' }
+				title={ config[ postType ].title }
+				icon={ layout }
+				isActive={ activeView === 'all' }
+				isCustom="false"
+			/>
+			{ firstItemPerAuthorText.map( ( template ) => {
+				return (
+					<TemplateDataviewItem
+						key={ template.author_text }
+						template={ template }
+						isActive={ activeView === template.author_text }
+					/>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -16,6 +17,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
+import DataviewsTemplatesSidebarContent from './content';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
@@ -40,7 +42,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 		params: { postType },
 	} = useNavigator();
 	const {
-		params: { didAccessPatternsPage },
+		params: { didAccessPatternsPage, activeView = 'all' },
 	} = useLocation();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
@@ -56,6 +58,13 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }
+			content={
+				<DataviewsTemplatesSidebarContent
+					activeView={ activeView }
+					postType={ postType }
+					config={ config }
+				/>
+			}
 		/>
 	);
 }