From 8c1673b417e86d11ea21038a3fefeeb44a3462ab Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 3 Mar 2023 14:13:09 +0800
Subject: [PATCH 1/4] Move template description to tooltip

---
 .../add-new-template/new-template.js          | 53 ++++++++++---------
 .../components/add-new-template/style.scss    |  6 +--
 2 files changed, 31 insertions(+), 28 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 fb1a6f1fb9f79c..fcffed954af0d2 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
@@ -5,7 +5,7 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	Tooltip,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -181,17 +181,21 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
-							<MenuGroup label={ postType.labels.add_new_item }>
-								{ missingTemplates.map( ( template ) => {
-									const {
-										title,
-										description,
-										slug,
-										onClick,
-										icon,
-									} = template;
-									return (
+						<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 }
+									>
 										<MenuItem
 											icon={
 												icon ||
@@ -199,8 +203,6 @@ export default function NewTemplate( {
 												post
 											}
 											iconPosition="left"
-											info={ description }
-											key={ slug }
 											onClick={ () =>
 												onClick
 													? onClick( template )
@@ -209,17 +211,20 @@ export default function NewTemplate( {
 										>
 											{ title }
 										</MenuItem>
-									);
-								} ) }
-							</MenuGroup>
-							<MenuGroup>
+									</Tooltip>
+								);
+							} ) }
+						</MenuGroup>
+						<MenuGroup>
+							<Tooltip
+								position="top right"
+								text={ __(
+									'Custom templates can be applied to any post or page.'
+								) }
+							>
 								<MenuItem
 									icon={ customGenericTemplateIcon }
 									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
 									onClick={ () =>
 										setShowCustomGenericTemplateModal(
 											true
@@ -228,8 +233,8 @@ export default function NewTemplate( {
 								>
 									{ __( 'Custom template' ) }
 								</MenuItem>
-							</MenuGroup>
-						</NavigableMenu>
+							</Tooltip>
+						</MenuGroup>
 					</>
 				) }
 			</DropdownMenu>
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 5658d1c35a6e8d..601bc0fc872463 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,8 +1,6 @@
 .edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__popover {
-		@include break-small() {
-			min-width: 300px;
-		}
+	@include break-small() {
+		min-width: 300px;
 	}
 }
 

From afe8d43f18fabbfcff21ad6acc6089de6d7af50f Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 3 Mar 2023 14:58:45 +0800
Subject: [PATCH 2/4] Add VisuallyHidden

---
 .../add-new-template/new-template.js          | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 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 fcffed954af0d2..9890dadf8f8482 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
@@ -6,6 +6,7 @@ import {
 	MenuGroup,
 	MenuItem,
 	Tooltip,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -164,6 +165,11 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+
+	const customTemplateDescription = __(
+		'Custom templates can be applied to any post or page.'
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -210,6 +216,11 @@ export default function NewTemplate( {
 											}
 										>
 											{ 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>
 								);
@@ -218,9 +229,7 @@ export default function NewTemplate( {
 						<MenuGroup>
 							<Tooltip
 								position="top right"
-								text={ __(
-									'Custom templates can be applied to any post or page.'
-								) }
+								text={ customTemplateDescription }
 							>
 								<MenuItem
 									icon={ customGenericTemplateIcon }
@@ -232,6 +241,11 @@ export default function NewTemplate( {
 									}
 								>
 									{ __( '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>

From f9cf7a643440034d13f50c325f2a67370cf8ce11 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 3 Mar 2023 22:14:05 +0800
Subject: [PATCH 3/4] Fix styling and allow long description

---
 packages/components/src/tooltip/index.js      |  12 +-
 .../add-new-template/new-template.js          | 126 +++++++++---------
 .../components/add-new-template/style.scss    |  17 ++-
 3 files changed, 92 insertions(+), 63 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 491c7a76a97cda..65edc71049f250 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -66,6 +71,8 @@ const addPopoverToGrandchildren = ( {
 	position,
 	shortcut,
 	text,
+	className,
+	...props
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -73,12 +80,13 @@ const addPopoverToGrandchildren = ( {
 			<Popover
 				focusOnMount={ false }
 				position={ position }
-				className="components-tooltip"
+				className={ classNames( 'components-tooltip', className ) }
 				aria-hidden="true"
 				animate={ false }
 				offset={ offset }
 				anchor={ anchor }
 				shift
+				{ ...props }
 			>
 				{ text }
 				<Shortcut
@@ -113,6 +121,7 @@ function Tooltip( props ) {
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
+		...popoverProps
 	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
@@ -270,6 +279,7 @@ function Tooltip( props ) {
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,
 		...popoverData,
+		...popoverProps,
 	} );
 
 	return getElementWithPopover( {
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 9890dadf8f8482..1c653bdac06bd2 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
@@ -187,68 +187,74 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<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 }
-									>
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+						<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"
 										>
-											{ 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 }
-							>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+											<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"
 								>
-									{ __( '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>
+									<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>
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 601bc0fc872463..9ca4ecd23b340b 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,6 +1,19 @@
 .edit-site-new-template-dropdown {
-	@include break-small() {
-		min-width: 300px;
+	.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: 400px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
 	}
 }
 

From 0c57f208be838eafc8b8ca2b3ca1c24c8db867e0 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Sat, 4 Mar 2023 21:11:47 +0800
Subject: [PATCH 4/4] Use 320px

---
 packages/edit-site/src/components/add-new-template/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9ca4ecd23b340b..c84bb12213c4dd 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -7,7 +7,7 @@
 
 	// The specificity is needed to override the default tooltip styles.
 	&__menu-item-tooltip.components-tooltip .components-popover__content {
-		max-width: 400px;
+		max-width: 320px;
 		padding: $grid-unit-10 $grid-unit-15;
 		border-radius: 2px;
 		white-space: pre-wrap;