DataViews: Move template and pattern title fields (#67449)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Dec 5, 2024 · 376b177 · 376b177
1 parent 0dc922c
commit 376b177
Show file tree

Hide file tree

Showing 26 changed files with 317 additions and 238 deletions.
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
@@ -60,6 +60,16 @@
 			color: var(--wp-admin-theme-color);
 		}
 	}
+
+	&.dataviews-view-grid__primary-field--clickable span,
+	> .dataviews-view-table__cell-content--clickable span {
+		color: $gray-900;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
 }
 
 .dataviews-view-list__primary-field--clickable,

diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js
@@ -6,21 +6,15 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	Tooltip,
-	FlexBlock,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
 import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { Icon, lockSmall } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -112,57 +106,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const { onClick } = useLink(
-		`/${ item.type }/${
-			isUserPattern || isTemplatePart ? item.id : item.name
-		}?canvas=edit`
-	);
-	const title = decodeEntities( defaultGetTitle( item ) );
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<FlexBlock className="edit-site-patterns__pattern-title">
-				{ item.type === PATTERN_TYPES.theme ? (
-					title
-				) : (
-					<Button
-						__next40pxDefaultSize
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ title }
-					</Button>
-				) }
-			</FlexBlock>
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-		</HStack>
-	);
-}
-
-export const titleField = {
-	label: __( 'Title' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.raw || item.title,
-	render: TitleField,
-	enableHiding: false,
-};
-
 const SYNC_FILTERS = [
 	{
 		value: PATTERN_SYNC_TYPES.full,

diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
@@ -9,6 +9,7 @@ import { usePrevious } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { patternTitleField } from '@wordpress/fields';
 
 /**
  * Internal dependencies
@@ -29,13 +30,12 @@ import { useEditPostAction } from '../dataviews-actions';
 import {
 	patternStatusField,
 	previewField,
-	titleField,
 	templatePartAuthorField,
 } from './fields';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultLayouts = {
@@ -74,6 +74,7 @@ export default function DataviewsPatterns() {
 	const {
 		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
 	} = useLocation();
+	const history = useHistory();
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const previousCategoryId = usePrevious( categoryId );
@@ -105,7 +106,7 @@ export default function DataviewsPatterns() {
 	}, [ records ] );
 
 	const fields = useMemo( () => {
-		const _fields = [ previewField, titleField ];
+		const _fields = [ previewField, patternTitleField ];
 
 		if ( postType === PATTERN_TYPES.user ) {
 			_fields.push( patternStatusField );
@@ -183,6 +184,21 @@ export default function DataviewsPatterns() {
 					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
+					isItemClickable={ ( item ) =>
+						item.type !== PATTERN_TYPES.theme
+					}
+					onClickItem={ ( item ) => {
+						history.navigate(
+							`/${ item.type }/${
+								[
+									PATTERN_TYPES.user,
+									TEMPLATE_PART_POST_TYPE,
+								].includes( item.type )
+									? item.id
+									: item.name
+							}?canvas=edit`
+						);
+					} }
 					view={ view }
 					onChangeView={ setView }
 					defaultLayouts={ defaultLayouts }

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -71,34 +71,6 @@
 	}
 }
 
-.edit-site-patterns__pattern-title {
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: inherit;
-
-	.is-link {
-		text-decoration: none;
-		color: $gray-200;
-
-		&:hover,
-		&:focus {
-			color: $white;
-		}
-	}
-
-	.edit-site-patterns__pattern-icon {
-		border-radius: $grid-unit-05;
-		background: var(--wp-block-synced-color);
-		fill: $white;
-	}
-
-	.edit-site-patterns__pattern-lock-icon {
-		fill: currentcolor;
-	}
-}
-
 .edit-site-page-patterns-dataviews {
 	.dataviews-view-grid__badge-fields {
 		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {

diff --git a/packages/edit-site/src/components/page-templates/fields.js b/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',

diff --git a/packages/edit-site/src/components/page-templates/index.js b/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 }
 			/>

diff --git a/packages/edit-site/src/components/post-list/style.scss b/packages/edit-site/src/components/post-list/style.scss
@@ -65,42 +65,6 @@
 	}
 }
 
-.edit-site-post-list__title span {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
-.edit-site-post-list__title
-span,
-.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
-.edit-site-post-list__title
-span {
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	display: block;
-	flex-grow: 0;
-	color: $gray-900;
-
-	&:hover {
-		color: var(--wp-admin-theme-color);
-	}
-	@include link-reset();
-}
-
-.edit-site-post-list__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-}
-
 .edit-site-post-list__status-icon {
 	height: $grid-unit-30;
 	width: $grid-unit-30;

diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
@@ -4,12 +4,6 @@
 import { store as coreStore } from '@wordpress/core-data';
 import type { Action, Field } from '@wordpress/dataviews';
 import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 import type { PostType } from '@wordpress/fields';
 import {
 	viewPost,
@@ -35,8 +29,17 @@ import {
 	authorField,
 	titleField,
 	templateField,
+	templateTitleField,
+	pageTitleField,
+	patternTitleField,
 } from '@wordpress/fields';
 
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
 export function registerEntityAction< Item >(
 	kind: string,
 	name: string,
@@ -164,16 +167,28 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.thumbnail &&
 				currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 				featuredImageField,
-			titleField,
 			postTypeConfig.supports?.author && authorField,
 			statusField,
 			dateField,
 			slugField,
 			postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
 			postTypeConfig.supports?.comments && commentStatusField,
-			passwordField,
 			templateField,
+			passwordField,
 		].filter( Boolean );
+		if ( postTypeConfig.supports?.title ) {
+			let _titleField;
+			if ( postType === 'page' ) {
+				_titleField = pageTitleField;
+			} else if ( postType === 'wp_template' ) {
+				_titleField = templateTitleField;
+			} else if ( postType === 'wp_block' ) {
+				_titleField = patternTitleField;
+			} else {
+				_titleField = titleField;
+			}
+			fields.push( _titleField );
+		}
 
 		registry.batch( () => {
 			actions.forEach( ( action ) => {