Adds basic action and modal to set page as homepage

packages/editor/src/dataviews/actions/set-as-homepage.tsx

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_POST_TYPE } from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+import { getItemTitle } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const renamePost: Action< PostWithPermissions > = {
+	id: 'set-as-homepage',
+	label: __( 'Set as homepage' ),
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+
+		// TODO: add user permissions check.
+		return post.type === PAGE_POST_TYPE;
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ title ] = useState( () => getItemTitle( item ) );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onSetAsHomepage( event: React.FormEvent ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'root', 'site', undefined, {
+					page_on_front: item.id,
+				} );
+				closeModal?.();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'root', 'site', undefined, {
+					page_on_front: item.id,
+				} );
+				createSuccessNotice( __( 'This page set as homepage' ), {
+					type: 'snackbar',
+				} );
+				onActionPerformed?.( items );
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __(
+								'An error occurred while setting this page as homepage'
+						  );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onSetAsHomepage }>
+				<VStack spacing="5">
+					<Text>{ title }</Text>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal?.();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Set as homepage' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default renamePost;

packages/editor/src/dataviews/store/private-actions.ts

@@ -18,6 +18,7 @@ import permanentlyDeletePost from '../actions/permanently-delete-post';
 import renamePost from '../actions/rename-post';
 import reorderPage from '../actions/reorder-page';
 import restorePost from '../actions/restore-post';
+import setAsHomepage from '../actions/set-as-homepage';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -115,6 +116,7 @@ export const registerPostTypeActions =
 				? reorderPage
 				: undefined,
 			postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
+			postTypeConfig.slug === 'page' ? setAsHomepage : undefined,
 			resetPost,
 			restorePost,
 			deletePost,

packages/editor/src/store/constants.ts

@@ -23,6 +23,7 @@ export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
 export const PATTERN_POST_TYPE = 'wp_block';
 export const NAVIGATION_POST_TYPE = 'wp_navigation';
+export const PAGE_POST_TYPE = 'page';
 export const TEMPLATE_ORIGINS = {
 	custom: 'custom',
 	theme: 'theme',