Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate template actions components #59586

Merged
merged 3 commits into from
Mar 6, 2024
Merged

Consolidate template actions components #59586

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a9b07f1
Consolidate template actions components
ntsekouras Mar 5, 2024
ab491fb
use confirm dialog for clearing customizations
ntsekouras Mar 5, 2024
4fb1dfd
Update packages/edit-site/src/components/sidebar-edit-mode/template-p…
ntsekouras Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 63 additions & 46 deletions packages/edit-site/src/components/template-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,57 @@ 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 );

if ( ! isRemovable && ! isRevertable ) {
return null;
}

return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
className={ className }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<MenuGroup>
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
onClose={ onClose }
/>
<DeleteMenuItem
onRemove={ () => {
removeTemplate( template );
onRemove?.();
onClose();
} }
title={ template.title.rendered }
/>
</>
) }
{ isRevertable && (
<ResetMenuItem
template={ template }
onClose={ onClose }
/>
) }
</MenuGroup>
) }
</DropdownMenu>
);
}

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 } );
Expand All @@ -55,7 +95,6 @@ export default function TemplateActions( {
template.type,
template.id
);

createSuccessNotice(
sprintf(
/* translators: The template/part's name. */
Expand All @@ -82,48 +121,26 @@ export default function TemplateActions( {
createErrorNotice( errorMessage, { type: 'snackbar' } );
}
}

return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
className={ className }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<MenuGroup>
{ isRemovable && (
<>
<RenameMenuItem
template={ template }
onClose={ onClose }
/>
<DeleteMenuItem
onRemove={ () => {
removeTemplate( template );
onRemove?.();
onClose();
} }
title={ template.title.rendered }
/>
</>
) }
{ isRevertable && (
<MenuItem
info={ __(
'Use the template as supplied by the theme.'
) }
onClick={ () => {
revertAndSaveTemplate();
onClose();
} }
>
{ __( 'Clear customizations' ) }
</MenuItem>
) }
</MenuGroup>
) }
</DropdownMenu>
<>
<MenuItem
info={ __( 'Use the template as supplied by the theme.' ) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This text is also showing for template parts. Should we have a conditional message and show "Use the template-part as supplied by the theme."?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do that in a follow up that will update the confirmation modal for this.

onClick={ () => setIsModalOpen( true ) }
>
{ __( 'Clear customizations' ) }
</MenuItem>
<ConfirmDialog
isOpen={ isModalOpen }
onConfirm={ () => {
revertAndSaveTemplate();
onClose();
} }
onCancel={ () => setIsModalOpen( false ) }
confirmButtonText={ __( 'Clear' ) }
>
{ __( 'Are you sure you want to clear these customizations?' ) }
</ConfirmDialog>
</>
);
}

Expand Down
101 changes: 2 additions & 99 deletions test/e2e/specs/site-editor/template-revert.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
await editor.saveSiteEditorEntities();
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved

const isTemplateTabVisible = await page
.locator(
Expand Down Expand Up @@ -71,7 +70,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
await editor.saveSiteEditorEntities();

const contentAfter =
await templateRevertUtils.getCurrentSiteEditorContent();
Expand All @@ -92,7 +90,6 @@ test.describe( 'Template Revert', () => {
} );
await editor.saveSiteEditorEntities();
await templateRevertUtils.revertTemplate();
await editor.saveSiteEditorEntities();
await admin.visitSiteEditor();

const contentAfter =
Expand All @@ -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 );
Expand All @@ -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 ( {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
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,
Expand All @@ -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]'
);
Expand All @@ -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,
Expand All @@ -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]'
Expand All @@ -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 {
Expand All @@ -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./'
);
}

Expand Down
Loading