WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 7 months ago

Last modified 6 months ago

#38063 closed enhancement (fixed)

Better discoverability of keyboard shortcuts

Reported by: mor10 Owned by: 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 months ago.
Proof of concept
38063.2.patch (14.3 KB) - added by azaozz 7 months ago.
1.png (7.8 KB) - added by azaozz 7 months ago.
2.png (7.9 KB) - added by azaozz 7 months ago.
3.png (26.3 KB) - added by azaozz 7 months ago.
1m.png (17.9 KB) - added by azaozz 7 months ago.
2m.png (17.6 KB) - added by azaozz 7 months ago.
3m.png (51.7 KB) - added by azaozz 7 months ago.

Download all attachments as: .zip

Change History (30)

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


9 months ago

#2 @paaljoachim
9 months ago

A very good idea!

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


9 months ago

@mor10
8 months ago

Proof of concept

#4 @mor10
8 months 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 months ago

#6 follow-up: @azaozz
8 months 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 months ago by azaozz (previous) (diff)

#7 in reply to: ↑ 6 ; follow-up: @mor10
8 months 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
8 months 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
8 months 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
8 months 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 8 months ago by azaozz (previous) (diff)

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


8 months ago

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


8 months ago

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


8 months ago

#14 @jorbin
8 months 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 months ago

@azaozz
7 months ago

@azaozz
7 months ago

@azaozz
7 months ago

@azaozz
7 months ago

@azaozz
7 months ago

@azaozz
7 months ago

#15 @azaozz
7 months 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 months ago by azaozz (previous) (diff)

#16 @mor10
7 months ago

Supreme work @azaozz

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


7 months ago

#18 @azaozz
7 months 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 months 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 months 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 months 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
6 months 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.