update classNames + description docs for title fields

packages/fields/README.md

@@ -69,7 +69,7 @@ Order field for BasePost.
 
 ### pageTitleField
 
-Undocumented declaration.
+Title for the page entity.
 
 ### parentField
 
@@ -81,7 +81,7 @@ Password field for BasePost.
 
 ### patternTitleField
 
-Undocumented declaration.
+Title for the pattern entity.
 
 ### permanentlyDeletePost
 
@@ -121,11 +121,11 @@ Template field for BasePost.
 
 ### templateTitleField
 
-Undocumented declaration.
+Title for the template entity.
 
 ### titleField
 
-Title field for BasePost.
+Title for the any entity with a `title` property. For patterns, pages or templates you should use the respective field because there are some differences in the rendering, labels, etc.
 
 ### trashPost
 

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

@@ -22,4 +22,7 @@ const pageTitleField: Field< BasePost > = {
 	enableGlobalSearch: true,
 };
 
+/**
+ * Title for the page entity.
+ */
 export default pageTitleField;

packages/fields/src/fields/page-title/style.scss

@@ -1,4 +1,4 @@
-.fields-title-field__badge {
+.fields-field-page-title__badge {
 	background: $gray-100;
 	color: $gray-800;
 	padding: 0 $grid-unit-05;

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

@@ -25,9 +25,9 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
 		};
 	}, [] );
 	return (
-		<BaseTitleView item={ item }>
+		<BaseTitleView item={ item } className="fields-field-page-title">
 			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
-				<span className="fields-title-field__badge">
+				<span className="fields-field-page-title__badge">
 					{ item.id === frontPageId
 						? __( 'Homepage' )
 						: __( 'Posts Page' ) }

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

@@ -22,4 +22,7 @@ const patternTitleField: Field< Pattern > = {
 	enableGlobalSearch: true,
 };
 
+/**
+ * Title for the pattern entity.
+ */
 export default patternTitleField;

packages/fields/src/fields/pattern-title/style.scss

@@ -1,3 +1,3 @@
-.fields-pattern-title-field span:first-child {
+.fields-field-pattern-title span:first-child {
 	flex: 1;
 }

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

@@ -18,17 +18,13 @@ export const { PATTERN_TYPES } = unlock( patternPrivateApis );
 
 export default function PatternTitleView( { item }: { item: CommonPost } ) {
 	return (
-		<BaseTitleView item={ item } className="fields-pattern-title-field">
+		<BaseTitleView item={ item } className="fields-field-pattern-title">
 			{ item.type === PATTERN_TYPES.theme && (
 				<Tooltip
 					placement="top"
 					text={ __( 'This pattern cannot be edited.' ) }
 				>
-					<Icon
-						className="fields-title-field__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
+					<Icon icon={ lockSmall } size={ 24 } />
 				</Tooltip>
 			) }
 		</BaseTitleView>

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

@@ -9,16 +9,20 @@ import { __ } from '@wordpress/i18n';
  */
 import type { Template } from '../../types';
 import { getItemTitle } from '../../actions/utils';
-import TitleView from '../title/view';
+import PageTitleView from './view';
 
 const templateTitleField: Field< Template > = {
 	type: 'text',
 	label: __( 'Template' ),
+	placeholder: __( 'No title' ),
 	id: 'title',
 	getValue: ( { item } ) => getItemTitle( item ),
-	render: TitleView,
+	render: PageTitleView,
 	enableHiding: false,
 	enableGlobalSearch: true,
 };
 
+/**
+ * Title for the template entity.
+ */
 export default templateTitleField;

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

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import type { Template } from '../../types';
+import { BaseTitleView } from '../title/view';
+
+export default function PageTitleView( { item }: { item: Template } ) {
+	return (
+		<BaseTitleView item={ item } className="fields-field-template-title" />
+	);
+}

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

@@ -23,6 +23,8 @@ const titleField: Field< CommonPost > = {
 };
 
 /**
- * Title field for BasePost.
+ * Title for the any entity with a `title` property.
+ * For patterns, pages or templates you should use the respective field
+ * because there are some differences in the rendering, labels, etc.
  */
 export default titleField;

packages/fields/src/fields/title/style.scss

@@ -1,4 +1,4 @@
-.fields-title-field span:first-child {
+.fields-field-title span:first-child {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	text-decoration: none;

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

@@ -28,7 +28,7 @@ export function BaseTitleView( {
 	const renderedTitle = getItemTitle( item );
 	return (
 		<HStack
-			className={ clsx( 'fields-title-field', className ) }
+			className={ clsx( 'fields-field-title', className ) }
 			alignment="center"
 			justify="flex-start"
 		>

test/e2e/specs/site-editor/browser-history.spec.js

@@ -20,7 +20,7 @@ test.describe( 'Site editor browser history', () => {
 		// Navigate to a single template
 		await page.click( 'role=button[name="Templates"]' );
 		await page
-			.locator( '.fields-title-field', { hasText: 'Index' } )
+			.locator( '.fields-field-title', { hasText: 'Index' } )
 			.click();
 		await expect( page ).toHaveURL(
 			'/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit'

test/e2e/specs/site-editor/new-templates-list.spec.js

@@ -27,7 +27,7 @@ test.describe( 'Templates', () => {
 			page.locator( '[aria-label="Templates"]' )
 		).toBeVisible();
 
-		const firstTitle = page.locator( '.fields-title-field' ).first();
+		const firstTitle = page.locator( '.fields-field-title' ).first();
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
@@ -48,7 +48,7 @@ test.describe( 'Templates', () => {
 		await admin.visitSiteEditor( { postType: 'wp_template' } );
 		// Global search.
 		await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' );
-		const titles = page.locator( '.fields-title-field' );
+		const titles = page.locator( '.fields-field-title' );
 		await expect( titles ).toHaveCount( 1 );
 		await expect( titles.first() ).toHaveText( 'Tag Archives' );
 		await page

test/e2e/specs/site-editor/template-registration.spec.js

@@ -320,7 +320,7 @@ test.describe( 'Block template registration', () => {
 			.getByText( `"Author: Admin" reset.` );
 		await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' );
 		await page
-			.locator( '.fields-title-field', { hasText: 'Author: Admin' } )
+			.locator( '.fields-field-title', { hasText: 'Author: Admin' } )
 			.click();
 		const actions = page.getByLabel( 'Actions' );
 		await actions.first().click();