Command Palette: "Add new page" within the site editor creates new pa…

…ge in site editor (#65476)

The add page command will now create a new page depending on context: in the post editor it will redirect to `postType=page` in the post editor as it did previously. In the site editor however, it will open a new page without redirecting to the post editor.

---------

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

packages/core-commands/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/router": "file:../router",
 		"@wordpress/url": "file:../url"

packages/core-commands/src/admin-navigation-commands.js

@@ -1,9 +1,83 @@
 /**
  * WordPress dependencies
  */
-import { useCommand } from '@wordpress/commands';
+import { useCommand, useCommandLoader } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
+import { getPath } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useAddNewPageCommand() {
+	const isSiteEditor = getPath( window.location.href )?.includes(
+		'site-editor.php'
+	);
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const createPageEntity = async ( { close } ) => {
+		try {
+			const page = await saveEntityRecord(
+				'postType',
+				'page',
+				{
+					status: 'draft',
+				},
+				{
+					throwOnError: true,
+				}
+			);
+			if ( page?.id ) {
+				history.push( {
+					postId: page.id,
+					postType: 'page',
+					canvas: 'edit',
+				} );
+			}
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the item.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			close();
+		}
+	};
+
+	const commands = useMemo( () => {
+		const addNewPage = isSiteEditor
+			? createPageEntity
+			: () => ( document.location.href = 'post-new.php?post_type=page' );
+		return [
+			{
+				name: 'core/add-new-page',
+				label: __( 'Add new page' ),
+				icon: plus,
+				callback: addNewPage,
+			},
+		];
+	}, [ createPageEntity, isSiteEditor ] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
 
 export function useAdminNavigationCommands() {
 	useCommand( {
@@ -14,12 +88,9 @@ export function useAdminNavigationCommands() {
 			document.location.href = 'post-new.php';
 		},
 	} );
-	useCommand( {
+
+	useCommandLoader( {
 		name: 'core/add-new-page',
-		label: __( 'Add new page' ),
-		icon: plus,
-		callback: () => {
-			document.location.href = 'post-new.php?post_type=page';
-		},
+		hook: useAddNewPageCommand,
 	} );
 }

test/e2e/specs/site-editor/command-center.spec.js

@@ -28,10 +28,12 @@ test.describe( 'Site editor command palette', () => {
 		await page.keyboard.type( 'new page' );
 		await page.getByRole( 'option', { name: 'Add new page' } ).click();
 		await expect( page ).toHaveURL(
-			'/wp-admin/post-new.php?post_type=page'
+			/\/wp-admin\/site-editor.php\?postId=(\d+)&postType=page&canvas=edit/
 		);
 		await expect(
-			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+			editor.canvas
+				.getByLabel( 'Block: Title' )
+				.locator( '[data-rich-text-placeholder="No title"]' )
 		).toBeVisible();
 	} );