Media editor modal: expand keyboard shortcuts and add interaction helpers#77871
Merged
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ramonjd
added
[Feature] Media
Contributor
There was a problem hiding this comment.
Pull request overview
Adds discoverable keyboard shortcut support to the media editor modal and improves crop-handle interaction UX by introducing flip shortcuts, a shortcuts reference modal, and a Shift-to-lock aspect ratio hint.
Changes:
- Add
H/Vkeyboard shortcuts for horizontal/vertical flip viaInteractionController+useInteractionwiring. - Introduce a “Keyboard shortcuts” header action that opens a dedicated shortcuts reference modal.
- Show a “Hold ⇧ to lock aspect ratio” hint when resize handles are hovered/focused in freeform crop mode.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/media-editor/src/image-editor/react/hooks/use-interaction.ts | Wires a new flip interaction action through the interaction controller adapter. |
| packages/media-editor/src/image-editor/react/hooks/use-cropper-state.ts | Adds a flip(direction) convenience method to toggle flip state. |
| packages/media-editor/src/image-editor/react/components/stencils/rectangle-stencil.tsx | Emits handle hover/focus state via onHandleActiveChange. |
| packages/media-editor/src/image-editor/react/components/cropper.tsx | Tracks handle active state and renders the Shift-to-lock hint overlay. |
| packages/media-editor/src/image-editor/react/components/cropper.scss | Styles the Shift-to-lock hint overlay. |
| packages/media-editor/src/image-editor/core/types.ts | Extends StencilProps with onHandleActiveChange. |
| packages/media-editor/src/image-editor/core/interaction-controller.ts | Adds flip to interaction actions and handles H/V keydown shortcuts. |
| packages/media-editor/src/components/media-editor-modal/index.tsx | Adds a keyboard icon button to open the shortcuts modal from the header. |
| packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/index.tsx | New shortcuts reference modal implementation with cross-platform modifier display. |
| packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss | Styles the shortcuts reference modal layout and keycaps. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
andrewserong
reviewed
May 1, 2026
- Added a new `MediaEditorKeyboardShortcutsModal` component to display keyboard shortcuts for the media editor. - Integrated the modal into the existing media editor modal, allowing users to open it via a keyboard icon button. - Updated styles for the modal to ensure proper layout and design consistency.
…ect for better clarity and flexibility. - Introduced a new `KeyCombinationDisplay` component to handle the rendering of keyboard shortcuts, improving code organization. - Enhanced the shortcut list with additional key combinations and aria-labels for accessibility. - Removed deprecated `keys` and `keysAriaLabel` properties from the shortcut entries.
…ement from the Cropper component. - Eliminated the shift-to-lock hint that was displayed during handle hover/focus. - Updated the StencilProps interface to reflect the removal of the `onHandleActiveChange` callback.
…hortcuts - Implemented flip actions for horizontal and vertical directions, triggered by 'h'/'H' and 'v'/'V' keys respectively. - Added tests to ensure flip actions are called correctly and do not trigger when modifier keys are held. - Updated MediaEditorKeyboardShortcutsModal to improve accessibility with ARIA roles. - Refactored flip logic in useCropperState to utilize setFlip for state management.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
ramonjd
force-pushed
the
add/image-editor-keyboard-shortcut-map
branch
from
2996d7d to
0e418d7
Compare
|
Size Change: +707 B (+0.01%) Total Size: 7.87 MB 📦 View Changed
ℹ️ View Unchanged
|
andrewserong
approved these changes
May 1, 2026
Contributor
There was a problem hiding this comment.
Good stuff! Love the addition of a keyboard legend:
Minor non-blocking thoughts:
- It's pretty prominent in the header, which might not be a bad thing. But if or when we've got more actions / buttons up there we might want to consider adding an ellipsis menu like in the block editor proper and have it an item in a dropdown list to reduce prominence. For now I'd keep it where you've put it 👍
- The new
flipaction is similar in name tosetFlip. To make it slightly clearer the difference betweensetFlipand thisflip, I was wondering if it'd be worth naming ittoggleFlip? - It's a very simple action, but we've got tests for the others, I believe. Is it worth adding tests specifically for the
flipaction? - This handles both the capital and non-capital versions of
handv, which is good... but it made me wonder if it'd be worth having SHIFT switch direction for rotation when pressingr(so users could go anti-clockwise via keyboard). Not something to deal with in this PR, just a thought.
Anyhoo, that's all very minor stuff, this looks good to me!
| { | ||
| description: __( 'Pan' ), | ||
| keyCombination: { | ||
| character: '↑↓←→', |
Contributor
There was a problem hiding this comment.
Very minor, but visually these characters can bleed into each other a tiny bit. On balance I figure it's fine to include it in the one kbd but I wondered briefly if separate kbd elements would be more accurate?
Not a blocker at all, just capturing the thought.
Member
Author
|
Thanks for the detailed review! I'll implement name change (toggleFlip and tests), and see about those hugging arrows, as I think they belong here.
Good idea! I'll make a note to do this as a follow up
yeah I think we'll have to do that eventually. the first pass was just to reduce clicks for the user. |
|
Flaky tests detected in 81f023d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25204253441
|
- Modified the `KeyCombination` interface to allow `character` to be a string or an array of strings for better flexibility in displaying key combinations. - Updated the `SHORTCUTS` array to use arrays for arrow keys in the keyboard shortcuts modal. - Enhanced the `KeyCombinationDisplay` component to handle both single and multiple key characters, improving accessibility and usability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of:
Adds keyboard shortcuts for flip and a discoverable shortcuts reference to the media editor modal.
2026-05-01.14.40.07.mp4
Changes
Flip keyboard shortcuts
H— flip horizontalV— flip verticalBoth follow the same modifier guard as
R(rotate): ignored when Meta/Ctrl/Alt/Shift is held, so they don't conflict with browser or editor shortcuts.Adds a
flip(direction)convenience method toCropperInteractionActionsandUseCropperStateReturnthat toggles the given axis, wired throughuseInteraction→InteractionController.Keyboard shortcuts modal
A
keyboardicon button in the modal header (left of the sidebar toggle) opens a self-contained shortcuts reference. Lists all canvas shortcuts:Modifier keys render cross-platform via
displayShortcutListfrom@wordpress/keycodes(⌘ on Mac, Ctrl on Windows), matching the pattern used by the existing editor keyboard shortcuts modal.Testing
HandVtoggle the flip state when the canvas has focus