Extract the WordPress reusable commands to a dedicated package

docs/manifest.json

@@ -1493,6 +1493,12 @@
 		"markdown_source": "../packages/compose/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/core-commands",
+		"slug": "packages-core-commands",
+		"markdown_source": "../packages/core-commands/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/core-data",
 		"slug": "packages-core-data",

package.json

@@ -37,6 +37,7 @@
 		"@wordpress/commands": "file:packages/commands",
 		"@wordpress/components": "file:packages/components",
 		"@wordpress/compose": "file:packages/compose",
+		"@wordpress/core-commands": "file:packages/core-commands",
 		"@wordpress/core-data": "file:packages/core-data",
 		"@wordpress/customize-widgets": "file:packages/customize-widgets",
 		"@wordpress/data": "file:packages/data",

packages/core-commands/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/core-commands/CHANGELOG.md

@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.

packages/core-commands/README.md

@@ -0,0 +1,31 @@
+# Core Commands
+
+This package includes a list of reusable WordPress Admin commands. These commands can be used in multiple WP Admin pages.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/core-commands --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### privateApis
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/core-commands/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@wordpress/core-commands",
+	"version": "0.1.0",
+	"description": "WordPress core reusable commands.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"commands"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/core-commands/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/core-commands"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/commands": "file:../commands",
+		"@wordpress/core-data": "file:../core-data",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/router": "file:../router",
+		"@wordpress/url": "file:../url"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-site/src/hooks/commands/use-wp-admin-commands.js → packages/core-commands/src/add-post-type-commands.js

@@ -3,20 +3,18 @@
  */
 import { privateApis } from '@wordpress/commands';
 import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { useMemo } from '@wordpress/element';
 import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from './lock-unlock';
 
 const { useCommandLoader } = unlock( privateApis );
 
-const getWPAdminAddCommandLoader = ( postType ) =>
+const getAddPostTypeCommandLoader = ( postType ) =>
 	function useAddCommandLoader( { search } ) {
 		let label;
 		if ( postType === 'post' ) {
@@ -36,26 +34,21 @@ const getWPAdminAddCommandLoader = ( postType ) =>
 			label = sprintf( __( 'Add a new page "%s"' ), search );
 		}
 
-		const newPostLink = useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			return getSettings().newPostLink ?? 'post-new.php';
-		}, [] );
-
 		const commands = useMemo(
 			() => [
 				{
 					name: 'core/wp-admin/add-' + postType + '-' + search,
 					label,
 					icon: plus,
 					callback: () => {
-						document.location.href = addQueryArgs( newPostLink, {
+						document.location.href = addQueryArgs( 'post-new.php', {
 							post_type: postType,
 							post_title: hasRecordTitle ? search : undefined,
 						} );
 					},
 				},
 			],
-			[ newPostLink, hasRecordTitle, search, label ]
+			[ hasRecordTitle, search, label ]
 		);
 
 		return {
@@ -64,10 +57,10 @@ const getWPAdminAddCommandLoader = ( postType ) =>
 		};
 	};
 
-const useAddPostLoader = getWPAdminAddCommandLoader( 'post' );
-const useAddPageLoader = getWPAdminAddCommandLoader( 'page' );
+const useAddPostLoader = getAddPostTypeCommandLoader( 'post' );
+const useAddPageLoader = getAddPostTypeCommandLoader( 'page' );
 
-export function useWPAdminCommands() {
+export function useAddPostTypeCommands() {
 	useCommandLoader( {
 		name: 'core/wp-admin/add-post-loader',
 		hook: useAddPostLoader,

packages/core-commands/src/index.js

@@ -0,0 +1 @@
+export { privateApis } from './private-apis';

packages/core-commands/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/core-commands'
+	);

packages/core-commands/src/private-apis.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { useAddPostTypeCommands } from './add-post-type-commands';
+import { useSiteEditorNavigationCommands } from './site-editor-navigation-commands';
+import { lock } from './lock-unlock';
+
+function useCommands() {
+	useAddPostTypeCommands();
+	useSiteEditorNavigationCommands();
+}
+
+export const privateApis = {};
+lock( privateApis, {
+	useCommands,
+} );

packages/edit-site/src/hooks/commands/use-navigation-commands.js → packages/core-commands/src/site-editor-navigation-commands.js

@@ -8,12 +8,12 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { post, page, layout, symbolFilled } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from './lock-unlock';
 
 const { useCommandLoader } = unlock( privateApis );
 const { useHistory } = unlock( routerPrivateApis );
@@ -27,12 +27,12 @@ const icons = {
 
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
+		const history = useHistory();
 		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
 			postType
 		);
 		const deps = supportsSearch ? [ search ] : [];
-		const history = useHistory();
-		const { canvasMode, records, isLoading } = useSelect( ( select ) => {
+		const { records, isLoading } = useSelect( ( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const query = supportsSearch
 				? {
@@ -49,30 +49,46 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					'getEntityRecords',
 					[ 'postType', postType, query ]
 				),
-				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+				// We're using the string literal to check whether we're in the site editor.
+				/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
+				isSiteEditor: !! select( 'edit-site' ),
 			};
 		}, deps );
 
 		const commands = useMemo( () => {
 			return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+				const isSiteEditor = getPath( window.location.href )?.includes(
+					'site-editor.php'
+				);
+				const extraArgs = isSiteEditor
+					? { canvas: getQueryArg( window.location.href, 'canvas' ) }
+					: {};
 				return {
 					name: record.title?.rendered + ' ' + record.id,
 					label: record.title?.rendered
 						? record.title?.rendered
 						: __( '(no title)' ),
 					icon: icons[ postType ],
 					callback: ( { close } ) => {
-						history.push( {
+						const args = {
 							postType,
 							postId: record.id,
-							canvas:
-								canvasMode === 'edit' ? canvasMode : undefined,
-						} );
+							...extraArgs,
+						};
+						const targetUrl = addQueryArgs(
+							'site-editor.php',
+							args
+						);
+						if ( isSiteEditor ) {
+							history.push( args );
+						} else {
+							document.location = targetUrl;
+						}
 						close();
 					},
 				};
 			} );
-		}, [ records, history, canvasMode ] );
+		}, [ records, history ] );
 
 		return {
 			commands,
@@ -89,7 +105,7 @@ const useTemplateNavigationCommandLoader =
 const useTemplatePartNavigationCommandLoader =
 	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
 
-export function useNavigationCommands() {
+export function useSiteEditorNavigationCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/navigate-pages',
 		group: __( 'Pages' ),

packages/edit-site/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/commands": "file:../commands",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/core-commands": "file:../core-commands",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",

packages/edit-site/src/components/layout/index.js

@@ -25,6 +25,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as coreCmmandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -44,7 +45,8 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import { useCommands } from '../../hooks/commands';
+
+const { useCommands } = unlock( coreCmmandsPrivateApis );
 
 const { useLocation } = unlock( routerPrivateApis );
 

packages/private-apis/src/implementation.js

@@ -15,6 +15,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/blocks',
 	'@wordpress/commands',
 	'@wordpress/components',
+	'@wordpress/core-commands',
 	'@wordpress/customize-widgets',
 	'@wordpress/data',
 	'@wordpress/edit-post',