Typescript: Migrate keyboard-shortcuts to TS by wwahammy · Pull Request #76287 · WordPress/gutenberg

wwahammy · 2026-03-07T20:36:44Z

What?

Part of #67691

Based on #70898 by kushagra-goyal-14

Migrating keyboard-shortcuts package to Typescript

Why?

General developer experience and more certainty from additional type-safety

How?

I started with the changes in #70898 and then tried to address the comments.

Testing Instructions

github-actions · 2026-03-07T20:37:33Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @wwahammy! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

…fety

…tcuts package

github-actions · 2026-03-08T02:33:11Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: kushagra-goyal-14 <kush123@git.wordpress.org>
Co-authored-by: wwahammy <wwahammy@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copilot

Pull request overview

Migrates the @wordpress/keyboard-shortcuts package to TypeScript as part of the broader Gutenberg TS conversion effort, and wires it into the monorepo’s TS project-reference graph so downstream packages can typecheck against it.

Changes:

Converts keyboard-shortcuts store/actions/selectors/hooks/components to TS/TSX and adds package-level TS project config + published types entry.
Updates docs token sources to point at the new .ts files and refreshes generated type names in docs.
Adds TS project references to keyboard-shortcuts from root and several dependent packages.

Reviewed changes

Copilot reviewed 19 out of 22 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tsconfig.json	Adds `packages/keyboard-shortcuts` to root project references.
packages/keyboard-shortcuts/tsconfig.json	New TS project config + references for the package.
packages/keyboard-shortcuts/src/store/types.ts	Introduces shared store state types.
packages/keyboard-shortcuts/src/store/selectors.ts	Migrates selectors to TS and updates some typings/JSDoc types.
packages/keyboard-shortcuts/src/store/reducer.ts	Types the reducer state/action.
packages/keyboard-shortcuts/src/store/index.ts	Exports `ShortcutAction` type from the store module.
packages/keyboard-shortcuts/src/store/actions.ts	Migrates actions to TS and introduces exported config/combination interfaces.
packages/keyboard-shortcuts/src/index.ts	New TS entrypoint exporting public APIs.
packages/keyboard-shortcuts/src/hooks/use-shortcut.ts	Types the hook and callback/ref handling.
packages/keyboard-shortcuts/src/hooks/use-shortcut.native.ts	Adds a native stub implementation for RN builds.
packages/keyboard-shortcuts/src/hooks/use-shortcut-event-match.ts	Migrates hook to TS (replaces prior JS implementation).
packages/keyboard-shortcuts/src/hooks/use-shortcut-event-match.js	Removes the JS implementation in favor of TS.
packages/keyboard-shortcuts/src/context.ts	Types the shortcuts context and listener.
packages/keyboard-shortcuts/src/components/shortcut-provider.tsx	Migrates provider to TSX and aligns callback event type to native `KeyboardEvent`.
packages/keyboard-shortcuts/package.json	Fixes repository directory and adds `types` entry.
packages/keyboard-shortcuts/README.md	Updates autogenerated API docs output to TS-derived type names.
packages/editor/tsconfig.json	Adds reference to `keyboard-shortcuts`.
packages/edit-site/tsconfig.json	Adds reference to `keyboard-shortcuts`.
packages/boot/tsconfig.json	Adds reference to `keyboard-shortcuts`.
packages/block-library/tsconfig.json	Adds reference to `keyboard-shortcuts`.
packages/block-editor/tsconfig.json	Adds reference to `keyboard-shortcuts`.
docs/reference-guides/data/data-core-keyboard-shortcuts.md	Updates doc token paths/types to match TS sources.

Comments suppressed due to low confidence (3)

packages/keyboard-shortcuts/src/store/actions.ts:12

ShortcutKeyCombination currently requires a modifier property, but the wider codebase uses key combinations without a modifier (e.g. { character: '[[' }). This makes the public typing for registerShortcut too strict for real-world usage. Consider making modifier optional (and/or using the 'undefined' keycode modifier string consistently) so combinations without modifiers type-check cleanly.
packages/keyboard-shortcuts/src/store/selectors.ts:23
This file re-defines ShortcutState/ShortcutsState even though they are already exported from ./types. Duplicating these shapes increases the chance they drift over time; import the shared types instead of re-declaring them here.
packages/keyboard-shortcuts/src/store/selectors.ts:304
getAllShortcutKeyCombinations filters with .filter( Boolean ), which removes nulls at runtime but doesn’t narrow the TypeScript type. This leaks null into the selector’s return type and forces callers to handle an impossible null case. Use an explicit type-guard predicate in the filter so the return type is ShortcutKeyCombination[] (and downstream selectors can stay string[]).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-08T04:53:02Z

+	 * @param name  Shortcut name.
+	 * @param event Event to check.
+	 *
+	 * @return True if the event matches unknown shortcuts, false if not.


The @return description says “matches unknown shortcuts”, but this function returns true when the event matches any registered shortcut combination. Update the comment to reflect the actual behavior.

Suggested change

* @return True if the event matches unknown shortcuts, false if not.

* @return True if the event matches any registered shortcut combination,

* false if not.

Copilot · 2026-03-08T04:53:02Z

 _Parameters_

-   _props_ `Object`: Props to pass to `div`.
+-   _props_ `ShortcutProviderProps`: Props to pass to `div`.


The autogenerated README now references ShortcutProviderProps as a public type, but ShortcutProviderProps is not exported from the package. Either export this type (from the component file and re-export it from src/index.ts) or keep the docs using a public type like React.HTMLAttributes<HTMLDivElement>/Record<string, any> so consumers can actually use the documented type.

Suggested change

- _props_ `ShortcutProviderProps`: Props to pass to `div`.

- _props_ `Record<string, any>`: Props to pass to `div`.

Copilot · 2026-03-08T04:53:03Z

+-   _options_ `UseShortcutOptions`: Shortcut options.
+-   _options.isDisabled_ `UseShortcutOptions[ 'isDisabled' ]`: Whether to disable the shortcut.


The autogenerated README now references UseShortcutOptions as a public type, but UseShortcutOptions is not exported from the package. Either export/re-export it, or adjust the docs to a public inline options shape so TypeScript consumers aren’t pointed at an unimportable type name.

Suggested change

- _options_ `UseShortcutOptions`: Shortcut options.

- _options.isDisabled_ `UseShortcutOptions[ 'isDisabled' ]`: Whether to disable the shortcut.

- _options_ `{ isDisabled?: boolean }`: Shortcut options.

- _options.isDisabled_ `boolean`: Whether to disable the shortcut.

manzoorwanijk

This looks good now. Thank you for making the changes.

wwahammy · 2026-03-12T04:49:45Z

@manzoorwanijk just an FYI, I think the test that failed is a flaky test, you may need to manually rerun it.

wwahammy · 2026-03-21T22:34:29Z

@manzoorwanijk I assume this is a flaky build so is there anything you need from me to get this merged? I'd like to avoid too much bit drift if we can. Definitely happy to do anything need to get this done.

wwahammy · 2026-03-22T17:39:06Z

@manzoorwanijk I tried merging in the latest from trunk and it didn't seem to fix the tests. Any thoughts?

manzoorwanijk · 2026-04-16T13:38:21Z

Sorry for missing this. I had to travel a lot in the last one month. I have re-triggered the E2E test. Let us see if it works this time.

manzoorwanijk · 2026-04-16T13:38:47Z

I would still suggest updating this again from trunk.

wwahammy · 2026-04-16T15:43:05Z

I would still suggest updating this again from trunk.

Will do, I'll try to do that this evening or tomorrow.

manzoorwanijk · 2026-04-16T18:02:01Z

But the test failures look genuine, keyboard shortcuts behaviour changed I think.

manzoorwanijk

Let us investigate and fix the issue

Copilot

Pull request overview

Copilot reviewed 20 out of 23 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (3)

packages/keyboard-shortcuts/src/hooks/use-shortcut.ts:52

Including isMatch in this effect’s dependency array will cause the shortcut handler to be removed/re-added on every render because useShortcutEventMatch() currently returns a new isMatch function each render. Consider memoizing the matcher (e.g. have useShortcutEventMatch return a useCallback’d function) so the listener registration remains stable unless the underlying selector function changes.
packages/keyboard-shortcuts/src/store/actions.ts:9
In ShortcutKeyCombination, modifier is modeled as a required property whose value may be undefined. This forces TS callers to always provide a modifier key (often as modifier: undefined) instead of simply omitting it. If modifier is meant to be optional, prefer modifier?: WPKeycodeModifier (or make it required as modifier: WPKeycodeModifier if it should always be present) so the type matches real-world usage and the matching logic.
packages/keyboard-shortcuts/src/store/selectors.ts:23
ShortcutState/ShortcutsState are re-declared here even though the same types were added in src/store/types.ts. This duplication risks the two definitions drifting over time. Prefer importing the shared ShortcutState and ShortcutsState types from ./types and using them throughout the store code.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ctly Passing a callback with [] deps to useSelect captures stale selectors at mount time, making shortcuts registered later invisible. Passing the store handle directly returns selectors bound to current state. Also narrows the return type of getAllShortcutKeyCombinations with a type predicate so downstream consumers don't need null checks.

Without useCallback, isMatch is a new function reference every render, causing the useEffect in useShortcut to tear down and re-add the keyboard event handler on each render. This creates a brief window where the handler is missing when the shortcut key fires, breaking shortcuts like the List View toggle (access+o).

manzoorwanijk · 2026-04-17T03:56:01Z

b3abdf6 should hopefully fix the issue.

Co-authored-by: kushagra-goyal-14 <kush123@git.wordpress.org> Co-authored-by: wwahammy <wwahammy@git.wordpress.org> Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>

kushagra-goyal-14 added 3 commits March 7, 2026 19:26

refactor: migrate keyboard-shortcut package from js to ts for type sa…

6cecbf2

…fety

fix: handle undefined modifier in keyboard shortcut matching

ede305e

refactor: remove explicit return types for functions in keyboard-shor…

deb1918

…tcuts package

wwahammy force-pushed the try/migrate-keyboard-shortcuts-ts branch from 18f71b0 to deb1918 Compare March 8, 2026 01:30

wwahammy added 7 commits March 7, 2026 19:32

Fix a few tsconfig.json files

b46be4f

Rename from WPShortcutKeyCombination -> ShortcutKeyCombination

b66a0d9

Switch from WPShortcutConfig -> ShortcutConfig

87f4ce1

Update docs for data-core-keyboard-shortcuts

a7fa635

Remove unneeded JSX import

de8e726

Move keyboard-shortcuts store/reducer types into separate file

0dd43b0

Fix a prettier issue

1a779d1

wwahammy mentioned this pull request Mar 8, 2026

Typescript: migrate @wordpress/commands to TS #76286

Draft

wwahammy marked this pull request as ready for review March 8, 2026 02:33

wwahammy requested review from ajitbohra, ellatrix, fabiankaegy and juanmaguitar as code owners March 8, 2026 02:33

wwahammy mentioned this pull request Mar 8, 2026

TypeScript: migrate keyboard-shortcuts package to TS #70898

Closed

manzoorwanijk added the [Type] Code Quality Issues or PRs that relate to code quality label Mar 8, 2026

manzoorwanijk requested a review from Copilot March 8, 2026 04:47

Copilot started reviewing on behalf of manzoorwanijk March 8, 2026 04:47 View session

Copilot AI reviewed Mar 8, 2026

View reviewed changes

Reorganize package.json to remove warning about property ordering

bb36b13

wwahammy requested a review from manzoorwanijk March 11, 2026 03:21

Remove unneeded import

7f85bcd

manzoorwanijk approved these changes Mar 11, 2026

View reviewed changes

manzoorwanijk enabled auto-merge (squash) March 11, 2026 06:26

manzoorwanijk mentioned this pull request Mar 11, 2026

Convert packages to TypeScript #67691

Open

39 tasks

Merge branch 'trunk' into try/migrate-keyboard-shortcuts-ts

8f1dc5e

manzoorwanijk disabled auto-merge April 16, 2026 13:38

manzoorwanijk self-requested a review April 16, 2026 18:03

manzoorwanijk requested changes Apr 17, 2026

View reviewed changes

manzoorwanijk requested a review from Copilot April 17, 2026 00:22

Copilot started reviewing on behalf of manzoorwanijk April 17, 2026 00:23 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

manzoorwanijk added 3 commits April 17, 2026 08:33

Merge branch 'trunk' into pr/76287

186459b

manzoorwanijk enabled auto-merge (squash) April 17, 2026 16:50

manzoorwanijk approved these changes Apr 17, 2026

View reviewed changes

manzoorwanijk merged commit 051fe88 into WordPress:trunk Apr 17, 2026
39 checks passed

github-actions Bot added this to the Gutenberg 23.1 milestone Apr 17, 2026

wwahammy deleted the try/migrate-keyboard-shortcuts-ts branch April 17, 2026 23:16

	* @return True if the event matches unknown shortcuts, false if not.
	* @return True if the event matches any registered shortcut combination,
	* false if not.

	- _props_ `ShortcutProviderProps`: Props to pass to `div`.
	- _props_ `Record<string, any>`: Props to pass to `div`.

		- _options_ `UseShortcutOptions`: Shortcut options.
		- _options.isDisabled_ `UseShortcutOptions[ 'isDisabled' ]`: Whether to disable the shortcut.

Conversation

wwahammy commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Uh oh!

github-actions Bot commented Mar 7, 2026

Uh oh!

github-actions Bot commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

wwahammy commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wwahammy commented Mar 21, 2026

Uh oh!

wwahammy commented Mar 22, 2026

Uh oh!

manzoorwanijk commented Apr 16, 2026

Uh oh!

manzoorwanijk commented Apr 16, 2026

Uh oh!

wwahammy commented Apr 16, 2026

Uh oh!

manzoorwanijk commented Apr 16, 2026

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

manzoorwanijk commented Apr 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wwahammy commented Mar 7, 2026 •

edited

Loading

github-actions Bot commented Mar 8, 2026 •

edited

Loading

wwahammy commented Mar 12, 2026 •

edited

Loading