Fix custom template creation regression (#50797)

* Fix custom template creation regression

* update custom template description to match post editor modal

* add regression test

* use `getByRole` in e2e tests

packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -50,7 +50,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					placeholder={ defaultTitle }
 					disabled={ isBusy }
 					help={ __(
-						'Describe the template, e.g. "Post with sidebar".'
+						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 					) }
 				/>
 				<HStack

packages/edit-site/src/components/add-new-template/new-template.js

@@ -96,10 +96,6 @@ export default function NewTemplate( {
 	const [ modalContent, setModalContent ] = useState(
 		modalContentMap.templatesList
 	);
-	const [
-		showCustomGenericTemplateModal,
-		setShowCustomGenericTemplateModal,
-	] = useState( false );
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
 	const [ isCreatingTemplate, setIsCreatingTemplate ] = useState( false );
 
@@ -183,7 +179,7 @@ export default function NewTemplate( {
 			__( 'Add template: %s' ),
 			entityForSuggestions.labels.singular_name
 		);
-	} else if ( showCustomGenericTemplateModal ) {
+	} else if ( modalContent === modalContentMap.customGenericTemplate ) {
 		modalTitle = __( 'Create custom template' );
 	}
 	return (
@@ -246,7 +242,9 @@ export default function NewTemplate( {
 									'A custom template can be manually applied to any post or page.'
 								) }
 								onClick={ () =>
-									setShowCustomGenericTemplateModal( true )
+									setModalContent(
+										modalContentMap.customGenericTemplate
+									)
 								}
 							/>
 						</Grid>

packages/edit-site/src/components/add-new-template/style.scss

@@ -98,12 +98,6 @@
 }
 
 .edit-site-custom-generic-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-
 	.components-modal__header {
 		border-bottom: none;
 	}

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Templates', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+	} );
+	test( 'Create a custom template', async ( { admin, page } ) => {
+		const templateName = 'demo';
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Templates' } ).click();
+		await page.getByRole( 'button', { name: 'Add New Template' } ).click();
+		await page
+			.getByRole( 'button', {
+				name: 'A custom template can be manually applied to any post or page.',
+			} )
+			.click();
+		// Fill the template title and submit.
+		const newTemplateDialog = page.locator(
+			'role=dialog[name="Create custom template"i]'
+		);
+		const templateNameInput = newTemplateDialog.locator(
+			'role=textbox[name="Name"i]'
+		);
+		await templateNameInput.fill( templateName );
+		await page.keyboard.press( 'Enter' );
+		// Close the pattern suggestions dialog.
+		await page
+			.getByRole( 'dialog', { name: 'Choose a pattern' } )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await expect(
+			page.locator(
+				`role=button[name="Dismiss this notice"i] >> text="${ templateName }" successfully created.`
+			)
+		).toBeVisible();
+	} );
+} );