From bc80a6e10fbf0951d8d11b4dd39fecb65fa7e173 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 24 Nov 2021 19:30:29 +0800
Subject: [PATCH] Add 'Clear customizations' button to template list page
 (#36802)

* Add 'Clear customizations' button

* Save entity after reverting it

* Correctly 'allowUndo' default

Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
---
 .../edit-site/src/components/list/table.js    | 74 ++++++++++++-------
 packages/edit-site/src/store/actions.js       | 61 ++++++++-------
 2 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
index d9f6832366b540..e532023347caab 100644
--- a/packages/edit-site/src/components/list/table.js
+++ b/packages/edit-site/src/components/list/table.js
@@ -18,21 +18,56 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import { store as editSiteStore } from '../../store';
 import isTemplateRemovable from '../../utils/is-template-removable';
+import isTemplateRevertable from '../../utils/is-template-revertable';
 
-function Actions( { template, onClose } ) {
-	const { removeTemplate } = useDispatch( editSiteStore );
+function Actions( { template } ) {
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+
+	const isRemovable = isTemplateRemovable( template );
+	const isRevertable = isTemplateRevertable( template );
+
+	if ( ! isRemovable && ! isRevertable ) {
+		return null;
+	}
+
+	async function revertAndSaveTemplate() {
+		await revertTemplate( template, { allowUndo: false } );
+		await saveEditedEntityRecord( 'postType', template.type, template.id );
+	}
 
 	return (
-		<MenuGroup>
-			<MenuItem
-				onClick={ () => {
-					removeTemplate( template );
-					onClose();
-				} }
-			>
-				{ __( 'Remove template' ) }
-			</MenuItem>
-		</MenuGroup>
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-list-table__actions"
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					{ isRemovable && (
+						<MenuItem
+							onClick={ () => {
+								removeTemplate( template );
+								onClose();
+							} }
+						>
+							{ __( 'Remove template' ) }
+						</MenuItem>
+					) }
+					{ isRevertable && (
+						<MenuItem
+							info={ __( 'Restore template to theme default' ) }
+							onClick={ () => {
+								revertAndSaveTemplate();
+								onClose();
+							} }
+						>
+							{ __( 'Clear customizations' ) }
+						</MenuItem>
+					) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
 	);
 }
 
@@ -126,20 +161,7 @@ export default function Table( { templateType } ) {
 							{ template.theme }
 						</td>
 						<td className="edit-site-list-table-column" role="cell">
-							{ isTemplateRemovable( template ) && (
-								<DropdownMenu
-									icon={ moreVertical }
-									label={ __( 'Actions' ) }
-									className="edit-site-list-table__actions"
-								>
-									{ ( { onClose } ) => (
-										<Actions
-											template={ template }
-											onClose={ onClose }
-										/>
-									) }
-								</DropdownMenu>
-							) }
+							<Actions template={ template } />
 						</td>
 					</tr>
 				) ) }
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 4f9dc3f4184898..7b3fb3d3a2cf77 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -338,9 +338,12 @@ export function setIsListViewOpened( isOpen ) {
 /**
  * Reverts a template to its original theme-provided file.
  *
- * @param {Object} template The template to revert.
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
  */
-export function* revertTemplate( template ) {
+export function* revertTemplate( template, { allowUndo = true } = {} ) {
 	if ( ! isTemplateRevertable( template ) ) {
 		yield controls.dispatch(
 			noticesStore,
@@ -428,32 +431,40 @@ export function* revertTemplate( template ) {
 			}
 		);
 
-		const undoRevert = async () => {
-			await dispatch( coreStore ).editEntityRecord(
-				'postType',
-				template.type,
-				edited.id,
+		if ( allowUndo ) {
+			const undoRevert = async () => {
+				await dispatch( coreStore ).editEntityRecord(
+					'postType',
+					template.type,
+					edited.id,
+					{
+						content: serializeBlocks,
+						blocks: edited.blocks,
+						source: 'custom',
+					}
+				);
+			};
+			yield controls.dispatch(
+				noticesStore,
+				'createSuccessNotice',
+				__( 'Template reverted.' ),
 				{
-					content: serializeBlocks,
-					blocks: edited.blocks,
-					source: 'custom',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: undoRevert,
+						},
+					],
 				}
 			);
-		};
-		yield controls.dispatch(
-			noticesStore,
-			'createSuccessNotice',
-			__( 'Template reverted.' ),
-			{
-				type: 'snackbar',
-				actions: [
-					{
-						label: __( 'Undo' ),
-						onClick: undoRevert,
-					},
-				],
-			}
-		);
+		} else {
+			yield controls.dispatch(
+				noticesStore,
+				'createSuccessNotice',
+				__( 'Template reverted.' )
+			);
+		}
 	} catch ( error ) {
 		const errorMessage =
 			error.message && error.code !== 'unknown_error'