#38063 closed enhancement (fixed)
Better discoverability of keyboard shortcuts
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 4.7 | Priority: | normal |
Severity: | normal | Version: | 4.7 |
Component: | TinyMCE | Keywords: | |
Focuses: | Cc: |
Description
Many (if not all?) of the buttons on the editor toolbar have keyboard shortcuts (https://codex.wordpress.org/Keyboard_Shortcuts), but these are not revealed in the UI.
For the buttons that have a keyboard shortcut, this shortcut should be described in the tooltip on hover. This falls in line with established practice in other applications like word processors and image editors.
So for example, on hovering over the B button, the tooltip should read "Bold (Ctrl/Cmd + B)"
Attachments (8)
Change History (30)
This ticket was mentioned in Slack in #core-editor by mor10. View the logs.
8 years ago
This ticket was mentioned in Slack in #design by mor10. View the logs.
8 years ago
#4
@
8 years ago
Patch above is proof of concept only. In working on it I realized there needs to be some sort of user agent sniffing that differentiates between Windows/Linux and Mac to provide the correct shortcut key combinations. No idea where that would fit.
This ticket was mentioned in Slack in #core-editor by mor10. View the logs.
8 years ago
#6
follow-up:
↓ 7
@
8 years ago
- Milestone changed from Awaiting Review to 4.7
Yes, this would be a nice addition. We used to have something similar before upgrading to TinyMCE 4.
Will need to figure out how to best manipulate the translated strings from JS while or after loading them in TinyMCE. Looks like they will need 3 states:
- Windows/Linux mod key(s).
- Mac mod key(s).
- Maybe hide this on touch devices.
#7
in reply to:
↑ 6
;
follow-up:
↓ 10
@
8 years ago
Replying to azaozz:
Will need to figure out how to best manipulate the translated strings from JS while or after loading them in TinyMCE. Looks like they will need 3 states:
- Windows/Linux mod key(s).
- Mac mod key(s).
- Maybe hide this on touch devices.
I was going to say ignore touch devices, but then I was working on a Windows laptop and realized even though it is a touch device, it also has keyboard shortcuts... Not sure I have a solution to this yet.
#8
follow-up:
↓ 9
@
8 years ago
The tooltip is only shown on hover, so it won't react to touch. We should just update the string based on the OS.
How should the text be formatted? On a Mac shortcuts are in the format of ⌘B or ⇧⌘B etc. TinyMCE formats it like ⌘+B for a Mac. I'm not sure how this is done on Windows. Maybe it would be good to stick to the format of the OS, as much as we can?
#9
in reply to:
↑ 8
@
8 years ago
Replying to iseulde:
How should the text be formatted? On a Mac shortcuts are in the format of ⌘B or ⇧⌘B etc. TinyMCE formats it like ⌘+B for a Mac. I'm not sure how this is done on Windows. Maybe it would be good to stick to the format of the OS, as much as we can?
For Windows it is always spelled out: "Ctrl + Alt + Shift + g" etc. Same with Linux. Only Mac has weird symbols, because only Mac keyboards use weird symbols.
#10
in reply to:
↑ 7
@
8 years ago
Replying to mor10:
I was going to say ignore touch devices...
Agreed. It's best to ignore touch devices as in "don't do anything special". If it is on Windows on a touch screen, it will work as expected when using pen or mouse. Same on iPad with external keyboard.
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
8 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
8 years ago
This ticket was mentioned in Slack in #core by jorbin. View the logs.
8 years ago
#14
@
8 years ago
- Milestone changed from 4.7 to Future Release
I'm moving this out of the 4.7 milestone since it lacks an owner and we are coming up on the deadline for commits of feature requests and enhancements. It can be moved back in if someone owns it and is actively working on it.
#15
@
8 years ago
- Milestone changed from Future Release to 4.7
In 38063.2.patch: add keyboard shortcuts to the button tooltips and the block elements drop-down.
Modifies the translations array to include the shortcuts, then outputs them as a TinyMCE setting. That setting is used to display them and to build the Keyboard Shortcuts help modal. The display of shortcuts (and the order they are shown in the help modal) are now controlled from the array in get_translation()
in WP_Editor.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
8 years ago
#18
@
8 years ago
- Owner set to azaozz
- Resolution set to fixed
- Status changed from new to closed
In 38897:
#20
@
8 years ago
- Resolution fixed deleted
- Status changed from closed to reopened
Is it just me or does anyone else notice that it can cause an exception on "init" of editor, trying to access undefined editor.theme.panel? This was on frontend MCE editor, inline-mode.
If
'wp_shortcut_labels' => FALSE
is part of the editor settings array passed to
public static function editor_settings($editor_id, $set) {
it doesn't get into that part of the JS, and it continues loading without exception.
A very good idea!