Data Views: Add action for pages to set site homepage

docs/reference-guides/data/data-core.md

@@ -359,7 +359,7 @@ _Parameters_
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _key_ `EntityRecordKey`: Record's key
+-   _key_ `EntityRecordKey`: Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
 -   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
 
 _Returns_

packages/core-data/README.md

@@ -581,7 +581,7 @@ _Parameters_
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _key_ `EntityRecordKey`: Record's key
+-   _key_ `EntityRecordKey`: Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
 -   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
 
 _Returns_

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;
@@ -335,7 +335,7 @@ export interface GetEntityRecord {
  * @param state State tree
  * @param kind  Entity kind.
  * @param name  Entity name.
- * @param key   Record's key
+ * @param key   Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
  * @param query Optional query. If requesting specific
  *              fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
  *
@@ -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

@@ -114,7 +114,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,46 @@ 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 ) => template?.slug === 'front-page'
+				),
+			};
+		}
+	);
+
+	const setAsHomepageAction = useSetAsHomepageAction();
+	const shouldShowSetAsHomepageAction =
+		canManageOptions && ! hasFrontPageTemplate;
+
 	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
 	useEffect( () => {
 		registerPostTypeSchema( postType );
 	}, [ registerPostTypeSchema, postType ] );
 
 	return useMemo( () => {
+		let actions = [
+			...defaultActions,
+			shouldShowSetAsHomepageAction ? setAsHomepageAction : [],
+		];
 		// 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 +117,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,174 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../dataviews/actions/utils';
+
+const SetAsHomepageModal = ( { items, closeModal } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { showOnFront, currentHomePage, isSaving } = useSelect(
+		( select ) => {
+			const { getEntityRecord, isSavingEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const currentHomePageItem = getEntityRecord(
+				'postType',
+				'page',
+				siteSettings?.page_on_front
+			);
+			return {
+				showOnFront: siteSettings?.show_on_front,
+				currentHomePage: currentHomePageItem,
+				isSaving: isSavingEntityRecord( 'root', 'site' ),
+			};
+		}
+	);
+	const currentHomePageTitle = currentHomePage
+		? getItemTitle( currentHomePage )
+		: '';
+
+	const { saveEditedEntityRecord, saveEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onSetPageAsHomepage( event ) {
+		event.preventDefault();
+
+		try {
+			// Save new home page settings.
+			await saveEditedEntityRecord( 'root', 'site', undefined, {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			// This second call to a save function is a workaround for a bug in
+			// `saveEditedEntityRecord`. This forces the root site settings to be updated.
+			// See https://github.com/WordPress/gutenberg/issues/67161.
+			await saveEntityRecord( 'root', 'site', {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			createSuccessNotice( __( 'Homepage updated' ), {
+				type: 'snackbar',
+			} );
+		} 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' } );
+		} finally {
+			closeModal?.();
+		}
+	}
+
+	const modalWarning =
+		'posts' === showOnFront
+			? __(
+					'This will replace the current homepage which is set to display latest posts.'
+			  )
+			: sprintf(
+					// translators: %s: title of the current home page.
+					__( 'This will replace the current homepage: "%s"' ),
+					currentHomePageTitle
+			  );
+
+	const modalText = sprintf(
+		// translators: %1$s: title of the page to be set as the homepage, %2$s: homepage replacement warning message.
+		__( 'Set "%1$s" as the site homepage? %2$s' ),
+		pageTitle,
+		modalWarning
+	);
+
+	// translators: Button label to confirm setting the specified page as the homepage.
+	const modalButtonLabel = __( 'Set homepage' );
+
+	return (
+		<form onSubmit={ onSetPageAsHomepage }>
+			<VStack spacing="5">
+				<Text>{ modalText }</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ modalButtonLabel }
+					</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 !== 'publish' ) {
+					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/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,