Add shortcut tooltips for main toolbar #6605

ellatrix · 2018-05-05T12:59:08Z

Description

This branch adds some shortcuts to tooltips in the main toolbar:

Undo: PRIMARY + Z
Redo: PRIMARY + Y (or SHIFT + PRIMARY + Z)
Save: PRIMARY + S

Questions:

Which one should "Redo" display?
Is it okay for "Save" to display just the shortcut without text (design-wise)? How should shortcuts but displayed for icon buttons with text? Cc @jasmussen.

How has this been tested?

Hover over the above mentioned buttons in the main toolbar.

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

tofumatt

I think we'll need to tweak the redo shortcut for Mac. That'll at least mess with some Safari folks.

tofumatt · 2018-05-05T14:03:00Z

components/icon-button/index.js

-		const showTooltip = !! tooltip ||
+		// Should show the tooltip...
+		const showTooltip = (
+			// if an explicit tooltip is passed or...


I find this style of commenting each conditional really useful, especially after working on a patch around https://github.com/WordPress/gutenberg/blob/master/editor/components/block-list/block.js#L425 👍🏻

A nitpick is moving the "if" above might make more sense, eg:

// Should show the tooltip if... const showTooltip = ( // an explicit tooltip is passed or...

So move all "if"s? "Or if..."?

I think moving the if to the top and ending each line with or... or and..., along with the indentation, would make sense.

But what you have already makes sense, I just think the wording could be tidied up a bit. If my suggestion is less clear than I could be wrong and should be ignored 😅

I'd say it could be:

// Should show the tooltip if... const showTooltip = ( // an explicit tooltip is passed or... tooltip || // there's a shortcut or... shortcut || ( // there's a label and... label && // the children are empty and... ( ! children || ( isArray( children ) && ! children.length ) ) && // the tooltip is not explicitely disabled. false !== tooltip ) );

(Includes the lack of !! prefixes.)

tofumatt · 2018-05-05T14:05:06Z

components/icon-button/index.js

+		// Should show the tooltip...
+		const showTooltip = (
+			// if an explicit tooltip is passed or...
+			!! tooltip ||


Any reason to use !! tooltip || rather than just the regular test for truthiness with tooltip ||?

No. I copied the previous code.

tofumatt · 2018-05-05T14:06:08Z

components/icon-button/index.js

 				( ! children || ( isArray( children ) && ! children.length ) ) &&
+				// the tooltip is not explicitely disabled.


"explicitely" should be "explicitly" 🙂

Ugh yes, I just copied from the previous comment. :)

tofumatt · 2018-05-05T14:10:30Z

editor/components/editor-history/redo.js

 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (
 		<IconButton
 			icon="redo"
 			label={ __( 'Redo' ) }
+			shortcut={ primaryShortcut( 'Y' ) }


Shift+Command+Z is the convention for "Redo" on Mac, so I wonder if we need yet another conditional helper here 😧

Command+Y in Safari will actually change the current page to the History page, even when a textarea is focused:

So this probably needs to be Shift+Command+Y or Shift+Command+Z, at least on MacOS.

Interesting, didn't know about the Safari command clash. Interestingly this depends on the application:

Does SHIFT + PRIMARY + Z also make sense on Windows and Linux?

Sublime is probably an outlier because it's cross-platform and I think cares less about OS-specific stuff? Browsers are definitely all Shift+Command+Z:

Makes sense Sublime does Primary+Y as that's the Windows/Linux default. I checked in Edge and Primary+Y is redo there. Firefox in Windows uses Primary+Shift+Z. It's sort of a mess. Maybe we need a helper that does UA sniffing for this one? 😭

Actually, I spoke too soon. Edge also supports Primary+Shift+Z for redo in Gutenberg. Primary+Y is the default but it seems Edge (and all other browsers) also work with Primary+Shift+Z. I'm just testing Linux now but it works for Mac+Win...

Linux works with Primary+Shift+Z too, so let's just use that one everywhere.

Okay. Wondering if we should still keep Primary+Y then as we are blocking the browser shortcuts on Mac.

ellatrix · 2018-05-06T12:08:23Z

I added a bit to the scope of this PR... It would be good if "raw" shortcodes can be used for both the KeyboardShortcuts component and TinyMCE, so they are all registered consistently with the same user agent check.

I wanted to try to do this a bit more dynamically, but maybe it'd be just better to explicitly create all functions? Not sure.

tofumatt

This is so much nicer!

tofumatt · 2018-05-06T12:35:14Z

blocks/rich-text/index.js

-		editor.shortcuts.add( 'access+d', '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) );
-		editor.shortcuts.add( 'access+x', '', () => this.changeFormats( { code: ! this.state.formats.code } ) );
+		editor.shortcuts.add( rawShortcut.primary( 'k' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );
+		editor.shortcuts.add( rawShortcut.access( 'a' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );


Yay, when I saw these I thought "this could be refactored". This is great 👍

tofumatt · 2018-05-06T12:36:20Z

edit-post/keyboard-shortcuts.js

-		value: secondaryKeyCode( 'm' ),
-		label: secondaryShortcut( 'M' ),
+		value: rawShortcut.secondary( 'm' ),
+		label: displayShortcut.secondary( 'm' ),


Nice, the consistency here is better 👍

tofumatt · 2018-05-06T12:38:21Z

utils/keycodes.js

-	return `${ keyCombo }+${ character }`;
-}
+const modifiers = {
+	primary: ( _isMac ) => _isMac() ? [ COMMAND ] : [ CTRL ],


This is much more immediately understandable than my old way. ✨

tofumatt · 2018-05-06T12:40:38Z

utils/keycodes.js

-export function secondaryShortcut( character, _isMacOS = isMacOS ) {
-	return keyboardShortcut( secondaryKeyCode( character.toUpperCase(), _isMacOS ), _isMacOS );
-}
+export const displayShortcut = mapValues( modifiers, ( modifier ) => {


Ah, cool. Sorry I didn't think to use this, I'm not used to having lodash around.

tofumatt · 2018-05-06T12:42:53Z

utils/test/keycodes.js

-	} );
-} );
-
-describe( 'accessKeyCode', () => {


Looks like there are only tests for the rawShortcuts are gone. I guess the logic is really basic now so it matters less that there are no tests. 🤷‍♂️

Ah, good catch, forgot to add tests for rawShortcode...

tofumatt · 2018-05-06T12:44:57Z

I wanted to try to do this a bit more dynamically, but maybe it'd be just better to explicitly create all functions? Not sure.

I think it's fine to just create all the functions this way. It's not much code and it's very easy to trace and figure out.

ellatrix · 2018-05-06T13:58:17Z

Thanks for the review @tofumatt! Wasn't sure if you'd like it. :) Added some of the tests back that I forgot.

tofumatt

New tests and changes looks good too! 🚢

ellatrix · 2018-05-06T14:30:18Z

Hm, on last thing to figure out: shift+command+z is not actually working with Mousetrap, neither in this branch nor in master. The callback is never called... (mod+z: this.undoOrRedo)

ellatrix · 2018-05-06T14:53:39Z

Strange, here it works: https://codepen.io/iseulde/pen/BxwvBB

ellatrix · 2018-05-06T15:02:23Z

Can't figure this one out immediately. In Codepen it works. meta+z works in Gutenberg. shift+meta+z fails in Gutenberg. I can also need the menu item being activated (not the case with meta+z). 🤔

tofumatt · 2018-05-06T15:13:35Z

In Gutenberg:

In windows Ctrl+Shift+Z is working in master for me on Edge.

On Mac Meta+Shift+Z is working in master for me on Firefox.

🤷‍♂️

ellatrix · 2018-05-06T16:17:43Z

Confirmed. Firefox and Safari work, it's just Chrome that is broken. Actually the Codepen is also broken there, I was just testing that in Safari instead of Chrome...

Let's address this separately as this is also broken in master.

aduth · 2018-05-07T12:25:53Z

utils/keycodes.js

-	return `${ keyCombo }+${ character }`;
-}
+const modifiers = {
+	primary: ( _isMac ) => _isMac() ? [ COMMAND ] : [ CTRL ],


Why do these need to be run as functions? Will they ever change over the lifetime of the app?

Edit: And if the answer is for testing, it shouldn't really impact the implementation so much. Can be "good" for it to be made generic, though ideally we have some caching along the way in runtime use, so we're not running _window.navigator.platform.indexOf( 'Mac' ) !== -1; hundreds of times per page session.

It's all for testing; previously this was run once and stored in a constant, but it was also entirely untested. It could probably be cached somehow as a perf-versus-readability tradeoff. 😄

It shouldn't change in regular usage though, so yeah it's worth doing.

aduth · 2018-05-07T12:36:59Z

utils/keycodes.js

+			[ SHIFT ]: isMac ? '⇧shift' : 'Shift',
+		};
+		const shortcut = [
+			...modifier( _isMac ).map( ( key ) => get( replacementKeyMap, key, key ) ),


You defeated my new ESLint custom rule! (#6247)

Which is to say, I should make this rule more strict 😛

aduth · 2018-05-07T12:38:09Z

components/icon-button/index.js

+		const showTooltip = (
+			// an explicit tooltip is passed or...
+			tooltip ||
+			// there's a shortcut or...


I think I mentioned elsewhere, but conceptually shortcut has nothing to do with IconButton and I wish it wasn't included here.

Add shortcut tooltips for main toolbar

5be0ff4

ellatrix added this to the 2.9 milestone May 5, 2018

ellatrix requested review from tofumatt, youknowriad, jasmussen and aduth May 5, 2018 12:59

tofumatt requested changes May 5, 2018

View reviewed changes

Reorganise keycode file

3fca8d0

tofumatt approved these changes May 6, 2018

View reviewed changes

ellatrix added 2 commits May 6, 2018 15:51

Add rawShortcut tests

56389d6

Polish

a161ebc

No longer needed to omit keyboardShortcut

90c3e90

tofumatt approved these changes May 6, 2018

View reviewed changes

Use rawShortcut everywhere

f042a70

ellatrix merged commit 5e940bf into master May 6, 2018

ellatrix deleted the add/main-toolbar-shortcuts branch May 6, 2018 16:18

aduth reviewed May 7, 2018

View reviewed changes

afercia mentioned this pull request May 9, 2018

Improvements for the keyboard shortcuts in tooltips #6669

Closed

This was referenced May 30, 2018

Classic Block: Consider to make the editor keyboard shortcuts visible in the tooltips #6195

Closed

Indent list keyboard shortcuts inconsistencies #7051

Closed

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities yassine4999/gutenberg#11

Open

npneeraj mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities npneeraj/gutenberg#13

Open

Verdinjoshua26 mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities Verdinjoshua26/gutenberg#69

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities naiba4/gutenberg#7

Open

soloinovator mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities soloinovator/gutenberg#84

Open

MaxMood96 mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#96

Open

snyk-bot mentioned this pull request Apr 25, 2023

[Snyk] Fix for 1 vulnerabilities captainbarber99/gutenberg#11

Open

		( ! children \|\| ( isArray( children ) && ! children.length ) ) &&
		// the tooltip is not explicitely disabled.

Add shortcut tooltips for main toolbar #6605

Add shortcut tooltips for main toolbar #6605

Conversation

ellatrix commented May 5, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented May 6, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt commented May 6, 2018

ellatrix commented May 6, 2018

tofumatt left a comment

Choose a reason for hiding this comment

ellatrix commented May 6, 2018 • edited Loading

ellatrix commented May 6, 2018

ellatrix commented May 6, 2018

tofumatt commented May 6, 2018

ellatrix commented May 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented May 5, 2018 •

edited

Loading

tofumatt May 5, 2018 •

edited

Loading

tofumatt May 5, 2018 •

edited

Loading

tofumatt May 5, 2018 •

edited

Loading

ellatrix commented May 6, 2018 •

edited

Loading

ellatrix commented May 6, 2018 •

edited

Loading