Site Editor: Add rename page action

packages/edit-site/src/components/actions/index.js

@@ -8,10 +8,11 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
 	Button,
+	TextControl,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -411,3 +412,80 @@ export const postRevisionsAction = {
 		document.location.href = href;
 	},
 };
+
+export const renamePostAction = {
+	id: 'rename-post',
+	label: __( 'Rename' ),
+	isEligible( post ) {
+		return post.status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const originalTitle = decodeEntities(
+			typeof item.title === 'string' ? item.title : item.title.rendered
+		);
+		const [ title, setTitle ] = useState( () => originalTitle );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onRename( event ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice( __( 'Name updated' ), {
+					type: 'snackbar',
+				} );
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while updating the name' );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};

packages/edit-site/src/components/page-pages/index.js

@@ -35,6 +35,7 @@ import {
 } from '../../utils/constants';
 
 import {
+	renamePostAction,
 	trashPostAction,
 	usePermanentlyDeletePostAction,
 	useRestorePostAction,
@@ -356,6 +357,7 @@ export default function PagePages() {
 			restorePostAction,
 			permanentlyDeletePostAction,
 			postRevisionsAction,
+			renamePostAction,
 			trashPostAction,
 		],
 		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]

packages/edit-site/src/components/page-templates-template-parts/actions.js

@@ -248,16 +248,25 @@ export const renameTemplateAction = {
 				<VStack spacing="5">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Name' ) }
 						value={ editedTitle }
 						onChange={ setEditedTitle }
 						required
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ closeModal }>
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
 							{ __( 'Cancel' ) }
 						</Button>
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
 							{ __( 'Save' ) }
 						</Button>
 					</HStack>