What?

closes #72718

Adds keyboard shortcuts for the Notes feature to streamline note creation and sidebar management.

Why?

Currently, creating a new block note requires three clicks: clicking the block, opening the options menu, and clicking "Add note". This PR adds keyboard shortcuts to improve accessibility and workflow efficiency:

• A shortcut to quickly add a note to the selected block
• A shortcut to toggle the Notes sidebar open/closed

This addresses the workflow improvement request and follows patterns used in similar collaborative tools like Google Docs.

How?

• Registered two new keyboard shortcuts in register-shortcuts.js:
  • core/editor/add-note: ⌘ + Option + M (Mac) / Ctrl + Alt + M (Windows/Linux)
  • core/editor/toggle-notes-sidebar: ⌘ + Option + N (Mac) / Ctrl + Alt + N (Windows/Linux)
• Implemented shortcut handlers in notes-sidebar.js using the useShortcut hook
• The "add note" shortcut opens the appropriate Notes sidebar and shows the comment input for immediate typing
• The "toggle sidebar" shortcut opens/closes the "All notes" panel
• Note: Used N for toggle to avoid conflict with ⌘ + Shift + M (code editor toggle)

Testing Instructions

Testing "Add Note" shortcut (⌘ + Option + M)

1. Open a post or page in the block editor
2. Insert a Paragraph block and add some text
3. Ensure the block is selected
4. Press ⌘ + Option + M (Mac) or Ctrl + Alt + M (Windows/Linux)
5. ✅ Verify the Notes sidebar opens with a comment input box ready for typing
6. Type a note and verify it saves correctly
7. Select a different block
8. Press ⌘ + Option + M again
9. ✅ Verify a new note input appears for the newly selected block

Testing "Toggle Notes Sidebar" shortcut (⌘ + Option + N)

1. With a post or page open in the block editor
2. Press ⌘ + Option + N (Mac) or Ctrl + Alt + N (Windows/Linux)
3. ✅ Verify the "All notes" sidebar opens on the right side
4. Press the same shortcut again
5. ✅ Verify the "All notes" sidebar closes
6. Press the shortcut once more
7. ✅ Verify the sidebar opens again

Testing with existing notes

1. Create a block with an existing note
2. Select that block
3. Press ⌘ + Option + M / Ctrl + Alt + M
4. ✅ Verify the Notes sidebar opens and focuses on the existing note thread
5. Add a reply to the note
6. ✅ Verify the reply is saved

Testing edge cases

1. Press ⌘ + Option + M without selecting any block
2. ✅ Verify nothing happens (graceful handling)
3. Press ⌘ + Option + N in Code Editor mode
4. ✅ Verify the shortcut works (or doesn't work, depending on expected behavior)

Testing Instructions for Keyboard

1. Navigate through the editor using Tab and arrow keys
2. Select a block using keyboard navigation
3. Press ⌘ + Option + M / Ctrl + Alt + M
4. ✅ Verify Notes sidebar opens and comment textarea receives focus
5. Type a note using only the keyboard
6. Press Tab to navigate to "Add note" button and press Enter
7. ✅ Verify the note is saved
8. Press ⌘ + Option + N / Ctrl + Alt + N
9. ✅ Verify sidebar closes and focus returns to the editor
10. Press Shift + Option + H (Mac) or Shift + Alt + H (Windows/Linux) to open keyboard shortcuts help
11. ✅ Verify the new shortcuts appear in the help modal:
    • "Add a note to the selected block" in the Block category
    • "Show or hide the Notes panel" in the Global category

Screenshots or screencast

Related

Addresses workflow improvement for the Notes feature by reducing friction in the note creation process.