From 8e0a33cdc602b802b308cfde1939b971349246d0 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sat, 20 Jul 2024 20:06:30 +0900
Subject: [PATCH] Polish create template part modal (#63617)

* Polish create template part modal

* Add focusOnMount prop

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/template-part/edit/title-modal.js     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js
index 0fe4cb08fb8b0..e1f10c91a67da 100644
--- a/packages/block-library/src/template-part/edit/title-modal.js
+++ b/packages/block-library/src/template-part/edit/title-modal.js
@@ -14,7 +14,7 @@ import {
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 	// Restructure onCreate to set the blocks on local state.
 	// Add modal to confirm title and trigger onCreate.
-	const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) );
+	const [ title, setTitle ] = useState( '' );
 
 	const submitForCreation = ( event ) => {
 		event.preventDefault();
@@ -25,26 +25,40 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 		<Modal
 			title={ sprintf(
 				// Translators: %s as template part area title ("Header", "Footer", etc.).
-				__( 'Name and create your new %s' ),
+				__( 'Create new %s' ),
 				areaLabel.toLowerCase()
 			) }
-			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
 			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
 		>
 			<form onSubmit={ submitForCreation }>
 				<VStack spacing="5">
 					<TextControl
-						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }
+						placeholder={ __( 'Custom Template Part' ) }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+								setTitle( '' );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
 						<Button
 							variant="primary"
 							type="submit"
 							accessibleWhenDisabled
 							disabled={ ! title.length }
+							__next40pxDefaultSize
 						>
 							{ __( 'Create' ) }
 						</Button>