[Data views]: Update author and title fields in template's list (#56029)

* [Data views]: Update author and title fields in template's list * add the icon in author for every case
WordPress · Nov 16, 2023 · c5b1249 · c5b1249
1 parent dc7e1aa
commit c5b1249
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js
@@ -152,7 +152,7 @@ export function useAddedBy( postType, postId ) {
  * @param {Object} props
  * @param {string} props.imageUrl
  */
-function AvatarImage( { imageUrl } ) {
+export function AvatarImage( { imageUrl } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (

diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -7,11 +7,13 @@ import removeAccents from 'remove-accents';
  * WordPress dependencies
  */
 import {
+	Icon,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -21,7 +23,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import AddedBy from '../list/added-by';
+import { useAddedBy, AvatarImage } from '../list/added-by';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { DataViews } from '../dataviews';
 import {
@@ -47,6 +49,51 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
+// TODO: these are going to be reused in the template part list.
+// That's the reason for leaving the template parts code for now.
+function TemplateTitle( { item } ) {
+	const { isCustomized } = useAddedBy( item.type, item.id );
+	return (
+		<VStack spacing={ 1 }>
+			<Heading as="h3" level={ 5 }>
+				<Link
+					params={ {
+						postId: item.id,
+						postType: item.type,
+						canvas: 'edit',
+					} }
+				>
+					{ decodeEntities( item.title?.rendered || item.slug ) ||
+						__( '(no title)' ) }
+				</Link>
+			</Heading>
+			{ isCustomized && (
+				<span className="edit-site-list-added-by__customized-info">
+					{ item.type === TEMPLATE_POST_TYPE
+						? _x( 'Customized', 'template' )
+						: _x( 'Customized', 'template part' ) }
+				</span>
+			) }
+		</VStack>
+	);
+}
+
+function AuthorField( { item } ) {
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+	return (
+		<HStack alignment="left">
+			{ imageUrl ? (
+				<AvatarImage imageUrl={ imageUrl } />
+			) : (
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ text }</span>
+		</HStack>
+	);
+}
+
 export default function DataviewsTemplates() {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { records: allTemplates, isResolving: isLoadingData } =
@@ -110,25 +157,7 @@ export default function DataviewsTemplates() {
 				header: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
-					return (
-						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 }>
-								<Link
-									params={ {
-										postId: item.id,
-										postType: item.type,
-										canvas: 'edit',
-									} }
-								>
-									{ decodeEntities(
-										item.title?.rendered || item.slug
-									) || __( '(no title)' ) }
-								</Link>
-							</Heading>
-						</VStack>
-					);
-				},
+				render: ( { item } ) => <TemplateTitle item={ item } />,
 				maxWidth: 400,
 				enableHiding: false,
 			},
@@ -145,17 +174,14 @@ export default function DataviewsTemplates() {
 						)
 					);
 				},
+				maxWidth: 200,
 				enableSorting: false,
 			},
 			{
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: () => {},
-				render: ( { item } ) => {
-					return (
-						<AddedBy postType={ item.type } postId={ item.id } />
-					);
-				},
+				render: ( { item } ) => <AuthorField item={ item } />,
 				enableHiding: false,
 				enableSorting: false,
 			},