Notes: Add a keyboard shortcut for creating a new note

packages/editor/src/components/collab-sidebar/comment-menu-item.js

@@ -3,13 +3,13 @@
  */
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { comment as commentIcon } from '@wordpress/icons';
 import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -25,6 +25,13 @@ const AddCommentMenuItem = ( { clientId, onClick, isDistractionFree } ) => {
 		},
 		[ clientId ]
 	);
+	const shortcut = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutRepresentation(
+				'core/editor/new-note'
+			),
+		[]
+	);
 
 	if (
 		! block?.isValid ||
@@ -45,11 +52,11 @@ const AddCommentMenuItem = ( { clientId, onClick, isDistractionFree } ) => {
 
 	return (
 		<MenuItem
-			icon={ commentIcon }
 			onClick={ onClick }
 			aria-haspopup="dialog"
 			disabled={ isDisabled }
 			info={ infoText }
+			shortcut={ shortcut }
 		>
 			{ __( 'Add note' ) }
 		</MenuItem>

packages/editor/src/components/collab-sidebar/constants.js

@@ -1,3 +1,3 @@
-export const collabHistorySidebarName = 'edit-post/collab-history-sidebar';
-export const collabSidebarName = 'edit-post/collab-sidebar';
-export const SIDEBARS = [ collabHistorySidebarName, collabSidebarName ];
+export const ALL_NOTES_SIDEBAR = 'edit-post/collab-history-sidebar';
+export const FLOATING_NOTES_SIDEBAR = 'edit-post/collab-sidebar';
+export const SIDEBARS = [ ALL_NOTES_SIDEBAR, FLOATING_NOTES_SIDEBAR ];

packages/editor/src/components/collab-sidebar/hooks.js

@@ -31,7 +31,7 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { collabSidebarName } from './constants';
+import { FLOATING_NOTES_SIDEBAR } from './constants';
 import { unlock } from '../../lock-unlock';
 import { noop } from './utils';
 
@@ -351,14 +351,16 @@ export function useEnableFloatingSidebar( enabled = false ) {
 		const unsubscribe = registry.subscribe( () => {
 			// Return `null` to indicate the user hid the complementary area.
 			if ( getActiveComplementaryArea( 'core' ) === null ) {
-				enableComplementaryArea( 'core', collabSidebarName );
+				enableComplementaryArea( 'core', FLOATING_NOTES_SIDEBAR );
 			}
 		} );
 
 		return () => {
 			unsubscribe();
-			if ( getActiveComplementaryArea( 'core' ) === collabSidebarName ) {
-				disableComplementaryArea( 'core', collabSidebarName );
+			if (
+				getActiveComplementaryArea( 'core' ) === FLOATING_NOTES_SIDEBAR
+			) {
+				disableComplementaryArea( 'core', FLOATING_NOTES_SIDEBAR );
 			}
 		};
 	}, [ enabled, registry ] );

packages/editor/src/components/collab-sidebar/index.js

@@ -6,6 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { comment as commentIcon } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -16,8 +17,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import PluginSidebar from '../plugin-sidebar';
 import {
-	collabHistorySidebarName,
-	collabSidebarName,
+	ALL_NOTES_SIDEBAR,
+	FLOATING_NOTES_SIDEBAR,
 	SIDEBARS,
 } from './constants';
 import { Comments } from './comments';
@@ -85,17 +86,26 @@ function NotesSidebar( { postId } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const _clientId = getSelectedBlockClientId();
-		return {
-			clientId: _clientId,
-			blockCommentId: _clientId
-				? getBlockAttributes( _clientId )?.metadata?.noteId
-				: null,
-		};
-	}, [] );
+	const { clientId, blockCommentId, isClassicBlock } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getBlockName,
+			} = select( blockEditorStore );
+			const _clientId = getSelectedBlockClientId();
+			return {
+				clientId: _clientId,
+				blockCommentId: _clientId
+					? getBlockAttributes( _clientId )?.metadata?.noteId
+					: null,
+				isClassicBlock: _clientId
+					? getBlockName( _clientId ) === 'core/freeform'
+					: false,
+			};
+		},
+		[]
+	);
 	const { isDistractionFree } = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		return {
@@ -119,6 +129,23 @@ function NotesSidebar( { postId } ) {
 			( unresolvedSortedThreads.length > 0 || selectedNote !== undefined )
 	);
 
+	useShortcut(
+		'core/editor/new-note',
+		( event ) => {
+			event.preventDefault();
+			openTheSidebar();
+		},
+		{
+			// When multiple notes per block are supported. Remove note ID check.
+			// See: https://github.com/WordPress/gutenberg/pull/75147.
+			isDisabled:
+				isDistractionFree ||
+				isClassicBlock ||
+				! clientId ||
+				!! blockCommentId,
+		}
+	);
+
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
@@ -134,13 +161,11 @@ function NotesSidebar( { postId } ) {
 		const activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );
 
 		if ( currentThread?.status === 'approved' ) {
-			enableComplementaryArea( 'core', collabHistorySidebarName );
+			enableComplementaryArea( 'core', ALL_NOTES_SIDEBAR );
 		} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {
 			enableComplementaryArea(
 				'core',
-				showFloatingSidebar
-					? collabSidebarName
-					: collabHistorySidebarName
+				showFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR
 			);
 		}
 
@@ -175,8 +200,8 @@ function NotesSidebar( { postId } ) {
 			<AddCommentMenuItem onClick={ openTheSidebar } />
 			{ showAllNotesSidebar && (
 				<PluginSidebar
-					identifier={ collabHistorySidebarName }
-					name={ collabHistorySidebarName }
+					identifier={ ALL_NOTES_SIDEBAR }
+					name={ ALL_NOTES_SIDEBAR }
 					title={ __( 'All notes' ) }
 					header={
 						<h2 className="interface-complementary-area-header__title">
@@ -196,7 +221,7 @@ function NotesSidebar( { postId } ) {
 				<PluginSidebar
 					isPinnable={ false }
 					header={ false }
-					identifier={ collabSidebarName }
+					identifier={ FLOATING_NOTES_SIDEBAR }
 					className="editor-collab-sidebar"
 					headerClassName="editor-collab-sidebar__header"
 					backgroundColor={ backgroundColor }

packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -109,6 +109,16 @@ function EditorKeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/editor/new-note',
+			category: 'global',
+			description: __( 'Add a new note.' ),
+			keyCombination: {
+				modifier: 'primaryAlt',
+				character: 'm',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/editor/next-region',
 			category: 'global',

test/e2e/specs/editor/various/block-comments.spec.js

@@ -829,6 +829,33 @@ test.describe( 'Block Comments', () => {
 			// Should focus the newly added comment thread.
 			await expect( thread ).toBeFocused();
 		} );
+
+		test( 'can add a note using global keyboard shortcut', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Testing block comments' },
+			} );
+			await pageUtils.pressKeys( 'primaryAlt+M' );
+			const textbox = page.getByRole( 'textbox', {
+				name: 'New note',
+				exact: true,
+			} );
+			const thread = page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByRole( 'treeitem', {
+					name: 'Note: A test comment',
+				} );
+
+			await textbox.fill( 'A test comment' );
+			await pageUtils.pressKeys( 'primary+Enter' );
+
+			await expect( thread ).toBeVisible();
+			await expect( thread ).toBeFocused();
+		} );
 	} );
 } );