Try: Add toggle editor mode shortcut #3755

vladanost · 2017-12-01T16:35:32Z

Description

I find switching often from Visual to Code editor mode tiring process so I wanted to add a shortcut for that.

All editor related keyboard shortcuts are grouped under EditorGlobalKeyboardShortcuts which is a great move but for this case it causes problems. EditorGlobalKeyboardShortcuts is rendered from VisualEditor block and if I add the shortcut there, once it switches to TextEditor, shortcuts are no longer available.

My temp approach is to add another component EditorModeKeyboardShortcuts and render it from Layout component.
For the moment it works but I'm wondering:

is this shortcut really needed for everyone or I'm the only one that find it very useful when developing blocks?
Is this the right way to include such a functionality?
I chose the shortcut to be mod+shift+alt+m, maybe better solution can be found.
The name of the component EditorModeKeyboardShortcuts is making a confusion?

All suggestions are welcome. Thanks.

How Has This Been Tested?

npm run test-unit
Manually tested in the browser.

Types of changes

New feature (non-breaking change which adds functionality)

codecov · 2017-12-01T16:40:36Z

Codecov Report

Merging #3755 into master will decrease coverage by 0.11%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #3755      +/-   ##
==========================================
- Coverage   39.08%   38.97%   -0.12%     
==========================================
  Files         290      292       +2     
  Lines        6967     6987      +20     
  Branches     1273     1280       +7     
==========================================
  Hits         2723     2723              
- Misses       3570     3583      +13     
- Partials      674      681       +7

Impacted Files	Coverage Δ
components/menu-items/menu-items-group.js	`0% <ø> (ø)`	⬆️
components/menu-items/menu-items-toggle.js	`0% <ø> (ø)`	⬆️
components/menu-items/menu-items-shortcut.js	`0% <0%> (ø)`
editor/edit-post/header/mode-switcher/index.js	`0% <0%> (ø)`	⬆️
editor/edit-post/layout/index.js	`0% <0%> (ø)`	⬆️
editor/edit-post/modes/keyboard-shortcuts/index.js	`0% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c97ebf8...915d1ec. Read the comment docs.

youknowriad · 2017-12-02T12:00:09Z

Thanks for the PR, it's a good one, I can't speak for the chosen shortcut but it makes sense to me. Also, I recall mockups showing these shortcuts next to the button in the ellipsis menu for discoverability (cc @jasmussen).

youknowriad · 2017-12-02T12:01:13Z

editor/components/editor-global-keyboard-shortcuts/editor-mode.js

@@ -0,0 +1,54 @@
+/**


The editor/components folder is only for reusable editor components without "layout" information. I think the "mode" is a layout information because it only indicates which mode is "visible". Can we move this component to the editor/edit-post folder instead?

vladanost · 2017-12-02T15:26:34Z

@youknowriad Thanks. I moved the code to edit-post/modes/keyboard-shortcuts, will that work?
As for the shortcuts in the ellipsis menu I'm not sure where to put it since this shortcut toggles Visual/Code editor, it seems awkward to print it twice next to both names?

afercia · 2017-12-18T10:00:52Z

I'm not sure where to put it since this shortcut toggles Visual/Code editor, it seems awkward to print it twice next to both names?

I'd agree it wouldn't make much sense since tehre are 2 separate controls:

Hm the only way I can think of is merging the two controls in just one "dynamic" control:

in Visual mode the label would say "Switch to Code Editor"
in Code mode the label would say "Switch to Visual Editor"

However, I've heard some discussions about allowing plugins to add additional "modes" so I'm not sure the current UI would be so ideal in the first place.

youknowriad · 2017-12-18T10:11:04Z

@afercia @vladanost @jasmussen We could show it next to the "Editor" label, can't we?

jasmussen · 2017-12-18T10:25:23Z

It's true that the editor mode switch was designed to be able to scale to more types, but probably this shouldn't keep us from making improvements right now.

It seems the feedback centers around having a single keyboard shortcut that would cycle between modes. So you'd invoke the shortcut to go to HTML mode, and the same shorcut would take you back.

Combined with #2980, we'd want to show that keyboard shortcut in the menu, right aligned.

Given the ellipsis menu for selecting the editing mode right now behaves like a radio group, it feels weird to show the same shortcut next to both items, even one that is active and unselectable. So can we just show the shortcut next to the item that's not selected? I.e. this:

✓ Visual Editor
  Code Editor   [⌘+Shift+Alt+M]

and subsequently ...

  Visual Editor [⌘+Shift+Alt+M]
✓ Code Editor

Would that work? It seems like the obvious thing to try.

The next step would be to make the item dynamic, like Andrea suggests.

vladanost · 2017-12-22T08:53:55Z

@youknowriad @jasmussen @afercia I tried to display the shortcuts by adding MenuItemsShortcut component.
Also added a separate map for shortcuts.
This is what I have at this stage:

jasmussen · 2017-12-22T08:57:27Z

Really nice work. That looks good.

I'd remove the [] brackets, those were just for the ASCII mockup ;) — so long as the shortcut is right aligned. In the future we might need to either change the font size and/or dropdown width, to make room for long shortcuts. But nothing to worry about in this PR. Very nice work.

afercia · 2017-12-22T09:49:45Z

Really nice. A few questions/considerations:

will ⌘ work on Windows/Linux and other OSes?
contrast is too low, especially against the gray background:

On a white background, the lightest gray that can be used is $dark-gray-300: #6c7781;. On the gray background, it should be a bit darker to have a contrast ratio of at least 4.5:1

can we avoid opacity? it makes calculating the actual contrast a bit hard. If necessary, I guess we can introduce a new gray in the color palette /cc @jasmussen

I chose the shortcut to be mod+shift+alt+m, maybe better solution can be found.

Yep, I think at some point all the shortcuts would need a final review to check for potential conflicts, I guess we can keep it as is for now!

afercia · 2017-12-22T10:02:26Z

Wondering if the + is really necessary? In macOS, the keys are separated with a small space. It's not just a visual thing: VoiceOver announces the plus and I guess other screen readers do the same (can't test on Windows right now). Removing it could help making things a bit more clear.

youknowriad · 2017-12-22T11:07:37Z

components/keyboard-shortcuts/map.js

@@ -0,0 +1,3 @@
+export default {
+	toggle_editor_mode: '⌘+Shift+Alt+M',


Is it a good idea to keep "editor"'s specific shortcuts in a generic components module? why can't we avoid this map entirely and just pass the shortcut?

Yes, I can change it to use the shortcut directly. My thinking was to have a separate list in case it should be used elsewhere (like complete list of shortcuts).

Fair enough! let's move the list to the editor/edit-post folder then and retrieve passing the mapped value directly to the generic component.

Maybe this map could also hold the actual value used to trigger the shortcut mod+shift+alt+m. So we'll have a value and a label per shortcut.

youknowriad · 2017-12-22T11:10:02Z

editor/edit-post/header/mode-switcher/index.js

@@ -31,10 +31,17 @@ const MODES = [
 ];

 function ModeSwitcher( { onSwitch, mode } ) {
+	const filteredModes = MODES.map( MODE => {


Shoud we use mode instead of MODE? It's not a module's constant.

Right. I will change it to lower case. I used uppercase to differentiate it from mode that is passed as argument.

mmm right, maybe choice or something else :)

youknowriad · 2017-12-22T14:58:18Z

editor/edit-post/modes/keyboard-shortcuts/map.js

@@ -0,0 +1,6 @@
+export default {


Thanks for the changes 👍

If this map is supposed to grow over time and contain all edit-post shortcuts, should we move it to editor/edito-post/keyboard-shortcuts.js instead?

Yea, probably :) I was confused, since I already have modes/keyboard-shortcuts folder and didn't want to create clutter. I will move them there.

youknowriad · 2017-12-22T15:00:19Z

editor/edit-post/modes/keyboard-shortcuts/map.js

@@ -0,0 +1,6 @@
+export default {
+	toggle_editor_mode: {


What if instead of exporting an object, we export several constants. This one could be

const TOGGLE_EDITOR_MODE = { label, value } ?

Alternatively, we should use camelCase for keys to be able to reference them like this shortcuts.toggleEditorMode.label.

youknowriad · 2017-12-22T15:00:52Z

editor/edit-post/modes/keyboard-shortcuts/index.js

+	render() {
+		return (
+			<KeyboardShortcuts shortcuts={ {
+				'mod+shift+alt+m': this.toggleMode,


Should we use the newly introduce shortcut value here

youknowriad · 2017-12-22T15:44:45Z

editor/edit-post/keyboard-shortcuts.js

+export default {
+	toggleEditorMode: {
+		value: 'mod+shift+alt+m',
+		label: '⌘+Shift+Alt+M',


Minor: I wonder if we should detect the platform and replace ⌘ with ctrl if not on MacOS.

Is it reliable to use navigator.platform? I can't find any example in the Gutenberg code.

I think it is but that's the first time we need it :)

youknowriad

LGTM 👍 Can you rebase your PR?

youknowriad · 2017-12-22T15:46:36Z

editor/edit-post/modes/keyboard-shortcuts/index.js

+		return {
+			switchMode: ( mode ) => {
+				dispatch( {
+					type: 'SWITCH_MODE', mode: mode,


Minor: We could extract the SWITCH_MODE action into an action creator in editor/store/actions.js to factorize its usage.

Also, you can replace mode: mode here by just mode

youknowriad · 2017-12-22T16:56:58Z

Also, I'm not able to merge can you rebase? git fetch origin && git rebase origin/master?

aduth · 2018-01-16T21:38:35Z

editor/edit-post/modes/keyboard-shortcuts/index.js

@@ -0,0 +1,54 @@
+/**


While I'd like for us to flatten and eliminate the modes directory altogether, I don't particularly like the creation of a new folder here, because as it was prior to these changes, the modes directory contains exclusively the supported editing modes for the editor: visual and text. The shortcuts are not in themselves a mode.

ellatrix · 2018-01-17T13:16:32Z

Hi @vladanost @youknowriad

I was wondering if we could change this shortcut to fit in with the rest of WP and this editor. We have chosen Ctrl+Alt (Mac) and Shift+Alt (Windows) in the past because it can be entirely used by us without running into issues with browsers and operating systems. Also known as the access combination (we even got TinyMCE to move to that). Could we figure out a good combination for the mode switcher in this space? Any reason cmd/ctrl+shift+alt+m was chosen?

I think we should also build the API around that, so plugins can also only extend in this combination space.

Additionally, I can't figure out how to get the combination to work in master (Mac).

vladanost · 2018-01-17T13:50:51Z

Hi @iseulde
I'm currently on Linux and the shortcut combination works in master 2.0.
No particular reason for that combination, it should be revised.

ellatrix · 2018-01-17T13:55:02Z

@vladanost It only seems to work if the pop up is open. If it's closed, it doesn't.

vladanost · 2018-01-17T14:26:00Z

@iseulde On Linux, it works regardless of the popup being open. I will make a test later today on Mac. (I remember it worked there too)

vladanost · 2018-01-17T14:43:47Z

@iseulde

I think we should also build the API around that, so plugins can also only extend in this combination space.

Sound good.

vladanost · 2018-01-17T16:46:11Z

@iseulde It works for me on Mac too.

youknowriad reviewed Dec 2, 2017

View reviewed changes

youknowriad reviewed Dec 22, 2017

View reviewed changes

youknowriad approved these changes Dec 22, 2017

View reviewed changes

youknowriad reviewed Dec 22, 2017

View reviewed changes

youknowriad force-pushed the try/toggle-editor-mode-shortcut branch from a5a1d98 to 79ebbfd Compare December 25, 2017 12:26

vladanost added 9 commits December 25, 2017 13:28

add toggle editor mode shortcut

2b5cac6

renaming component

dfb2f2e

moving editor mode shortcuts to edit-post/modes

953d072

exploring shortcut display

769a2c2

shortcut key

ddcb3b1

shortcut key

2d472af

removing shortcut brackets

ed153fe

include getEditorMode adjustment for Gutenberg 1.9x

a4ea260

refactoring

e64a4c5

vladanost added 14 commits December 25, 2017 13:29

linting

ece8fa5

moving keyboard shortcuts

3d5f255

adding switchEditorMode action

a949fb8

add toggle editor mode shortcut

ec1e3dc

renaming component

a605451

moving editor mode shortcuts to edit-post/modes

1e8eac6

exploring shortcut display

ebe176f

shortcut key

61b2fc6

removing shortcut brackets

22cb50a

include getEditorMode adjustment for Gutenberg 1.9x

97d8a0e

refactoring

cb564dd

linting

1800042

moving keyboard shortcuts

08650fe

adding switchEditorMode action

1642d28

youknowriad force-pushed the try/toggle-editor-mode-shortcut branch from 79ebbfd to 1642d28 Compare December 25, 2017 12:38

youknowriad merged commit e624d34 into WordPress:master Dec 25, 2017

vladanost mentioned this pull request Dec 28, 2017

Check if mac when displaying editor mode toggle shortcut #4194

Merged

mcsf mentioned this pull request Jan 11, 2018

Components: Extract Reusable Keyboard Shortcuts #3644

Merged

aduth reviewed Jan 16, 2018

View reviewed changes

ellatrix mentioned this pull request Jan 17, 2018

Add block-level keyboard shortcuts #4436

Closed

3 tasks

ellatrix mentioned this pull request May 2, 2018

Add remaining editable shortcuts #4411

Merged

3 tasks

		@@ -0,0 +1,3 @@
		export default {
		toggle_editor_mode: '⌘+Shift+Alt+M',

Try: Add toggle editor mode shortcut #3755

Try: Add toggle editor mode shortcut #3755

Conversation

vladanost commented Dec 1, 2017

Description

How Has This Been Tested?

Types of changes

codecov bot commented Dec 1, 2017 • edited Loading

Codecov Report

youknowriad commented Dec 2, 2017

Choose a reason for hiding this comment

vladanost commented Dec 2, 2017

afercia commented Dec 18, 2017

youknowriad commented Dec 18, 2017 • edited Loading

jasmussen commented Dec 18, 2017

vladanost commented Dec 22, 2017

jasmussen commented Dec 22, 2017

afercia commented Dec 22, 2017

afercia commented Dec 22, 2017

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

vladanost Dec 22, 2017 • 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

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Dec 22, 2017

Choose a reason for hiding this comment

ellatrix commented Jan 17, 2018

vladanost commented Jan 17, 2018

ellatrix commented Jan 17, 2018

vladanost commented Jan 17, 2018

vladanost commented Jan 17, 2018

vladanost commented Jan 17, 2018

codecov bot commented Dec 1, 2017 •

edited

Loading

youknowriad commented Dec 18, 2017 •

edited

Loading

vladanost Dec 22, 2017 •

edited

Loading