Pages: Add "Set as posts page" action

packages/editor/README.md

@@ -439,6 +439,18 @@ getDerivedStateFromError is used to render a fallback UI after an error has been
 
 > **Deprecated** since 5.3, use `wp.blockEditor.getFontSizeClass` instead.
 
+### getItemTitle
+
+Helper function to get the title of a post item. This is duplicated from the `@wordpress/fields` package. `packages/fields/src/actions/utils.ts`
+
+_Parameters_
+
+-   _item_ `Object`: The post item.
+
+_Returns_
+
+-   `string`: The title of the item, or an empty string if the title is not found.
+
 ### getTemplatePartIcon
 
 Helper function to retrieve the corresponding icon by name.

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

@@ -11,6 +11,9 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useSetAsHomepageAction } from './set-as-homepage';
+import { useResetHomepageAction } from './reset-homepage';
+import { useSetAsPostsPageAction } from './set-as-posts-page';
+import { useResetPostsPageAction } from './reset-posts-page';
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
 	const { defaultActions } = useSelect(
@@ -43,7 +46,10 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 	);
 
 	const setAsHomepageAction = useSetAsHomepageAction();
-	const shouldShowSetAsHomepageAction =
+	const resetHomepageAction = useResetHomepageAction();
+	const setAsPostsPageAction = useSetAsPostsPageAction();
+	const resetPostsPageAction = useResetPostsPageAction();
+	const shouldShowHomepageActions =
 		canManageOptions && ! hasFrontPageTemplate;
 
 	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
@@ -53,10 +59,23 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 
 	return useMemo( () => {
 		let actions = [ ...defaultActions ];
-		if ( shouldShowSetAsHomepageAction ) {
-			actions.push( setAsHomepageAction );
+		if ( shouldShowHomepageActions ) {
+			actions.push(
+				setAsHomepageAction,
+				resetHomepageAction,
+				setAsPostsPageAction,
+				resetPostsPageAction
+			);
 		}
 
+		// Ensure "Move to trash" is always the last action.
+		actions = actions.sort( ( a, b ) => {
+			if ( b.id === 'move-to-trash' ) {
+				return -1;
+			}
+			return 0;
+		} );
+
 		// 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.
@@ -122,7 +141,10 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		context,
 		defaultActions,
 		onActionPerformed,
+		resetHomepageAction,
+		resetPostsPageAction,
 		setAsHomepageAction,
-		shouldShowSetAsHomepageAction,
+		setAsPostsPageAction,
+		shouldShowHomepageActions,
 	] );
 }

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

@@ -0,0 +1,143 @@
+/**
+ * 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 '../../utils';
+
+const ResetHomepageModal = ( { items, closeModal } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { isPageForPostsSet, isSaving } = useSelect( ( select ) => {
+		const { getEntityRecord, isSavingEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+
+		return {
+			isPageForPostsSet: siteSettings?.page_for_posts !== 0,
+			isSaving: isSavingEntityRecord( 'root', 'site' ),
+		};
+	} );
+
+	const { saveEditedEntityRecord, saveEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onResetHomepage( event ) {
+		event.preventDefault();
+
+		try {
+			// Save new home page settings.
+			await saveEditedEntityRecord( 'root', 'site', undefined, {
+				page_on_front: 0,
+				show_on_front: isPageForPostsSet ? 'page' : 'posts',
+			} );
+
+			// 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: 0,
+				show_on_front: isPageForPostsSet ? 'page' : 'posts',
+			} );
+
+			createSuccessNotice( __( 'Homepage reset' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const typedError = error;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while resetting the homepage' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			closeModal?.();
+		}
+	}
+
+	const modalWarning = ! isPageForPostsSet
+		? __( 'This will set the homepage to display latest posts.' )
+		: '';
+
+	const modalText = sprintf(
+		// translators: %1$s: title of the page to be unset as the homepage, %2$s: homepage replacement warning message.
+		__(
+			'Reset the site homepage? "%1$s" will no longer be set as the homepage. %2$s'
+		),
+		pageTitle,
+		modalWarning
+	);
+
+	// translators: Button label to confirm resetting the homepage.
+	const modalButtonLabel = __( 'Reset homepage' );
+
+	return (
+		<form onSubmit={ onResetHomepage }>
+			<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 useResetHomepageAction = () => {
+	const { pageOnFront } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			pageOnFront: siteSettings?.page_on_front,
+		};
+	} );
+
+	return useMemo(
+		() => ( {
+			id: 'reset-homepage',
+			label: __( 'Reset homepage' ),
+			isEligible( post ) {
+				if ( pageOnFront !== post.id ) {
+					return false;
+				}
+
+				return true;
+			},
+			RenderModal: ResetHomepageModal,
+		} ),
+		[ pageOnFront ]
+	);
+};

packages/editor/src/components/post-actions/reset-posts-page.js

@@ -0,0 +1,142 @@
+/**
+ * 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 '../../utils';
+
+const ResetPostsPageModal = ( { items, closeModal } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { isPageOnFrontSet, isSaving } = useSelect( ( select ) => {
+		const { getEntityRecord, isSavingEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			isPageOnFrontSet: siteSettings?.page_on_front !== 0,
+			isSaving: isSavingEntityRecord( 'root', 'site' ),
+		};
+	} );
+
+	const { saveEditedEntityRecord, saveEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onResetPostsPage( event ) {
+		event.preventDefault();
+
+		try {
+			// Save new posts page settings.
+			await saveEditedEntityRecord( 'root', 'site', undefined, {
+				page_for_posts: 0,
+				show_on_front: isPageOnFrontSet ? 'page' : 'posts',
+			} );
+
+			// 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_for_posts: 0,
+				show_on_front: isPageOnFrontSet ? 'page' : 'posts',
+			} );
+
+			createSuccessNotice( __( 'Posts page reset' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const typedError = error;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while resetting the posts page' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			closeModal?.();
+		}
+	}
+
+	const modalWarning = ! isPageOnFrontSet
+		? __( 'This will set the homepage to display latest posts.' )
+		: '';
+
+	const modalText = sprintf(
+		// translators: %1$s: title of the page to be unset as the posts page, %2$s: post pages warning message.
+		__(
+			'Reset the posts page? "%1$s" will no longer show the latest posts. %2$s'
+		),
+		pageTitle,
+		modalWarning
+	);
+
+	// translators: Button label to confirm resetting the posts page.
+	const modalButtonLabel = __( 'Reset posts page' );
+
+	return (
+		<form onSubmit={ onResetPostsPage }>
+			<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 useResetPostsPageAction = () => {
+	const { pageForPosts } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			pageForPosts: siteSettings?.page_for_posts,
+		};
+	} );
+
+	return useMemo(
+		() => ( {
+			id: 'reset-posts-page',
+			label: __( 'Reset posts page' ),
+			isEligible( post ) {
+				if ( pageForPosts !== post.id ) {
+					return false;
+				}
+
+				return true;
+			},
+			RenderModal: ResetPostsPageModal,
+		} ),
+		[ pageForPosts ]
+	);
+};

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

@@ -12,20 +12,11 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
 
-const 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 '';
-};
+/**
+ * Internal dependencies
+ */
+import { getItemTitle } from '../../utils';
 
 const SetAsHomepageModal = ( { items, closeModal } ) => {
 	const [ item ] = items;