Try: Add toggle editor mode shortcut

components/menu-items/menu-items-group.js

@@ -19,6 +19,7 @@ function MenuItemsGroup( { label, value, choices = [], onSelect, children, insta
 							key={ item.value }
 							label={ item.label }
 							isSelected={ isSelected }
+							shortcut={ item.shortcut }
 							onClick={ () => {
 								if ( ! isSelected ) {
 									onSelect( item.value );

components/menu-items/menu-items-shortcut.js

@@ -0,0 +1,10 @@
+function MenuItemsShortcut( { shortcut } ) {
+	if ( ! shortcut ) {
+		return null;
+	}
+	return (
+		<span style={ { float: 'right', opacity: .5 } }>{ shortcut }</span>
+	);
+}
+
+export default MenuItemsShortcut;

components/menu-items/menu-items-toggle.js

@@ -1,11 +1,12 @@
 /**
  * Internal dependencies
  */
-import IconButton from '../icon-button';
 import Button from '../button';
+import Shortcut from './menu-items-shortcut';
+import IconButton from '../icon-button';
 import './style.scss';
 
-function MenuItemsToggle( { label, isSelected, onClick } ) {
+function MenuItemsToggle( { label, isSelected, onClick, shortcut } ) {
 	if ( isSelected ) {
 		return (
 			<IconButton
@@ -14,6 +15,7 @@ function MenuItemsToggle( { label, isSelected, onClick } ) {
 				onClick={ onClick }
 			>
 				{ label }
+				<Shortcut shortcut={ shortcut } />
 			</IconButton>
 		);
 	}
@@ -24,6 +26,7 @@ function MenuItemsToggle( { label, isSelected, onClick } ) {
 			onClick={ onClick }
 		>
 			{ label }
+			<Shortcut shortcut={ shortcut } />
 		</Button>
 	);
 }

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

@@ -12,7 +12,9 @@ import { MenuItemsGroup } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import shortcuts from '../../keyboard-shortcuts';
 import { getEditorMode } from '../../../store/selectors';
+import { switchEditorMode } from '../../../store/actions';
 
 /**
  * Set of available mode options.
@@ -31,10 +33,17 @@ const MODES = [
 ];
 
 function ModeSwitcher( { onSwitch, mode } ) {
+	const choices = MODES.map( choice => {
+		if ( choice.value !== mode ) {
+			return { ...choice, shortcut: shortcuts.toggleEditorMode.label };
+		}
+		return choice;
+	} );
+
 	return (
 		<MenuItemsGroup
 			label={ __( 'Editor' ) }
-			choices={ MODES }
+			choices={ choices }
 			value={ mode }
 			onSelect={ onSwitch }
 		/>
@@ -47,10 +56,7 @@ export default connect(
 	} ),
 	( dispatch, ownProps ) => ( {
 		onSwitch( mode ) {
-			dispatch( {
-				type: 'SWITCH_MODE',
-				mode: mode,
-			} );
+			dispatch( switchEditorMode( mode ) );
 			ownProps.onSelect( mode );
 		},
 	} )

editor/edit-post/keyboard-shortcuts.js

@@ -0,0 +1,6 @@
+export default {
+	toggleEditorMode: {
+		value: 'mod+shift+alt+m',
+		label: '⌘+Shift+Alt+M',
+	},
+};

editor/edit-post/layout/index.js

@@ -19,6 +19,7 @@ import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 import DocumentTitle from '../document-title';
+import EditorModeKeyboardShortcuts from '../modes/keyboard-shortcuts';
 import {
 	MetaBoxes,
 	AutosaveMonitor,
@@ -57,6 +58,7 @@ function Layout( {
 			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
 				<EditorNotices />
 				<div className="editor-layout__editor">
+					<EditorModeKeyboardShortcuts />
 					{ mode === 'text' && <TextEditor /> }
 					{ mode === 'visual' && <VisualEditor /> }
 				</div>

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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { KeyboardShortcuts } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import shortcuts from '../../keyboard-shortcuts';
+import { getEditorMode } from '../../../store/selectors';
+import { switchEditorMode } from '../../../store/actions';
+
+class EditorModeKeyboardShortcuts extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.toggleMode = this.toggleMode.bind( this );
+	}
+
+	toggleMode() {
+		const { mode, switchMode } = this.props;
+		switchMode( mode === 'visual' ? 'text' : 'visual' );
+	}
+
+	render() {
+		return (
+			<KeyboardShortcuts shortcuts={ {
+				[ shortcuts.toggleEditorMode.value ]: this.toggleMode,
+			} } />
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			mode: getEditorMode( state ),
+		};
+	},
+	( dispatch ) => {
+		return {
+			switchMode: ( mode ) => {
+				dispatch( switchEditorMode( mode ) );
+			},
+		};
+	},
+
+)( EditorModeKeyboardShortcuts );

editor/store/actions.js

@@ -601,3 +601,10 @@ export function appendDefaultBlock() {
 		type: 'APPEND_DEFAULT_BLOCK',
 	};
 }
+
+export function switchEditorMode( mode ) {
+	return {
+		type: 'SWITCH_MODE',
+		mode,
+	};
+}