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>
WordPress · Nov 28, 2021 · f4d9af3 · f4d9af3
1 parent b01f8e1
commit f4d9af3
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 51 deletions.
diff --git 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
@@ -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'