Template Editor: Use the label 'Clear customizations' when changes ar…

…e revertable (#40935) * Template Editor: Use the label 'Clear customizations' when changes are revertable * Add info text and adjust styles * Align styling with site editor * Remove fragment * Restore min-width Co-authored-by: James Koster <[email protected]>
WordPress · May 12, 2022 · 5017918 · 5017918
1 parent ff56d57
commit 5017918
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 36 deletions.
diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -48,6 +48,8 @@ export default function DeleteTemplate() {
 		templateTitle = template.title;
 	}
 
+	const isRevertable = template?.has_theme_file;
+
 	const onDelete = () => {
 		clearSelectedBlock();
 		setIsEditingTemplate( false );
@@ -77,14 +79,19 @@ export default function DeleteTemplate() {
 			<>
 				<MenuItem
 					className="edit-post-template-top-area__delete-template-button"
-					isDestructive
-					variant="secondary"
-					aria-label={ __( 'Delete template' ) }
+					isDestructive={ ! isRevertable }
 					onClick={ () => {
 						setShowConfirmDialog( true );
 					} }
+					info={
+						isRevertable
+							? __( 'Restore template to default state' )
+							: undefined
+					}
 				>
-					{ __( 'Delete template' ) }
+					{ isRevertable
+						? __( 'Clear customizations' )
+						: __( 'Delete template' ) }
 				</MenuItem>
 				<ConfirmDialog
 					isOpen={ showConfirmDialog }

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
@@ -42,31 +42,33 @@ export default function EditTemplateTitle() {
 	}
 
 	return (
-		<TextControl
-			label={ __( 'Title' ) }
-			value={ templateTitle }
-			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width".'
-			) }
-			onChange={ ( newTitle ) => {
-				const settings = getEditorSettings();
-				const newAvailableTemplates = mapValues(
-					settings.availableTemplates,
-					( existingTitle, id ) => {
-						if ( id !== template.slug ) {
-							return existingTitle;
+		<div className="edit-site-template-details__group">
+			<TextControl
+				label={ __( 'Title' ) }
+				value={ templateTitle }
+				help={ __(
+					'Give the template a title that indicates its purpose, e.g. "Full Width".'
+				) }
+				onChange={ ( newTitle ) => {
+					const settings = getEditorSettings();
+					const newAvailableTemplates = mapValues(
+						settings.availableTemplates,
+						( existingTitle, id ) => {
+							if ( id !== template.slug ) {
+								return existingTitle;
+							}
+							return newTitle;
 						}
-						return newTitle;
-					}
-				);
-				updateEditorSettings( {
-					...settings,
-					availableTemplates: newAvailableTemplates,
-				} );
-				editEntityRecord( 'postType', 'wp_template', template.id, {
-					title: newTitle,
-				} );
-			} }
-		/>
+					);
+					updateEditorSettings( {
+						...settings,
+						availableTemplates: newAvailableTemplates,
+					} );
+					editEntityRecord( 'postType', 'wp_template', template.id, {
+						title: newTitle,
+					} );
+				} }
+			/>
+		</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
@@ -49,7 +49,18 @@
 .edit-post-template-top-area__popover {
 	.components-popover__content {
 		min-width: 280px;
-		padding: $grid-unit-10;
+
+		> div {
+			padding: 0;
+		}
+	}
+
+	.edit-site-template-details__group {
+		padding: $grid-unit-20;
+
+		.components-base-control__help {
+			margin-bottom: 0;
+		}
 	}
 
 	.edit-post-template-details__description {
@@ -58,19 +69,29 @@
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: -$grid-unit-20;
-	margin-right: -$grid-unit-20;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
 	border-top: $border-width solid $gray-300;
+	padding: $grid-unit-20 $grid-unit-10;
 
 	.edit-post-template-top-area__delete-template-button {
 		display: flex;
 		justify-content: center;
+		padding: $grid-unit-05 $grid-unit;
+
+		&.is-destructive {
+			padding: inherit;
+			margin-left: $grid-unit-10;
+			margin-right: $grid-unit-10;
+			width: calc(100% - #{($grid-unit * 2)});
+
+			.components-menu-item__item {
+				width: auto;
+			}
+		}
 
 		.components-menu-item__item {
 			margin-right: 0;
 			min-width: 0;
+			width: 100%;
 		}
 	}
 }
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
@@ -23,8 +23,9 @@ export default function TemplateDescription() {
 	if ( ! description ) {
 		return null;
 	}
+
 	return (
-		<>
+		<div className="edit-site-template-details__group">
 			<Heading level={ 4 } weight={ 600 }>
 				{ title }
 			</Heading>
@@ -36,6 +37,6 @@ export default function TemplateDescription() {
 			>
 				{ description }
 			</Text>
-		</>
+		</div>
 	);
 }