From a9b07f14eb9474708ea85a164880e5db817c66b5 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 5 Mar 2024 12:04:17 +0200 Subject: [PATCH 1/3] Consolidate template actions components --- .../sidebar-edit-mode/template-panel/index.js | 22 +++++++-- .../template-panel/template-actions.js | 49 ------------------- 2 files changed, 19 insertions(+), 52 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js 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..3949bd9421d278 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 && ( - { - revertTemplate( template ); - onClose(); - } } - > - { __( 'Clear customizations' ) } - - ) } - - ) } - - ); -} From ab491fbb3831ba7c66221eea20cc4e35d735afaf Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 5 Mar 2024 17:04:26 +0200 Subject: [PATCH 2/3] use confirm dialog for clearing customizations --- .../src/components/template-actions/index.js | 109 ++++++++++-------- .../specs/site-editor/template-revert.spec.js | 101 +--------------- 2 files changed, 65 insertions(+), 145 deletions(-) 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(); - } } - > - { __( 'Clear customizations' ) } - - ) } - - ) } - + <> + setIsModalOpen( true ) } + > + { __( 'Clear customizations' ) } + + { + 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./' ); } From 4fb1dfde92275da87cdfecf046b1375fc18e31ea Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 6 Mar 2024 08:21:59 +0200 Subject: [PATCH 3/3] Update packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../src/components/sidebar-edit-mode/template-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3949bd9421d278..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 @@ -109,7 +109,7 @@ export default function TemplatePanel() { postType={ postType } postId={ postId } className="edit-site-template-card__actions" - toggleProps={ { isSmall: true } } + toggleProps={ { size: 'small' } } onRemove={ () => { history.push( { path: `/${ postType }/all`,