diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js index 0b54d6ef3ea716..b4618dcae966d5 100644 --- a/packages/edit-site/src/components/template-actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -3,8 +3,14 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import { useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; +import { + DropdownMenu, + MenuGroup, + MenuItem, + __experimentalConfirmDialog as ConfirmDialog, +} from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; @@ -84,17 +90,14 @@ export default function TemplateActions( { template={ template } onClose={ onClose } /> - { + { removeTemplate( template ); onRemove?.(); onClose(); } } - > - { __( 'Delete' ) } - + isTemplate={ template.type === 'wp_template' } + /> ) } { isRevertable && ( @@ -115,3 +118,30 @@ export default function TemplateActions( { ); } + +function DeleteMenuItem( { onRemove, isTemplate } ) { + const [ isModalOpen, setIsModalOpen ] = useState( false ); + return ( + <> + setIsModalOpen( true ) } + > + { __( 'Delete' ) } + + setIsModalOpen( false ) } + confirmButtonText={ __( 'Delete' ) } + > + { isTemplate + ? __( 'Are you sure you want to delete this template?' ) + : __( + 'Are you sure you want to delete this template part?' + ) } + + + ); +}