Add: Delete template action. (#31678)

Co-authored-by: Carolina Nymark <[email protected]>

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

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import { pickBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } 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;
+	}
+	let templateTitle = template.slug;
+	if ( template?.title ) {
+		templateTitle = template.title;
+	}
+
+	return (
+		<MenuGroup className="edit-post-template-top-area__second-menu-group">
+			<MenuItem
+				isDestructive
+				isTertiary
+				isLink
+				aria-label={ __( 'Delete template' ) }
+				onClick={ () => {
+					if (
+						// eslint-disable-next-line no-alert
+						window.confirm(
+							/* translators: %1$s: template name */
+							sprintf(
+								'Are you sure you want to delete the %s template? It may be used by other pages or posts.',
+								templateTitle
+							)
+						)
+					) {
+						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 template' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}

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

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+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 EditTemplateTitle() {
+	const { template } = useSelect( ( select ) => {
+		const { getEditedPostTemplate } = select( editPostStore );
+		return {
+			template: getEditedPostTemplate(),
+		};
+	}, [] );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { getEditorSettings } = useSelect( editorStore );
+	const { updateEditorSettings } = useDispatch( editorStore );
+
+	let templateTitle = __( 'Default' );
+	if ( template?.title ) {
+		templateTitle = template.title;
+	} else if ( !! template ) {
+		templateTitle = template.slug;
+	}
+
+	return (
+		<TextControl
+			label={ __( 'Title' ) }
+			value={ templateTitle }
+			onChange={ ( newTitle ) => {
+				const settings = getEditorSettings();
+				const newAvailableTemplates = mapValues(
+					settings.availableTemplates,
+					( existingTitle, id ) => {
+						if ( id !== template.slug ) {
+							return existingTitle;
+						}
+						return newTitle;
+					}
+				);
+				updateEditorSettings( {
+					...settings,
+					availableTemplates: newAvailableTemplates,
+				} );
+				editEntityRecord( 'postType', 'wp_template', template.id, {
+					title: newTitle,
+				} );
+			} }
+		/>
+	);
+}

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

@@ -1,13 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { Button, Dropdown } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import DeleteTemplate from './delete-template';
+import EditTemplateTitle from './edit-template-title';
 
 function TemplateTitle() {
 	const { template, isEditing } = useSelect( ( select ) => {
@@ -26,19 +29,39 @@ function TemplateTitle() {
 	}
 
 	let templateTitle = __( 'Default' );
-	if ( template?.title?.raw ) {
-		templateTitle = template.title.raw;
+	if ( template?.title ) {
+		templateTitle = template.title;
 	} else if ( !! template ) {
 		templateTitle = template.slug;
 	}
 
 	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 }
+						aria-label={ __( 'Template Options' ) }
+					>
+						{ templateTitle }
+					</Button>
+				</>
+			) }
+			renderContent={ () => (
+				<>
+					<EditTemplateTitle />
+					<DeleteTemplate />
+				</>
+			) }
+		/>
 	);
 }
 

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

@@ -3,3 +3,15 @@
 	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;
+}

packages/edit-post/src/components/sidebar/template-summary/index.js

@@ -29,7 +29,7 @@ function TemplateSummary() {
 
 				<FlexBlock>
 					<h2 className="edit-post-template-summary__title">
-						{ template?.title?.raw || template?.slug }
+						{ template?.title || template?.slug }
 					</h2>
 					<p>{ template?.description }</p>
 				</FlexBlock>

packages/edit-post/src/components/sidebar/template/index.js

@@ -79,7 +79,7 @@ export function TemplatePanel() {
 		panelTitle = sprintf(
 			/* translators: %s: template title */
 			__( 'Template: %s' ),
-			template?.title?.raw ?? template.slug
+			template?.title ?? template.slug
 		);
 	}
 

packages/edit-post/src/store/selectors.js

@@ -372,9 +372,17 @@ export const getEditedPostTemplate = createRegistrySelector(
 			'template'
 		);
 		if ( currentTemplate ) {
-			return select( coreStore )
+			const templateWithSameSlug = select( coreStore )
 				.getEntityRecords( 'postType', 'wp_template' )
 				?.find( ( template ) => template.slug === currentTemplate );
+			if ( ! templateWithSameSlug ) {
+				return templateWithSameSlug;
+			}
+			return select( coreStore ).getEditedEntityRecord(
+				'postType',
+				'wp_template',
+				templateWithSameSlug.id
+			);
 		}
 
 		const post = select( editorStore ).getCurrentPost();