Make WordPress Core

Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#38063 closed enhancement (fixed)

Better discoverability of keyboard shortcuts

Reported by: mor10's profile mor10 Owned by: azaozz's profile azaozz
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)

38063.patch (5.1 KB) - added by mor10 8 years ago.
Proof of concept
38063.2.patch (14.3 KB) - added by azaozz 7 years ago.
1.png (7.8 KB) - added by azaozz 7 years ago.
2.png (7.9 KB) - added by azaozz 7 years ago.
3.png (26.3 KB) - added by azaozz 7 years ago.
1m.png (17.9 KB) - added by azaozz 7 years ago.
2m.png (17.6 KB) - added by azaozz 7 years ago.
3m.png (51.7 KB) - added by azaozz 7 years ago.

Download all attachments as: .zip

Change History (30)

This ticket was mentioned in Slack in #core-editor by mor10. View the logs.


8 years ago

#2 @paaljoachim
8 years ago

A very good idea!

This ticket was mentioned in Slack in #design by mor10. View the logs.


8 years ago

@mor10
8 years ago

Proof of concept

#4 @mor10
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: @azaozz
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.
Last edited 8 years ago by azaozz (previous) (diff)

#7 in reply to: ↑ 6 ; follow-up: @mor10
7 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: @iseulde
7 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 @mor10
7 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 @azaozz
7 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.

Last edited 7 years ago by azaozz (previous) (diff)

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


7 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 years ago

This ticket was mentioned in Slack in #core by jorbin. View the logs.


7 years ago

#14 @jorbin
7 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.

@azaozz
7 years ago

@azaozz
7 years ago

@azaozz
7 years ago

@azaozz
7 years ago

@azaozz
7 years ago

@azaozz
7 years ago

@azaozz
7 years ago

#15 @azaozz
7 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.

Last edited 7 years ago by azaozz (previous) (diff)

#16 @mor10
7 years ago

Supreme work @azaozz

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 years ago

#18 @azaozz
7 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 38897:

TinyMCE: make keyboard shortcuts more discoverable by adding them to the buttons tooltips and in the Formats drop-down.

Props mor10, azaozz.
Fixes #38063.

#19 @azaozz
7 years ago

In 38937:

TinyMCE: adjust the shortcuts position and font size in the Formats drop-down to better match the shortcuts in the buttons tooltips.

See #38063.

#20 @programmin
7 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.

#21 @azaozz
7 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 38997:

TinyMCE: if the current editor configuration is without toolbars, prevent errors when adding the labels for custom shortcuts.

Fixes #38063.

#22 @iseulde
7 years ago

In 39284:

TinyMCE: remove extra space in tooltip.

This prevents wrapping and looks better, even though there seems to be some space between the other control key characters.

See #38063.

Note: See TracTickets for help on using tickets.