Site Editor: Revert templates to their original theme-provided files

lib/templates.php

@@ -374,6 +374,20 @@ function filter_rest_prepare_add_wp_theme_slug_and_file_based( $response ) {
 			$file_based                   = in_array( '_wp_file_based', $wp_theme_slugs, true );
 			$response->data['file_based'] = $file_based;
 
+			$response->data['original_file_exists'] = false;
+			$template_files                         = array_unique(
+				array_merge(
+					_gutenberg_get_template_paths( get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'block-templates' ),
+					_gutenberg_get_template_paths( get_template_directory() . DIRECTORY_SEPARATOR . 'block-templates' )
+				)
+			);
+			foreach ( $template_files as $template_file ) {
+				if ( basename( $template_file, '.html' ) === $response->data['slug'] ) {
+					$response->data['original_file_exists'] = true;
+					break;
+				}
+			}
+
 			$theme_slug = array_values(
 				array_filter(
 					$wp_theme_slugs,

packages/edit-site/src/components/template-details/index.js

@@ -8,20 +8,33 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { isTemplateRevertable } from '../../utils';
 import { MENU_TEMPLATES } from '../navigation-sidebar/navigation-panel/constants';
 
 export default function TemplateDetails( { template, onClose } ) {
-	const { title, description } = useSelect(
-		( select ) =>
-			select( 'core/editor' ).__experimentalGetTemplateInfo( template ),
-		[]
+	const { title, description, currentTheme } = useSelect( ( select ) => {
+		const templateInfo = select(
+			'core/editor'
+		).__experimentalGetTemplateInfo( template );
+		return {
+			title: templateInfo?.title,
+			description: templateInfo?.description,
+			currentTheme: select( 'core' ).getCurrentTheme()?.stylesheet,
+		};
+	}, [] );
+	const { openNavigationPanelToMenu, revertTemplate } = useDispatch(
+		'core/edit-site'
 	);
-	const { openNavigationPanelToMenu } = useDispatch( 'core/edit-site' );
 
 	if ( ! template ) {
 		return null;
 	}
 
+	const revert = () => {
+		revertTemplate( template );
+		onClose();
+	};
+
 	const showTemplateInSidebar = () => {
 		onClose();
 		openNavigationPanelToMenu( MENU_TEMPLATES );
@@ -55,6 +68,19 @@ export default function TemplateDetails( { template, onClose } ) {
 				) }
 			</div>
 
+			{ isTemplateRevertable( template, currentTheme ) && (
+				<div className="edit-site-template-details">
+					<Button isLink onClick={ revert }>
+						{ __( 'Revert' ) }
+					</Button>
+					<Text variant="caption">
+						{ __(
+							'Reset this template to the theme supplied default'
+						) }
+					</Text>
+				</div>
+			) }
+
 			<Button
 				className="edit-site-template-details__show-all-button"
 				onClick={ showTemplateInSidebar }

packages/edit-site/src/components/template-details/style.scss

@@ -1,5 +1,10 @@
 .edit-site-template-details {
-	margin: $grid-unit-10 $grid-unit-20;
+	border-bottom: $border-width solid $gray-400;
+	padding: $grid-unit-10 $grid-unit-20;
+
+	&:last-of-type {
+		border-bottom: none;
+	}
 
 	p {
 		padding: $grid-unit-10 0;

packages/edit-site/src/store/actions.js

@@ -3,11 +3,13 @@
  */
 import { controls } from '@wordpress/data';
 import { apiFetch } from '@wordpress/data-controls';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { findTemplate } from './controls';
+import { isTemplateRevertable } from '../utils';
 
 /**
  * Returns an action object used to toggle a feature flag.
@@ -228,3 +230,82 @@ export function updateSettings( settings ) {
 		settings,
 	};
 }
+
+/**
+ * Reverts a template to its original theme-provided file.
+ *
+ * This works with the assumption that the template being reverted
+ * belongs to the current theme.
+ *
+ * @param {Object} template The template to revert.
+ */
+export function* revertTemplate( template ) {
+	const currentTheme = yield controls.resolveSelect(
+		'core',
+		'getCurrentTheme'
+	);
+
+	if ( ! isTemplateRevertable( template, currentTheme?.stylesheet ) ) {
+		yield controls.dispatch(
+			'core/notices',
+			'createErrorNotice',
+			__( 'This template is not revertable' ),
+			{ type: 'snackbar' }
+		);
+		return;
+	}
+
+	try {
+		yield controls.dispatch(
+			'core',
+			'deleteEntityRecord',
+			'postType',
+			'wp_template',
+			template.id
+		);
+
+		const fileTemplates = yield controls.resolveSelect(
+			'core',
+			'getEntityRecords',
+			'postType',
+			'wp_template',
+			{
+				slug: template.slug,
+				status: 'auto-draft',
+				per_page: 1,
+				theme: currentTheme?.stylesheet,
+			}
+		);
+
+		if ( ! fileTemplates.length ) {
+			yield controls.dispatch(
+				'core/notices',
+				'createErrorNotice',
+				__(
+					'The editor has encountered an unexpected error. Please reload.'
+				),
+				{ type: 'snackbar' }
+			);
+			return;
+		}
+
+		yield setTemplate( fileTemplates[ 0 ].id );
+		yield controls.dispatch(
+			'core/notices',
+			'createSuccessNotice',
+			__( 'Template reverted' ),
+			{ type: 'snackbar' }
+		);
+	} catch ( error ) {
+		const errorMessage =
+			error.message && error.code !== 'unknown_error'
+				? error.message
+				: __( 'Template revert failed. Please reload.' );
+		yield controls.dispatch(
+			'core/notices',
+			'createErrorNotice',
+			errorMessage,
+			{ type: 'snackbar' }
+		);
+	}
+}

packages/edit-site/src/utils/index.js

@@ -1 +1,2 @@
 export { default as findTemplate } from './find-template';
+export { default as isTemplateRevertable } from './is-template-revertable';

packages/edit-site/src/utils/is-template-revertable.js

@@ -0,0 +1,20 @@
+/**
+ * Check if a template is revertable to its original theme-provided template file.
+ *
+ * @param {Object} template The template entity to check.
+ * @param {string} currentTheme The current theme slug (stylesheet).
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRevertable( template, currentTheme ) {
+	if ( ! template || ! currentTheme ) {
+		return false;
+	}
+	return (
+		'auto-draft' !== template.status &&
+		/* eslint-disable camelcase */
+		template?.file_based &&
+		template?.original_file_exists &&
+		currentTheme === template?.wp_theme_slug
+		/* eslint-enable camelcase */
+	);
+}