update class names

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

@@ -1,4 +1,4 @@
-.fields-field-page-title__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 } className="fields-field-page-title">
+		<BaseTitleView item={ item } className="fields-field__page-title">
 			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
-				<span className="fields-field-page-title__badge">
+				<span className="fields-field__page-title__badge">
 					{ item.id === frontPageId
 						? __( 'Homepage' )
 						: __( 'Posts Page' ) }

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

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

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

@@ -18,7 +18,7 @@ export const { PATTERN_TYPES } = unlock( patternPrivateApis );
 
 export default function PatternTitleView( { item }: { item: CommonPost } ) {
 	return (
-		<BaseTitleView item={ item } className="fields-field-pattern-title">
+		<BaseTitleView item={ item } className="fields-field__pattern-title">
 			{ item.type === PATTERN_TYPES.theme && (
 				<Tooltip
 					placement="top"

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

@@ -6,6 +6,6 @@ import { BaseTitleView } from '../title/view';
 
 export default function PageTitleView( { item }: { item: Template } ) {
 	return (
-		<BaseTitleView item={ item } className="fields-field-template-title" />
+		<BaseTitleView item={ item } className="fields-field__template-title" />
 	);
 }

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

@@ -1,4 +1,4 @@
-.fields-field-title 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-field-title', 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-field-title', { 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-field-title' ).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-field-title' );
+		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-field-title', { hasText: 'Author: Admin' } )
+			.locator( '.fields-field__title', { hasText: 'Author: Admin' } )
 			.click();
 		const actions = page.getByLabel( 'Actions' );
 		await actions.first().click();