DataViews: Move template title field

packages/edit-site/src/components/page-templates/fields.js

@@ -25,7 +25,7 @@ import { useAddedBy } from './hooks';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useLink, Link } = unlock( routerPrivateApis );
+const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewField( { item } ) {
@@ -75,23 +75,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	return (
-		<Link to={ `/${ item.type }/${ item.id }?canvas=edit` }>
-			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-		</Link>
-	);
-}
-
-export const titleField = {
-	label: __( 'Template' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.rendered,
-	render: TitleField,
-	enableHiding: false,
-	enableGlobalSearch: true,
-};
-
 export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',

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

@@ -7,6 +7,7 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { templateTitleField } from '@wordpress/fields';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -23,12 +24,7 @@ import {
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import {
-	authorField,
-	descriptionField,
-	previewField,
-	titleField,
-} from './fields';
+import { authorField, descriptionField, previewField } from './fields';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -172,7 +168,7 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			previewField,
-			titleField,
+			templateTitleField,
 			descriptionField,
 			{
 				...authorField,
@@ -227,6 +223,10 @@ export default function PageTemplates() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onChangeSelection={ onChangeSelection }
+				isItemClickable={ () => true }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				} }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }
 			/>

packages/fields/README.md

@@ -111,6 +111,10 @@ Status field for BasePost.
 
 Template field for BasePost.
 
+### templateTitleField
+
+Undocumented declaration.
+
 ### titleField
 
 Title field for BasePost.

packages/fields/src/fields/index.ts

@@ -1,5 +1,6 @@
 export { default as slugField } from './slug';
 export { default as titleField } from './title';
+export { default as templateTitleField } from './template-title';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
 export { default as templateField } from './template';

packages/fields/src/fields/template-title/index.ts

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Template } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import TitleView from '../title/view';
+
+const templateTitleField: Field< Template > = {
+	label: __( 'Template' ),
+	id: 'title',
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+export default templateTitleField;

packages/fields/src/fields/title/index.ts

@@ -9,15 +9,15 @@ import { __ } from '@wordpress/i18n';
  */
 import type { BasePost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
-import TitleView from './title-view';
+import { PostTitleView } from './view';
 
 const titleField: Field< BasePost > = {
 	type: 'text',
 	id: 'title',
 	label: __( 'Title' ),
 	placeholder: __( 'No title' ),
 	getValue: ( { item } ) => getItemTitle( item ),
-	render: TitleView,
+	render: PostTitleView,
 	enableHiding: false,
 };
 

packages/fields/src/fields/title/title-view.tsx → packages/fields/src/fields/title/view.tsx

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
 /**
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -11,10 +15,10 @@ import type { Settings } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import type { BasePost } from '../../types';
+import type { CommonPost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
 
-const TitleView = ( { item }: { item: BasePost } ) => {
+export function PostTitleView( { item }: { item: CommonPost } ) {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
 		const siteSettings = getEntityRecord(
@@ -26,9 +30,6 @@ const TitleView = ( { item }: { item: BasePost } ) => {
 			postsPageId: siteSettings?.page_for_posts,
 		};
 	}, [] );
-
-	const renderedTitle = getItemTitle( item );
-
 	let suffix;
 	if ( item.id === frontPageId ) {
 		suffix = (
@@ -43,19 +44,29 @@ const TitleView = ( { item }: { item: BasePost } ) => {
 			</span>
 		);
 	}
+	return <BaseTitleView item={ item }>{ suffix }</BaseTitleView>;
+}
 
+export function BaseTitleView( {
+	item,
+	children,
+}: {
+	item: CommonPost;
+	children?: ReactNode;
+} ) {
+	const renderedTitle = getItemTitle( item );
 	return (
 		<HStack
 			className="edit-site-post-list__title"
 			alignment="center"
 			justify="flex-start"
 		>
-			<span>
-				{ decodeEntities( renderedTitle ) || __( '(no title)' ) }
-			</span>
-			{ suffix }
+			<span>{ renderedTitle || __( '(no title)' ) }</span>
+			{ children }
 		</HStack>
 	);
-};
+}
 
-export default TitleView;
+export default function TitleView( { item }: { item: CommonPost } ) {
+	return <BaseTitleView item={ item } />;
+}