Template Editing Mode: Fix options dropdown (#37442)

* Template Editing Mode: Fix options dropdown * Remove unused TemplateDescription component * Revert "Remove unused TemplateDescription component" This reverts commit e56caee. * Display description for default core templates * Match Site Editor design * Update styling to match site editor Co-authored-by: James Koster <[email protected]>
WordPress · Dec 21, 2021 · 7fe4cc5 · 7fe4cc5
1 parent 6c6c45b
commit 7fe4cc5
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 34 deletions.
diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
@@ -29,6 +29,10 @@ export default function EditTemplateTitle() {
 	const { getEditorSettings } = useSelect( editorStore );
 	const { updateEditorSettings } = useDispatch( editorStore );
 
+	if ( template.has_theme_file ) {
+		return null;
+	}
+
 	let templateTitle = __( 'Default' );
 	if ( template?.title ) {
 		templateTitle = template.title;

diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
@@ -3,7 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
 /**
@@ -48,6 +52,12 @@ function TemplateTitle() {
 		templateTitle = template.slug;
 	}
 
+	const hasOptions = !! (
+		template.custom ||
+		template.wp_id ||
+		template.description
+	);
+
 	return (
 		<div className="edit-post-template-top-area">
 			<Button
@@ -66,32 +76,39 @@ function TemplateTitle() {
 			>
 				{ title }
 			</Button>
-			<Dropdown
-				position="bottom center"
-				contentClassName="edit-post-template-top-area__popover"
-				renderToggle={ ( { onToggle } ) => (
-					<Button
-						className="edit-post-template-title"
-						isLink
-						icon={ chevronDown }
-						showTooltip
-						onClick={ onToggle }
-						label={ __( 'Template Options' ) }
-					>
-						{ templateTitle }
-					</Button>
-				) }
-				renderContent={ () => (
-					<>
-						{ template.has_theme_file ? (
-							<TemplateDescription />
-						) : (
+			{ hasOptions ? (
+				<Dropdown
+					position="bottom center"
+					contentClassName="edit-post-template-top-area__popover"
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="edit-post-template-title"
+							isLink
+							icon={ chevronDown }
+							showTooltip
+							onClick={ onToggle }
+							label={ __( 'Template Options' ) }
+						>
+							{ templateTitle }
+						</Button>
+					) }
+					renderContent={ () => (
+						<>
 							<EditTemplateTitle />
-						) }
-						<DeleteTemplate />
-					</>
-				) }
-			/>
+							<TemplateDescription />
+							<DeleteTemplate />
+						</>
+					) }
+				/>
+			) : (
+				<Text
+					className="edit-post-template-title"
+					size="body"
+					style={ { lineHeight: '24px' } }
+				>
+					{ templateTitle }
+				</Text>
+			) }
 		</div>
 	);
 }

diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
@@ -46,14 +46,21 @@
 	}
 }
 
-.edit-post-template-top-area__popover .components-popover__content {
-	min-width: 280px;
+.edit-post-template-top-area__popover {
+	.components-popover__content {
+		min-width: 280px;
+		padding: $grid-unit-10;
+	}
+
+	.edit-post-template-details__description {
+		color: $gray-700;
+	}
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	padding: $grid-unit-15;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+	padding: $grid-unit-20;
 	padding-bottom: 0;
 	border-top: $border-width solid $gray-300;
 
@@ -63,6 +70,7 @@
 
 		.components-menu-item__item {
 			margin-right: 0;
+			min-width: 0;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
@@ -2,22 +2,40 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalText as Text } from '@wordpress/components';
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
 
 export default function TemplateDescription() {
-	const { description } = useSelect( ( select ) => {
+	const { description, title } = useSelect( ( select ) => {
 		const { getEditedPostTemplate } = select( editPostStore );
 		return {
+			title: getEditedPostTemplate().title,
 			description: getEditedPostTemplate().description,
 		};
 	}, [] );
 	if ( ! description ) {
 		return null;
 	}
-	return <Text size="body">{ description }</Text>;
+	return (
+		<>
+			<Heading level={ 4 } weight={ 600 }>
+				{ title }
+			</Heading>
+			<Text
+				className="edit-post-template-details__description"
+				size="body"
+				as="p"
+				style={ { marginTop: '12px' } }
+			>
+				{ description }
+			</Text>
+		</>
+	);
 }