Add. Delete template action.

packages/edit-post/src/components/header/template-title/delete-template.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { pickBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+export default function DeleteTemplate() {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
+	const { getEditorSettings } = useSelect( editorStore );
+	const { updateEditorSettings, editPost } = useDispatch( editorStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const { template } = useSelect( ( select ) => {
+		const { isEditingTemplate, getEditedPostTemplate } = select(
+			editPostStore
+		);
+		const _isEditing = isEditingTemplate();
+		return {
+			template: _isEditing ? getEditedPostTemplate() : null,
+		};
+	}, [] );
+
+	if ( ! template || ! template.wp_id ) {
+		return null;
+	}
+	return (
+		<MenuGroup className="edit-post-template-top-area__second-menu-group">
+			<MenuItem
+				isDestructive
+				isTertiary
+				isLink
+				onClick={ () => {
+					if (
+						// eslint-disable-next-line no-alert
+						window.confirm(
+							__(
+								'Are you sure you want to delete this template? It may be currently in use by other pages or posts.'
+							)
+						)
+					) {
+						clearSelectedBlock();
+						setIsEditingTemplate( false );
+
+						editPost( {
+							template: '',
+						} );
+						const settings = getEditorSettings();
+						const newAvailableTemplates = pickBy(
+							settings.availableTemplates,
+							( _title, id ) => {
+								return id !== template.slug;
+							}
+						);
+						updateEditorSettings( {
+							...settings,
+							availableTemplates: newAvailableTemplates,
+						} );
+						deleteEntityRecord(
+							'postType',
+							'wp_template',
+							template.id
+						);
+					}
+				} }
+			>
+				{ __( 'Delete' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}

packages/edit-post/src/components/header/template-title/index.js

@@ -1,13 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	NavigableMenu,
+	Dropdown,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import DeleteTemplate from './delete-template';
 
 function TemplateTitle() {
 	const { template, isEditing } = useSelect( ( select ) => {
@@ -33,12 +41,33 @@ function TemplateTitle() {
 	}
 
 	return (
-		<span className="edit-post-template-title">
-			{
-				/* translators: 1: Template name. */
-				sprintf( __( 'Editing template: %s' ), templateTitle )
-			}
-		</span>
+		<Dropdown
+			position="bottom center"
+			className="edit-post-template-top-area"
+			contentClassName="edit-post-template-top-area__popover"
+			renderToggle={ ( { onToggle } ) => (
+				<>
+					<div className="edit-post-template-title">
+						{ __( 'About' ) }
+					</div>
+					<Button isSmall isTertiary onClick={ onToggle }>
+						{ templateTitle }
+					</Button>
+				</>
+			) }
+			renderContent={ () => (
+				<NavigableMenu>
+					<MenuGroup
+						className="edit-post-template-top-area__first-menu-group"
+						label={ __( 'Title' ) }
+						disabled
+					>
+						<MenuItem>{ templateTitle }</MenuItem>
+					</MenuGroup>
+					<DeleteTemplate />
+				</NavigableMenu>
+			) }
+		/>
 	);
 }
 

packages/edit-post/src/components/header/template-title/style.scss

@@ -3,3 +3,27 @@
 	flex-grow: 1;
 	justify-content: center;
 }
+
+.edit-post-template-top-area {
+	display: flex;
+	flex-direction: column;
+	align-content: space-between;
+	width: 100%;
+	align-items: center;
+}
+
+.edit-post-template-top-area__popover .components-popover__content {
+	min-width: 360px;
+}
+
+.edit-post-template-top-area__popover.components-dropdown__content .components-popover__content > div {
+	padding: 0;
+}
+
+.edit-post-template-top-area__first-menu-group {
+	padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
+}
+
+.edit-post-template-top-area__second-menu-group {
+	padding: $grid-unit-15;
+}