Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try: Add toggle editor mode shortcut #3755
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.
All suggestions are welcome. Thanks.
How Has This Been Tested?
npm run test-unit
Types of changes
New feature (non-breaking change which adds functionality)
@@ 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
@youknowriad Thanks. I moved the code to edit-post/modes/keyboard-shortcuts, will that work?
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:
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.
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:
and subsequently ...
Would that work? It seems like the obvious thing to try.
The next step would be to make the item dynamic, like Andrea suggests.
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.
Really nice. A few questions/considerations:
On a white background, the lightest gray that can be used is
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!
Dec 25, 2017
1 check passed
referenced this pull request
Dec 28, 2017
added a commit
this pull request
Jan 3, 2018
referenced this pull request
Jan 11, 2018
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
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).