Add block-specific commands as contextual suggestions [#53539]

packages/block-editor/src/components/use-block-commands/index.js

@@ -292,5 +292,6 @@ export const useBlockCommands = () => {
 	useCommandLoader( {
 		name: 'core/block-editor/blockActions',
 		hook: useActionsCommands,
+		context: 'block-selection-edit',
 	} );
 };

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

@@ -22,6 +22,7 @@ import {
 	useBlockCommands,
 	BlockBreadcrumb,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Button, ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -37,6 +38,12 @@ import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+
+const { useCommands } = unlock( coreCommandsPrivateApis );
+const { useCommandContext } = unlock( commandsPrivateApis );
+
 /**
  * Internal dependencies
  */
@@ -56,6 +63,7 @@ import ActionsPanel from './actions-panel';
 import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import useCommonCommands from '../../hooks/commands/use-common-commands';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 
@@ -124,7 +132,10 @@ function useEditorStyles() {
 }
 
 function Layout() {
+	useCommands();
+	useCommonCommands();
 	useBlockCommands();
+
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -184,9 +195,17 @@ function Layout() {
 			),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			hasBlockSelected:
+				select( blockEditorStore ).getBlockSelectionStart(),
 		};
 	}, [] );
 
+	// Set the right context for the command palette
+	const commandContext = hasBlockSelected
+		? 'block-selection-edit'
+		: 'post-editor-edit';
+	useCommandContext( commandContext );
+
 	const styles = useEditorStyles();
 
 	const openSidebarPanel = () =>

packages/edit-post/src/editor.js

@@ -14,7 +14,6 @@ import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -23,14 +22,10 @@ import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
 import { unlock } from './lock-unlock';
-import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
-	useCommands();
-	useCommonCommands();
 	const {
 		hasFixedToolbar,
 		focusMode,

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

@@ -29,6 +29,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	privateApis as blockEditorPrivateApis,
 	useBlockCommands,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -80,6 +81,7 @@ export default function Layout() {
 	const {
 		isDistractionFree,
 		hasFixedToolbar,
+		hasBlockSelected,
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
@@ -104,6 +106,8 @@ export default function Layout() {
 				'core/edit-site',
 				'distractionFree'
 			),
+			hasBlockSelected:
+				select( blockEditorStore ).getBlockSelectionStart(),
 		};
 	}, [] );
 	const isEditing = canvasMode === 'edit';
@@ -150,10 +154,14 @@ export default function Layout() {
 	}
 
 	// Sets the right context for the command palette
-	const commandContext =
-		canvasMode === 'edit' && isEditorPage
-			? 'site-editor-edit'
-			: 'site-editor';
+	let commandContext = 'site-editor';
+
+	if ( canvasMode === 'edit' && isEditorPage ) {
+		commandContext = 'site-editor-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
 	useCommandContext( commandContext );
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );