Skip to content

Added readme for keyboard shortcut #69462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vk17-starlord wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Added readme for keyboard shortcut #69462

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Added readme for keyboard shortcut
  • Loading branch information
@vk17-starlord
vk17-starlord committed Mar 6, 2025
commit cf4a5f55ba9ad693269fcda556b3019a0dd7fa9e
73 changes: 73 additions & 0 deletions packages/block-editor/src/components/keyboard-shortcuts/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# Keyboard Shortcuts

The `KeyboardShortcuts` component registers and manages keyboard shortcuts for the block editor. It provides a comprehensive set of shortcuts for common block operations, navigation, and text selection.

## Development guidelines

### Usage

```jsx
import { KeyboardShortcuts } from '@wordpress/block-editor';

const MyBlockEditor = () => (
<BlockEditorProvider>
<KeyboardShortcuts />
{/* Other editor components */}
</BlockEditorProvider>
);
```

_Note:_ The `KeyboardShortcuts` component should be rendered within a `BlockEditorProvider`.

### Available Shortcuts

@youknowriad youknowriad Dec 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we avoid listing all the shortcuts because it might become outdated quickly.


#### Block Operations
- **Copy** (`Cmd/Ctrl + C`): Copy selected block(s)
- **Cut** (`Cmd/Ctrl + X`): Cut selected block(s)
- **Paste** (`Cmd/Ctrl + V`): Paste block(s)
- **Duplicate** (`Cmd/Ctrl + Shift + D`): Duplicate selected block(s)
- **Remove** (`Cmd/Ctrl + Shift + Backspace`): Remove selected block(s)
- **Group** (`Cmd/Ctrl + G`): Create a group from selected blocks

#### Block Navigation
- **Insert Before** (`Cmd/Ctrl + Alt + T`): Insert block before selection
- **Insert After** (`Cmd/Ctrl + Alt + Y`): Insert block after selection
- **Move Up** (`Ctrl + T`): Move block(s) up
- **Move Down** (`Ctrl + Y`): Move block(s) down

#### Selection
- **Select All** (`Cmd/Ctrl + A`): Select all text/blocks
- **Clear Selection** (`Escape`): Clear current selection
- **Multi-text Selection** (`Shift + Arrow`): Select text across blocks

#### Global
- **Focus Toolbar** (`Alt + F10`): Navigate to nearest toolbar
- **List View Collapse** (`Alt + L`): Collapse all other items in list view

### Implementation

@youknowriad youknowriad Dec 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is implementation details and I don't think it's useful in a README.


The component uses the WordPress keyboard shortcuts API to register shortcuts:

```jsx
registerShortcut({
name: 'core/block-editor/copy',
category: 'block',
description: __('Copy the selected block(s).'),
keyCombination: {
modifier: 'primary',
character: 'c',
},
});
```

### Categories

@youknowriad youknowriad Dec 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same not needed.


Shortcuts are organized into categories:
- `block`: Block manipulation operations
- `selection`: Text and block selection
- `global`: Editor-wide actions
- `list-view`: List view specific actions

## Related Components

Block Editor components are components that can be used to compose the UI of your block editor. They should be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
Loading