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 all commits
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
22 changes: 19 additions & 3 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -77,7 +81,7 @@ export default function TemplatePanel() {
},
[]
);

const history = useHistory();
const availablePatterns = useAvailablePatterns( record );
const { editEntityRecord } = useDispatch( coreStore );

Expand All @@ -100,7 +104,19 @@ export default function TemplatePanel() {
title={ decodeEntities( title ) }
icon={ CARD_ICONS[ record?.type ] ?? icon }
description={ decodeEntities( description ) }
actions={ <TemplateActions template={ record } /> }
actions={
<TemplateActions
postType={ postType }
postId={ postId }
className="edit-site-template-card__actions"
toggleProps={ { size: 'small' } }
onRemove={ () => {
history.push( {
path: `/${ postType }/all`,
} );
} }
/>
}
>
<TemplateAreas />
</SidebarCard>
Expand Down
49 changes: 0 additions & 49 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
View file
Open in desktop

This file was deleted.

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
Loading
Loading