From 3d987faaff38b5e1947f2b2b55cd6bb4032c04c8 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 12 May 2023 17:11:48 +0300
Subject: [PATCH 1/8] [Site Editor]: Update the add template menu

---
 .../add-new-template/new-template.js          | 208 +++++++-----------
 .../components/add-new-template/style.scss    |  92 ++++----
 2 files changed, 134 insertions(+), 166 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index 3db38fffdee81a..1ae6dcca087d65 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -2,33 +2,16 @@
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Tooltip,
-	VisuallyHidden,
+	Button,
+	Modal,
+	__experimentalGrid as Grid,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	archive,
-	blockMeta,
-	category,
-	home,
-	list,
-	media,
-	notFound,
-	page,
-	plus,
-	post,
-	postAuthor,
-	postDate,
-	postList,
-	search,
-	tag,
-	layout as customGenericTemplateIcon,
-} from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -68,28 +51,33 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'404',
 ];
 
-const TEMPLATE_ICONS = {
-	'front-page': home,
-	home: postList,
-	single: post,
-	page,
-	archive,
-	search,
-	404: notFound,
-	index: list,
-	category,
-	author: postAuthor,
-	taxonomy: blockMeta,
-	date: postDate,
-	tag,
-	attachment: media,
-};
+function TemplateListItem( { title, description, onClick } ) {
+	return (
+		<Button onClick={ onClick }>
+			<VStack as="span" spacing={ 2 }>
+				<Text
+					weight={ 500 }
+					lineHeight={ 1.53846153846 } // 20px
+				>
+					{ title }
+				</Text>
+				<Text
+					lineHeight={ 1.53846153846 } // 20px
+				>
+					{ description }
+				</Text>
+			</VStack>
+		</Button>
+	);
+}
 
 export default function NewTemplate( {
 	postType,
 	toggleProps,
 	showIcon = true,
 } ) {
+	const [ showTemplatesListModal, setShowTemplatesListModal ] =
+		useState( false );
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
 	const [
@@ -167,99 +155,63 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
-
-	const customTemplateDescription = __(
-		'A custom template can be manually applied to any post or page.'
-	);
-
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
+	// TODO: Remove obsolete styles..
 	return (
 		<>
-			<DropdownMenu
-				className="edit-site-new-template-dropdown"
-				icon={ showIcon ? plus : null }
-				text={ showIcon ? null : postType.labels.add_new }
-				label={ postType.labels.add_new_item }
-				popoverProps={ {
-					noArrow: false,
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
+			<Toggle
+				{ ...restToggleProps }
+				onClick={ () => {
+					setShowTemplatesListModal( true );
 				} }
-				toggleProps={ toggleProps }
+				icon={ showIcon ? plus : null }
+				label={ postType.labels.add_new }
 			>
-				{ () => (
-					<>
-						{ isCreatingTemplate && (
-							<TemplateActionsLoadingScreen />
-						) }
-						<div className="edit-site-new-template-dropdown__menu-groups">
-							<MenuGroup label={ postType.labels.add_new_item }>
-								{ missingTemplates.map( ( template ) => {
-									const {
-										title,
-										description,
-										slug,
-										onClick,
-										icon,
-									} = template;
-									return (
-										<Tooltip
-											key={ slug }
-											position="top right"
-											text={ description }
-											className="edit-site-new-template-dropdown__menu-item-tooltip"
-										>
-											<MenuItem
-												icon={
-													icon ||
-													TEMPLATE_ICONS[ slug ] ||
-													post
-												}
-												iconPosition="left"
-												onClick={ () =>
-													onClick
-														? onClick( template )
-														: createTemplate(
-																template
-														  )
-												}
-											>
-												{ title }
-												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-												<VisuallyHidden>
-													{ description }
-												</VisuallyHidden>
-											</MenuItem>
-										</Tooltip>
-									);
-								} ) }
-							</MenuGroup>
-							<MenuGroup>
-								<Tooltip
-									position="top right"
-									text={ customTemplateDescription }
-									className="edit-site-new-template-dropdown__menu-item-tooltip"
-								>
-									<MenuItem
-										icon={ customGenericTemplateIcon }
-										iconPosition="left"
-										onClick={ () =>
-											setShowCustomGenericTemplateModal(
-												true
-											)
-										}
-									>
-										{ __( 'Custom template' ) }
-										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-										<VisuallyHidden>
-											{ customTemplateDescription }
-										</VisuallyHidden>
-									</MenuItem>
-								</Tooltip>
-							</MenuGroup>
-						</div>
-					</>
-				) }
-			</DropdownMenu>
+				{ showIcon ? null : postType.labels.add_new }
+			</Toggle>
+			{ showTemplatesListModal && (
+				<Modal
+					title={ __( 'Add template' ) }
+					// isFullScreen
+					className="edit-site-add-new-template__modal"
+					onRequestClose={ () => setShowTemplatesListModal( false ) }
+				>
+					<Grid
+						columns={ 3 }
+						gap={ 4 }
+						align="flex-start"
+						justify="center"
+						className="edit-site-add-new-template__modal__contents"
+					>
+						{ missingTemplates.map( ( template ) => {
+							const { title, description, slug, onClick } =
+								template;
+							return (
+								<TemplateListItem
+									key={ slug }
+									title={ title }
+									description={ description }
+									onClick={ () =>
+										onClick
+											? onClick( template )
+											: createTemplate( template )
+									}
+								/>
+							);
+						} ) }
+						<TemplateListItem
+							title={ __( 'Custom template' ) }
+							description={ __(
+								'A custom template can be manually applied to any post or page.'
+							) }
+							onClick={ () =>
+								setShowCustomGenericTemplateModal( true )
+							}
+						/>
+					</Grid>
+				</Modal>
+			) }
 			{ showCustomTemplateModal && (
 				<AddCustomTemplateModal
 					onClose={ () => setShowCustomTemplateModal( false ) }
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index fc33da1f35a133..880d4b3c54e6ba 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -25,46 +25,8 @@
 
 	&__contents {
 		> .components-button {
-			padding: $grid-unit-30;
-			border-radius: $radius-block-ui;
 			height: auto;
-			display: flex;
-			flex-direction: column;
 			justify-content: center;
-			border: $border-width solid $gray-300;
-
-			// Show the boundary of the button, in High Contrast Mode.
-			outline: 1px solid transparent;
-
-			span:first-child {
-				color: $gray-900;
-			}
-
-			span {
-				color: $gray-700;
-			}
-
-			&:hover {
-				color: var(--wp-admin-theme-color-darker-10);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-				border-color: transparent;
-
-				span {
-					color: var(--wp-admin-theme-color);
-				}
-			}
-
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-color: transparent;
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 3px solid transparent;
-
-				span:first-child {
-					color: var(--wp-admin-theme-color);
-				}
-			}
 		}
 	}
 
@@ -178,4 +140,58 @@
 		justify-content: center;
 		height: 100%;
 	}
+	.components-modal__children-container {
+		height: 100%;
+	}
+}
+
+.edit-site-custom-template-modal__contents,
+.edit-site-add-new-template__modal__contents {
+	> .components-button {
+		padding: $grid-unit-30;
+		border-radius: $radius-block-ui;
+		display: flex;
+		flex-direction: column;
+		border: $border-width solid $gray-300;
+
+		// Show the boundary of the button, in High Contrast Mode.
+		outline: 1px solid transparent;
+
+		span:first-child {
+			color: $gray-900;
+		}
+
+		span {
+			color: $gray-700;
+		}
+
+		&:hover {
+			color: var(--wp-admin-theme-color-darker-10);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			border-color: transparent;
+
+			span {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-color: transparent;
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 3px solid transparent;
+
+			span:first-child {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+}
+
+.edit-site-add-new-template__modal__contents {
+	> .components-button {
+		height: 100%;
+		text-align: start;
+	}
 }

From 54e915bd13adb793081ebeca59c16fcdfe9c8375 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 15 May 2023 13:05:51 +0300
Subject: [PATCH 2/8] use single Modal part 1

---
 .../add-custom-generic-template-modal.js      |  91 ++++-----
 .../add-custom-template-modal.js              |  39 ++--
 .../add-new-template/new-template.js          | 175 +++++++++++-------
 .../components/add-new-template/style.scss    |  36 +++-
 4 files changed, 189 insertions(+), 152 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
index 05688d032a5917..97c6fc041a2cf0 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
@@ -10,22 +10,12 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	Modal,
 	TextControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-
-function AddCustomGenericTemplateModal( {
-	onClose,
-	createTemplate,
-	isCreatingTemplate,
-} ) {
+function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const defaultTitle = __( 'Custom Template' );
 	const [ isBusy, setIsBusy ] = useState( false );
@@ -50,51 +40,42 @@ function AddCustomGenericTemplateModal( {
 		}
 	}
 	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			onRequestClose={ () => {
-				onClose();
-			} }
-			overlayClassName="edit-site-custom-generic-template__modal"
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
-			<form onSubmit={ onCreateTemplate }>
-				<VStack spacing={ 6 }>
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						placeholder={ defaultTitle }
-						disabled={ isBusy }
-						help={ __(
-							'Describe the template, e.g. "Post with sidebar".'
-						) }
-					/>
-					<HStack
-						className="edit-site-custom-generic-template__modal-actions"
-						justify="right"
+		<form onSubmit={ onCreateTemplate }>
+			<VStack spacing={ 6 }>
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ defaultTitle }
+					disabled={ isBusy }
+					help={ __(
+						'Describe the template, e.g. "Post with sidebar".'
+					) }
+				/>
+				<HStack
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="right"
+				>
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							onClose();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy }
 					>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								onClose();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
 	);
 }
 
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
index ccab5d82bd0587..b6e91da3cb589f 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -2,12 +2,11 @@
  * WordPress dependencies
  */
 import { useState, useMemo, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	Flex,
 	FlexItem,
-	Modal,
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
@@ -23,7 +22,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -179,36 +177,25 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModal( {
-	onClose,
-	onSelect,
-	entityForSuggestions,
-	isCreatingTemplate,
-} ) {
+function AddCustomTemplateModal( { onSelect, entityForSuggestions } ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
-	const baseCssClass = 'edit-site-custom-template-modal';
 	return (
-		<Modal
-			title={ sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Add template: %s' ),
-				entityForSuggestions.labels.singular_name
-			) }
-			className={ baseCssClass }
-			onRequestClose={ onClose }
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
+		<>
 			{ ! showSearchEntities && (
-				<VStack spacing={ 4 }>
+				<VStack
+					spacing={ 4 }
+					className="edit-site-custom-template-modal__contents-wrapper"
+					alignment="left"
+				>
 					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
 						) }
 					</Text>
 					<Flex
-						className={ `${ baseCssClass }__contents` }
+						className="edit-site-custom-template-modal__contents"
 						gap="4"
 						align="initial"
 					>
@@ -275,7 +262,11 @@ function AddCustomTemplateModal( {
 				</VStack>
 			) }
 			{ showSearchEntities && (
-				<VStack spacing={ 4 }>
+				<VStack
+					spacing={ 4 }
+					className="edit-site-custom-template-modal__contents-wrapper"
+					alignment="left"
+				>
 					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
@@ -287,7 +278,7 @@ function AddCustomTemplateModal( {
 					/>
 				</VStack>
 			) }
-		</Modal>
+		</>
 	);
 }
 
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index 1ae6dcca087d65..e90931e5e6c307 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -54,7 +59,12 @@ const DEFAULT_TEMPLATE_SLUGS = [
 function TemplateListItem( { title, description, onClick } ) {
 	return (
 		<Button onClick={ onClick }>
-			<VStack as="span" spacing={ 2 }>
+			<VStack
+				as="span"
+				spacing={ 2 }
+				justify="flex-start"
+				style={ { width: '100%' } }
+			>
 				<Text
 					weight={ 500 }
 					lineHeight={ 1.53846153846 } // 20px
@@ -71,15 +81,21 @@ function TemplateListItem( { title, description, onClick } ) {
 	);
 }
 
+const modalContentMap = {
+	templatesList: 1,
+	customTemplate: 2,
+	customGenericTemplate: 3,
+};
+
 export default function NewTemplate( {
 	postType,
 	toggleProps,
 	showIcon = true,
 } ) {
-	const [ showTemplatesListModal, setShowTemplatesListModal ] =
-		useState( false );
-	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
-		useState( false );
+	const [ showModal, setShowModal ] = useState( false );
+	const [ modalContent, setModalContent ] = useState(
+		modalContentMap.templatesList
+	);
 	const [
 		showCustomGenericTemplateModal,
 		setShowCustomGenericTemplateModal,
@@ -147,94 +163,115 @@ export default function NewTemplate( {
 			setIsCreatingTemplate( false );
 		}
 	}
+	const onModalClose = () => {
+		setShowModal( false );
+		setModalContent( modalContentMap.templatesList );
+	};
 
-	const missingTemplates = useMissingTemplates(
-		setEntityForSuggestions,
-		setShowCustomTemplateModal
+	const missingTemplates = useMissingTemplates( setEntityForSuggestions, () =>
+		setModalContent( modalContentMap.customTemplate )
 	);
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
 	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
-	// TODO: Remove obsolete styles..
+
+	let modalTitle = __( 'Add template' );
+	if ( modalContent === modalContentMap.customTemplate ) {
+		modalTitle = sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Add template: %s' ),
+			entityForSuggestions.labels.singular_name
+		);
+	} else if ( showCustomGenericTemplateModal ) {
+		modalTitle = __( 'Create custom template' );
+	}
+	// TODO: Remove obsolete styles and unify modals's styles.
 	return (
 		<>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			<Toggle
 				{ ...restToggleProps }
-				onClick={ () => {
-					setShowTemplatesListModal( true );
-				} }
+				onClick={ () => setShowModal( true ) }
 				icon={ showIcon ? plus : null }
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
 			</Toggle>
-			{ showTemplatesListModal && (
+			{ showModal && (
 				<Modal
-					title={ __( 'Add template' ) }
-					// isFullScreen
-					className="edit-site-add-new-template__modal"
-					onRequestClose={ () => setShowTemplatesListModal( false ) }
+					title={ modalTitle }
+					className={ classnames(
+						'edit-site-add-new-template__modal',
+						{
+							'edit-site-add-new-template__modal_template_list':
+								modalContent === modalContentMap.templatesList,
+							'edit-site-custom-template-modal':
+								modalContent === modalContentMap.customTemplate,
+						}
+					) }
+					onRequestClose={ onModalClose }
+					overlayClassName={
+						modalContent === modalContentMap.customGenericTemplate
+							? 'edit-site-custom-generic-template__modal'
+							: undefined
+					}
 				>
-					<Grid
-						columns={ 3 }
-						gap={ 4 }
-						align="flex-start"
-						justify="center"
-						className="edit-site-add-new-template__modal__contents"
-					>
-						{ missingTemplates.map( ( template ) => {
-							const { title, description, slug, onClick } =
-								template;
-							return (
-								<TemplateListItem
-									key={ slug }
-									title={ title }
-									description={ description }
-									onClick={ () =>
-										onClick
-											? onClick( template )
-											: createTemplate( template )
-									}
-								/>
-							);
-						} ) }
-						<TemplateListItem
-							title={ __( 'Custom template' ) }
-							description={ __(
-								'A custom template can be manually applied to any post or page.'
-							) }
-							onClick={ () =>
-								setShowCustomGenericTemplateModal( true )
-							}
+					{ modalContent === modalContentMap.templatesList && (
+						<Grid
+							columns={ 3 }
+							gap={ 4 }
+							align="flex-start"
+							justify="center"
+							className="edit-site-add-new-template__modal__contents"
+						>
+							{ missingTemplates.map( ( template ) => {
+								const { title, description, slug, onClick } =
+									template;
+								return (
+									<TemplateListItem
+										key={ slug }
+										title={ title }
+										description={ description }
+										onClick={ () =>
+											onClick
+												? onClick( template )
+												: createTemplate( template )
+										}
+									/>
+								);
+							} ) }
+							<TemplateListItem
+								title={ __( 'Custom template' ) }
+								description={ __(
+									'A custom template can be manually applied to any post or page.'
+								) }
+								onClick={ () =>
+									setShowCustomGenericTemplateModal( true )
+								}
+							/>
+						</Grid>
+					) }
+					{ modalContent === modalContentMap.customTemplate && (
+						<AddCustomTemplateModal
+							onSelect={ createTemplate }
+							entityForSuggestions={ entityForSuggestions }
 						/>
-					</Grid>
+					) }
+					{ modalContent ===
+						modalContentMap.customGenericTemplate && (
+						<AddCustomGenericTemplateModal
+							onClose={ onModalClose }
+							createTemplate={ createTemplate }
+						/>
+					) }
 				</Modal>
 			) }
-			{ showCustomTemplateModal && (
-				<AddCustomTemplateModal
-					onClose={ () => setShowCustomTemplateModal( false ) }
-					onSelect={ createTemplate }
-					entityForSuggestions={ entityForSuggestions }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
-			) }
-			{ showCustomGenericTemplateModal && (
-				<AddCustomGenericTemplateModal
-					onClose={ () => setShowCustomGenericTemplateModal( false ) }
-					createTemplate={ createTemplate }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
-			) }
 		</>
 	);
 }
 
-function useMissingTemplates(
-	setEntityForSuggestions,
-	setShowCustomTemplateModal
-) {
+function useMissingTemplates( setEntityForSuggestions, onClick ) {
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
@@ -246,7 +283,7 @@ function useMissingTemplates(
 			! existingTemplateSlugs.includes( template.slug )
 	);
 	const onClickMenuItem = ( _entityForSuggestions ) => {
-		setShowCustomTemplateModal( true );
+		onClick?.();
 		setEntityForSuggestions( _entityForSuggestions );
 	};
 	// We need to replace existing default template types with
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 880d4b3c54e6ba..d00f5999eece47 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -18,9 +18,19 @@
 }
 
 .edit-site-custom-template-modal {
-	&__suggestions_list {
-		margin-left: - $grid-unit-15;
-		margin-right: - $grid-unit-15;
+	&__contents-wrapper {
+		height: 100%;
+		justify-content: flex-start !important; // Required as topLeft alignment isn't working on VStack
+
+		> * {
+			width: 100%;
+		}
+
+		&__suggestions_list {
+			margin-left: - $grid-unit-15;
+			margin-right: - $grid-unit-15;
+			width: calc(100% + #{$grid-unit-15 * 2});
+		}
 	}
 
 	&__contents {
@@ -48,7 +58,6 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			height: 232px;
 			overflow: scroll;
 		}
 
@@ -140,6 +149,21 @@
 		justify-content: center;
 		height: 100%;
 	}
+}
+
+.edit-site-add-new-template__modal,
+.edit-site-custom-template-modal {
+	max-width: $grid-unit-80 * 13;
+	width: calc(100% - #{$grid-unit-80});
+	height: calc(100% - #{$grid-unit-80});
+	max-height: none;
+
+	@include break-large() {
+		width: calc(100% - #{$grid-unit-80 * 2});
+		height: calc(100% - #{$grid-unit-80 * 2});
+		max-height: none;
+	}
+
 	.components-modal__children-container {
 		height: 100%;
 	}
@@ -153,6 +177,7 @@
 		display: flex;
 		flex-direction: column;
 		border: $border-width solid $gray-300;
+		min-height: $grid-unit-80 * 3;
 
 		// Show the boundary of the button, in High Contrast Mode.
 		outline: 1px solid transparent;
@@ -190,8 +215,11 @@
 }
 
 .edit-site-add-new-template__modal__contents {
+	padding-bottom: $grid-unit-40;
+
 	> .components-button {
 		height: 100%;
 		text-align: start;
+		align-items: flex-start;
 	}
 }

From f51ecd944c9b6a2ee45a97c057e32ca607fa98cc Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 15 May 2023 13:40:57 +0300
Subject: [PATCH 3/8] rename components

---
 ...-custom-generic-template-modal-content.js} |  4 +--
 ...s => add-custom-template-modal-content.js} | 28 ++++++++-----------
 .../add-new-template/new-template.js          |  8 +++---
 3 files changed, 18 insertions(+), 22 deletions(-)
 rename packages/edit-site/src/components/add-new-template/{add-custom-generic-template-modal.js => add-custom-generic-template-modal-content.js} (92%)
 rename packages/edit-site/src/components/add-new-template/{add-custom-template-modal.js => add-custom-template-modal-content.js} (94%)

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
similarity index 92%
rename from packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
rename to packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
index 97c6fc041a2cf0..6da96e791679b2 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
@@ -15,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
+function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const defaultTitle = __( 'Custom Template' );
 	const [ isBusy, setIsBusy ] = useState( false );
@@ -79,4 +79,4 @@ function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
 	);
 }
 
-export default AddCustomGenericTemplateModal;
+export default AddCustomGenericTemplateModalContent;
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
similarity index 94%
rename from packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
rename to packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index b6e91da3cb589f..5636ec16e1ac1d 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -177,18 +177,18 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModal( { onSelect, entityForSuggestions } ) {
+function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
 	return (
-		<>
+		<VStack
+			spacing={ 4 }
+			className="edit-site-custom-template-modal__contents-wrapper"
+			alignment="left"
+		>
 			{ ! showSearchEntities && (
-				<VStack
-					spacing={ 4 }
-					className="edit-site-custom-template-modal__contents-wrapper"
-					alignment="left"
-				>
+				<>
 					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
@@ -259,14 +259,10 @@ function AddCustomTemplateModal( { onSelect, entityForSuggestions } ) {
 							</Text>
 						</FlexItem>
 					</Flex>
-				</VStack>
+				</>
 			) }
 			{ showSearchEntities && (
-				<VStack
-					spacing={ 4 }
-					className="edit-site-custom-template-modal__contents-wrapper"
-					alignment="left"
-				>
+				<>
 					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
@@ -276,10 +272,10 @@ function AddCustomTemplateModal( { onSelect, entityForSuggestions } ) {
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
-				</VStack>
+				</>
 			) }
-		</>
+		</VStack>
 	);
 }
 
-export default AddCustomTemplateModal;
+export default AddCustomTemplateModalContent;
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index e90931e5e6c307..248ae01a2f0cb4 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -24,7 +24,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import AddCustomTemplateModal from './add-custom-template-modal';
+import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import {
 	useExistingTemplates,
 	useDefaultTemplateTypes,
@@ -33,7 +33,7 @@ import {
 	useAuthorMenuItem,
 	usePostTypeArchiveMenuItems,
 } from './utils';
-import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
+import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
@@ -253,14 +253,14 @@ export default function NewTemplate( {
 						</Grid>
 					) }
 					{ modalContent === modalContentMap.customTemplate && (
-						<AddCustomTemplateModal
+						<AddCustomTemplateModalContent
 							onSelect={ createTemplate }
 							entityForSuggestions={ entityForSuggestions }
 						/>
 					) }
 					{ modalContent ===
 						modalContentMap.customGenericTemplate && (
-						<AddCustomGenericTemplateModal
+						<AddCustomGenericTemplateModalContent
 							onClose={ onModalClose }
 							createTemplate={ createTemplate }
 						/>

From ea5ba20fe8140aac90d1c3278c4df2c03cb7098c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 15 May 2023 17:25:25 +0300
Subject: [PATCH 4/8] remove obsolete styles

---
 .../add-new-template/new-template.js          |  2 +-
 .../components/add-new-template/style.scss    | 26 +++----------------
 2 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index 248ae01a2f0cb4..8e1a79b3764784 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -223,7 +223,7 @@ export default function NewTemplate( {
 							gap={ 4 }
 							align="flex-start"
 							justify="center"
-							className="edit-site-add-new-template__modal__contents"
+							className="edit-site-add-new-template__template-list__contents"
 						>
 							{ missingTemplates.map( ( template ) => {
 								const { title, description, slug, onClick } =
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index d00f5999eece47..8cba1b118517ac 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,22 +1,3 @@
-.edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__menu-groups {
-		@include break-small() {
-			min-width: 300px;
-		}
-	}
-
-	// The specificity is needed to override the default tooltip styles.
-	&__menu-item-tooltip.components-tooltip .components-popover__content {
-		max-width: 320px;
-		padding: $grid-unit-10 $grid-unit-15;
-		border-radius: 2px;
-		white-space: pre-wrap;
-		min-width: 0;
-		width: auto;
-		text-align: left;
-	}
-}
-
 .edit-site-custom-template-modal {
 	&__contents-wrapper {
 		height: 100%;
@@ -151,8 +132,7 @@
 	}
 }
 
-.edit-site-add-new-template__modal,
-.edit-site-custom-template-modal {
+.edit-site-add-new-template__modal {
 	max-width: $grid-unit-80 * 13;
 	width: calc(100% - #{$grid-unit-80});
 	height: calc(100% - #{$grid-unit-80});
@@ -170,7 +150,7 @@
 }
 
 .edit-site-custom-template-modal__contents,
-.edit-site-add-new-template__modal__contents {
+.edit-site-add-new-template__template-list__contents {
 	> .components-button {
 		padding: $grid-unit-30;
 		border-radius: $radius-block-ui;
@@ -214,7 +194,7 @@
 	}
 }
 
-.edit-site-add-new-template__modal__contents {
+.edit-site-add-new-template__template-list__contents {
 	padding-bottom: $grid-unit-40;
 
 	> .components-button {

From c41115c5da9f8ba291fac20fb45a90c9f77ada55 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 15 May 2023 17:38:34 +0300
Subject: [PATCH 5/8] update e2e test

---
 .../src/components/add-new-template/new-template.js          | 5 ++---
 .../e2e/specs/site-editor/site-editor-url-navigation.spec.js | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index 8e1a79b3764784..841d45749e6285 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -186,7 +186,6 @@ export default function NewTemplate( {
 	} else if ( showCustomGenericTemplateModal ) {
 		modalTitle = __( 'Create custom template' );
 	}
-	// TODO: Remove obsolete styles and unify modals's styles.
 	return (
 		<>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
@@ -194,9 +193,9 @@ export default function NewTemplate( {
 				{ ...restToggleProps }
 				onClick={ () => setShowModal( true ) }
 				icon={ showIcon ? plus : null }
-				label={ postType.labels.add_new }
+				label={ postType.labels.add_new_item }
 			>
-				{ showIcon ? null : postType.labels.add_new }
+				{ showIcon ? null : postType.labels.add_new_item }
 			</Toggle>
 			{ showModal && (
 				<Modal
diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
index edc4909a98c979..5668832e4162c3 100644
--- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -45,7 +45,7 @@ test.describe( 'Site editor url navigation', () => {
 			] );
 			await page.click( 'role=button[name="Add New Template"i]' );
 			await page
-				.getByRole( 'menuitem', {
+				.getByRole( 'button', {
 					name: 'Single item: Post',
 				} )
 				.click();

From 5a939f24cc5bd200d86bfe88313ec25e8558d071 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 16 May 2023 16:50:46 +0300
Subject: [PATCH 6/8] tweak styles

---
 .../edit-site/src/components/add-new-template/style.scss  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 8cba1b118517ac..fd5cc0ded95a37 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -129,6 +129,8 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
+		position: absolute;
+		left: 50%;
 	}
 }
 
@@ -143,10 +145,6 @@
 		height: calc(100% - #{$grid-unit-80 * 2});
 		max-height: none;
 	}
-
-	.components-modal__children-container {
-		height: 100%;
-	}
 }
 
 .edit-site-custom-template-modal__contents,
@@ -195,8 +193,6 @@
 }
 
 .edit-site-add-new-template__template-list__contents {
-	padding-bottom: $grid-unit-40;
-
 	> .components-button {
 		height: 100%;
 		text-align: start;

From 0541ce91e1f7c27b12281a839a09d2f933c59d88 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 16 May 2023 16:53:10 +0100
Subject: [PATCH 7/8] Modal dimensions

---
 .../edit-site/src/components/add-new-template/style.scss    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index fd5cc0ded95a37..216c39b8c06229 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -137,13 +137,11 @@
 .edit-site-add-new-template__modal {
 	max-width: $grid-unit-80 * 13;
 	width: calc(100% - #{$grid-unit-80});
-	height: calc(100% - #{$grid-unit-80});
-	max-height: none;
+	margin-top: $grid-unit-80;
+	max-height: calc(100% - #{$grid-unit-80 * 2});
 
 	@include break-large() {
 		width: calc(100% - #{$grid-unit-80 * 2});
-		height: calc(100% - #{$grid-unit-80 * 2});
-		max-height: none;
 	}
 }
 

From cc0a32fa87c5cf355a090176edb3f2948efcacdd Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Wed, 17 May 2023 10:44:13 +0300
Subject: [PATCH 8/8] Update
 packages/edit-site/src/components/add-new-template/style.scss

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 packages/edit-site/src/components/add-new-template/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 216c39b8c06229..f0617ad62fc5b9 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -131,6 +131,7 @@
 		height: 100%;
 		position: absolute;
 		left: 50%;
+		transform: translateX(-50%);
 	}
 }