Data Views: Add action for pages to set site homepage

packages/core-data/src/private-selectors.ts

@@ -151,7 +151,6 @@ export const getHomePage = createRegistrySelector( ( select ) =>
 			return { postType: 'wp_template', postId: frontPageTemplateId };
 		},
 		( state ) => [
-			// @ts-expect-error
 			getEntityRecord( state, 'root', 'site' ),
 			getDefaultTemplateId( state, {
 				slug: 'front-page',

packages/core-data/src/selectors.ts

@@ -310,7 +310,7 @@ export interface GetEntityRecord {
 		state: State,
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	): EntityRecord | undefined;
 
@@ -321,7 +321,7 @@ export interface GetEntityRecord {
 	>(
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	) => EntityRecord | undefined;
 	__unstableNormalizeArgs?: ( args: EntityRecordArgs ) => EntityRecordArgs;
@@ -350,7 +350,7 @@ export const getEntityRecord = createSelector(
 		state: State,
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	): EntityRecord | undefined => {
 		const queriedState =

packages/dataviews/src/components/dataviews-item-actions/index.tsx

@@ -113,7 +113,7 @@ export function ActionModal< Item >( {
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal ?? ( () => {} ) }
 			focusOnMount="firstContentElement"
-			size="small"
+			size="medium"
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id
 			) }` }

packages/editor/src/components/post-actions/actions.js

@@ -3,12 +3,14 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useEffect } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useSetAsHomepageAction } from './set-as-homepage';
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
 	const { defaultActions } = useSelect(
@@ -21,19 +23,47 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		[ postType ]
 	);
 
+	const { canManageOptions, hasFrontPageTemplate } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const templates = getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+			} );
+
+			return {
+				canManageOptions: select( coreStore ).canUser( 'update', {
+					kind: 'root',
+					name: 'site',
+				} ),
+				hasFrontPageTemplate: !! templates?.find(
+					( template ) =>
+						'slug' in template && template.slug === 'front-page'
+				),
+			};
+		}
+	);
+
+	const setAsHomepageAction = useSetAsHomepageAction();
+	const shouldShowSetAsHomepageAction =
+		canManageOptions || ! hasFrontPageTemplate;
+
 	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
 	useEffect( () => {
 		registerPostTypeActions( postType );
 	}, [ registerPostTypeActions, postType ] );
 
 	return useMemo( () => {
+		let actions = [
+			shouldShowSetAsHomepageAction ? setAsHomepageAction : [],
+			...defaultActions,
+		];
 		// Filter actions based on provided context. If not provided
 		// all actions are returned. We'll have a single entry for getting the actions
 		// and the consumer should provide the context to filter the actions, if needed.
 		// Actions should also provide the `context` they support, if it's specific, to
 		// compare with the provided context to get all the actions.
 		// Right now the only supported context is `list`.
-		const actions = defaultActions.filter( ( action ) => {
+		actions = actions.filter( ( action ) => {
 			if ( ! action.context ) {
 				return true;
 			}
@@ -88,5 +118,11 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		}
 
 		return actions;
-	}, [ defaultActions, onActionPerformed, context ] );
+	}, [
+		context,
+		defaultActions,
+		onActionPerformed,
+		setAsHomepageAction,
+		shouldShowSetAsHomepageAction,
+	] );
 }

packages/editor/src/components/post-actions/index.js

@@ -123,7 +123,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 						action.id
 					) }` }
 					focusOnMount="firstContentElement"
-					size="small"
+					size="medium"
 				>
 					<RenderModal
 						items={ [ item ] }

packages/editor/src/components/post-actions/set-as-homepage.js

@@ -0,0 +1,217 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect, resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../utils/get-item-title';
+import { unlock } from '../../lock-unlock';
+
+const SetAsHomepageModal = ( { items, closeModal, onActionPerformed } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { showOnFront, currentHomePage } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const { getHomePage } = unlock( select( coreStore ) );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		const homePage = getHomePage();
+		return {
+			showOnFront: siteSettings?.show_on_front,
+			currentHomePage: homePage.postId,
+		};
+	} );
+	const [ currentHomePageTitle, setCurrentHomePageTitle ] = useState( '' );
+	const isPageDraft = item.status === 'draft';
+
+	const { getEntityRecord } = resolveSelect( coreStore );
+	const { saveEditedEntityRecord, saveEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	useEffect( () => {
+		const handleGetCurrentHomepage = async () => {
+			const currentHomePageItem = await getEntityRecord(
+				'postType',
+				'page',
+				currentHomePage
+			);
+			setCurrentHomePageTitle( getItemTitle( currentHomePageItem ) );
+		};
+		handleGetCurrentHomepage();
+	}, [ currentHomePage, getEntityRecord ] );
+
+	async function onSetPageAsHomepage( event ) {
+		event.preventDefault();
+
+		try {
+			// If selected page is set to draft, publish the page.
+			if ( isPageDraft ) {
+				await saveEntityRecord( 'postType', 'page', {
+					...item,
+					status: 'publish',
+				} );
+			}
+
+			// Save new home page settings.
+			await saveEntityRecord( 'root', 'site', {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			closeModal?.();
+
+			await saveEditedEntityRecord( 'root', 'site', undefined, {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			createSuccessNotice( __( 'Homepage updated' ), {
+				type: 'snackbar',
+			} );
+
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const typedError = error;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while setting the homepage' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	const renderModalBody = () => {
+		if ( 'posts' === showOnFront ) {
+			return (
+				<>
+					<Text>
+						{ sprintf(
+							// translators: %s: title of the page to be set as the homepage.
+							__(
+								'Set "%s" as the site homepage? This will replace the current homepage which is set to display latest posts.'
+							),
+							pageTitle
+						) }
+					</Text>
+				</>
+			);
+		}
+
+		if ( isPageDraft ) {
+			return (
+				<>
+					<Text>
+						{ sprintf(
+							// translators: %s: title of the page to be set as the homepage.
+							__(
+								'"%s" is a draft and will be published automatically if set as the homepage. Publish page and set as the site homepage?'
+							),
+							pageTitle
+						) }
+					</Text>
+				</>
+			);
+		}
+
+		const modalTranslatedString =
+			// translators: %1$s: title of page to be set as the home page. %2$s: title of the current home page.
+			__(
+				'Set "%1$s" as the site homepage? This will replace the current homepage: "%2$s"'
+			);
+
+		return (
+			<Text>
+				{ sprintf(
+					modalTranslatedString,
+					pageTitle,
+					currentHomePageTitle
+				) }{ ' ' }
+			</Text>
+		);
+	};
+
+	return (
+		<form onSubmit={ onSetPageAsHomepage }>
+			<VStack spacing="5">
+				{ renderModalBody() }
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+					>
+						{
+							// translators: Button to confirm setting the specified page as the homepage.
+							isPageDraft
+								? __( 'Publish and set homepage' )
+								: __( 'Set homepage' )
+						}
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+};
+
+export const useSetAsHomepageAction = () => {
+	const { pageOnFront, pageForPosts } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
+		};
+	} );
+
+	return useMemo(
+		() => ( {
+			id: 'set-as-homepage',
+			label: __( 'Set as homepage' ),
+			isEligible( post ) {
+				if ( post.status === 'trash' ) {
+					return false;
+				}
+
+				if ( post.type !== 'page' ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the homepage.
+				if ( pageOnFront === post.id ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the page for posts.
+				if ( pageForPosts === post.id ) {
+					return false;
+				}
+
+				return true;
+			},
+			RenderModal: SetAsHomepageModal,
+		} ),
+		[ pageForPosts, pageOnFront ]
+	);
+};

packages/editor/src/dataviews/types.ts

@@ -1,5 +1,5 @@
 type PostStatus =
-	| 'published'
+	| 'publish'
 	| 'draft'
 	| 'pending'
 	| 'private'

packages/editor/src/utils/get-item-title.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+
+// This function is copied from packages/editor/src/dataviews/actions/utils.ts.
+
+export function getItemTitle( item ) {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( item.title && 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( item.title && 'raw' in item.title ) {
+		return decodeEntities( item.title.raw );
+	}
+	return '';
+}

packages/fields/src/actions/utils.ts

@@ -30,7 +30,7 @@ export function isTemplateOrTemplatePart(
 	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
 }
 
-export function getItemTitle( item: Post ) {
+export function getItemTitle( item: Post ): string {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}

packages/fields/src/fields/title/title-view.tsx

@@ -17,11 +17,10 @@ import { getItemTitle } from '../../actions/utils';
 const TitleView = ( { item }: { item: BasePost } ) => {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
-		const siteSettings: Settings | undefined = getEntityRecord(
+		const siteSettings = getEntityRecord(
 			'root',
-			'site',
-			''
-		);
+			'site'
+		) as Partial< Settings >;
 		return {
 			frontPageId: siteSettings?.page_on_front,
 			postsPageId: siteSettings?.page_for_posts,