diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
index 9931fa93724145..c5af0f2201088f 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -19,16 +19,20 @@ import { __ } from '@wordpress/i18n';
import { useAsyncList } from '@wordpress/compose';
import { serialize } from '@wordpress/blocks';
import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../../store';
-import TemplateActions from './template-actions';
+import TemplateActions from '../../template-actions';
import TemplateAreas from './template-areas';
import SidebarCard from '../sidebar-card';
import { useAvailablePatterns } from './hooks';
import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
const CARD_ICONS = {
wp_block: symbol,
@@ -77,7 +81,7 @@ export default function TemplatePanel() {
},
[]
);
-
+ const history = useHistory();
const availablePatterns = useAvailablePatterns( record );
const { editEntityRecord } = useDispatch( coreStore );
@@ -100,7 +104,19 @@ export default function TemplatePanel() {
title={ decodeEntities( title ) }
icon={ CARD_ICONS[ record?.type ] ?? icon }
description={ decodeEntities( description ) }
- actions={ }
+ actions={
+ {
+ history.push( {
+ path: `/${ postType }/all`,
+ } );
+ } }
+ />
+ }
>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
deleted file mode 100644
index e4b8d49499949b..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import isTemplateRevertable from '../../../utils/is-template-revertable';
-
-export default function Actions( { template } ) {
- const { revertTemplate } = useDispatch( editSiteStore );
- const isRevertable = isTemplateRevertable( template );
-
- if ( ! isRevertable ) {
- return null;
- }
-
- return (
-
- { ( { onClose } ) => (
-
- { isRevertable && (
-
- ) }
-
- ) }
-
- );
-}
diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js
index f48e69245da1fe..32a8b4ee176d71 100644
--- a/packages/edit-site/src/components/template-actions/index.js
+++ b/packages/edit-site/src/components/template-actions/index.js
@@ -36,10 +36,7 @@ export default function TemplateActions( {
select( coreStore ).getEntityRecord( 'postType', postType, postId ),
[ postType, postId ]
);
- const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
- const { saveEditedEntityRecord } = useDispatch( coreStore );
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( noticesStore );
+ const { removeTemplate } = useDispatch( editSiteStore );
const isRemovable = isTemplateRemovable( template );
const isRevertable = isTemplateRevertable( template );
@@ -47,6 +44,49 @@ export default function TemplateActions( {
return null;
}
+ return (
+
+ { ( { onClose } ) => (
+
+ { isRemovable && (
+ <>
+
+ {
+ removeTemplate( template );
+ onRemove?.();
+ onClose();
+ } }
+ title={ template.title.rendered }
+ />
+
+ ) }
+ { isRevertable && (
+
+ ) }
+
+ ) }
+
+ );
+}
+
+function ResetMenuItem( { template, onClose } ) {
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
+ const { revertTemplate } = useDispatch( editSiteStore );
+ const { saveEditedEntityRecord } = useDispatch( coreStore );
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
async function revertAndSaveTemplate() {
try {
await revertTemplate( template, { allowUndo: false } );
@@ -55,7 +95,6 @@ export default function TemplateActions( {
template.type,
template.id
);
-
createSuccessNotice(
sprintf(
/* translators: The template/part's name. */
@@ -82,48 +121,26 @@ export default function TemplateActions( {
createErrorNotice( errorMessage, { type: 'snackbar' } );
}
}
-
return (
-
- { ( { onClose } ) => (
-
- { isRemovable && (
- <>
-
- {
- removeTemplate( template );
- onRemove?.();
- onClose();
- } }
- title={ template.title.rendered }
- />
-
- ) }
- { isRevertable && (
-
- ) }
-
- ) }
-
+ <>
+
+ {
+ revertAndSaveTemplate();
+ onClose();
+ } }
+ onCancel={ () => setIsModalOpen( false ) }
+ confirmButtonText={ __( 'Clear' ) }
+ >
+ { __( 'Are you sure you want to clear these customizations?' ) }
+
+
);
}
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
index 4cc18448608015..712a51810da114 100644
--- a/test/e2e/specs/site-editor/template-revert.spec.js
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -37,7 +37,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
const isTemplateTabVisible = await page
.locator(
@@ -71,7 +70,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
const contentAfter =
await templateRevertUtils.getCurrentSiteEditorContent();
@@ -92,7 +90,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
await admin.visitSiteEditor();
const contentAfter =
@@ -115,7 +112,6 @@ test.describe( 'Template Revert', () => {
// Revert template and check state.
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
const contentAfterSave =
await templateRevertUtils.getCurrentSiteEditorContent();
expect( contentAfterSave ).not.toEqual( contentBefore );
@@ -129,32 +125,6 @@ test.describe( 'Template Revert', () => {
expect( contentAfterUndo ).toEqual( contentBefore );
} );
- test( 'should show the edited content after revert and clicking undo in the notice', async ( {
- editor,
- page,
- templateRevertUtils,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Test' },
- } );
- await editor.saveSiteEditorEntities();
- const contentBefore =
- await templateRevertUtils.getCurrentSiteEditorContent();
-
- await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
-
- // Click the snackbar "Undo" button.
- await page.click(
- 'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
- );
-
- const contentAfter =
- await templateRevertUtils.getCurrentSiteEditorContent();
- expect( contentAfter ).toEqual( contentBefore );
- } );
-
test( 'should show the original content after revert, clicking undo then redo in the header toolbar', async ( {
editor,
page,
@@ -169,7 +139,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
await page.click(
'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
);
@@ -187,43 +156,6 @@ test.describe( 'Template Revert', () => {
expect( contentAfterRedo ).toEqual( contentBefore );
} );
- test( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async ( {
- editor,
- page,
- templateRevertUtils,
- } ) => {
- const contentBefore =
- await templateRevertUtils.getCurrentSiteEditorContent();
-
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Test' },
- } );
- await editor.saveSiteEditorEntities();
- await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
-
- // Click undo in the snackbar. This reverts revert template action.
- await page.click(
- 'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
- );
-
- //Check we have dummy content.
- const contentAfterFirstUndo =
- await templateRevertUtils.getCurrentSiteEditorContent();
- expect( contentAfterFirstUndo ).not.toEqual( contentBefore );
-
- // Click undo again, this time in the header. Reverts initial dummy content.
- await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
- );
-
- // Check dummy content is gone.
- const contentAfterSecondUndo =
- await templateRevertUtils.getCurrentSiteEditorContent();
- expect( contentAfterSecondUndo ).toEqual( contentBefore );
- } );
-
test( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async ( {
admin,
editor,
@@ -239,7 +171,6 @@ test.describe( 'Template Revert', () => {
await templateRevertUtils.getCurrentSiteEditorContent();
await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
await page.click(
'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
@@ -253,35 +184,6 @@ test.describe( 'Template Revert', () => {
await templateRevertUtils.getCurrentSiteEditorContent();
expect( contentAfter ).toEqual( contentBefore );
} );
-
- test( 'should show the edited content after revert, clicking undo in the notice and reload', async ( {
- admin,
- editor,
- page,
- templateRevertUtils,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Test' },
- } );
- await editor.saveSiteEditorEntities();
- const contentBefore =
- await templateRevertUtils.getCurrentSiteEditorContent();
-
- await templateRevertUtils.revertTemplate();
- await editor.saveSiteEditorEntities();
-
- await page.click(
- 'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
- );
-
- await editor.saveSiteEditorEntities();
- await admin.visitSiteEditor();
- await editor.canvas.locator( 'body' ).click();
- const contentAfter =
- await templateRevertUtils.getCurrentSiteEditorContent();
- expect( contentAfter ).toEqual( contentBefore );
- } );
} );
class TemplateRevertUtils {
@@ -306,8 +208,9 @@ class TemplateRevertUtils {
'role=region[name="Editor settings"i] >> role=button[name="Actions"i]'
);
await this.page.click( 'role=menuitem[name=/Clear customizations/i]' );
+ await this.page.getByRole( 'button', { name: 'Clear' } ).click();
await this.page.waitForSelector(
- 'role=button[name="Dismiss this notice"i] >> text="Template reverted."'
+ 'role=button[name="Dismiss this notice"i] >> text=/ reverted./'
);
}