Fix the editor save keyboard shortcut not working in code editor view (…

…#13159) * Fix the editor save keyboard shortcut not working in code editor view * Refactor based on code review feedback - Introduce new TextEditorGlobalShortcuts component that implements the save shortcut - Rename EditorGlobalShortcuts to VisualEditorGlobalShortcuts - Add a deprecated version of EditorGlobalShortcuts - Update CHANGELOG
WordPress · Mar 6, 2019 · 3850b51 · 3850b51
1 parent 65dd726
commit 3850b51
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 36 deletions.
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
@@ -4,6 +4,9 @@
 
 * Expose the `className` property to style the `PluginSidebar` component.
 
+### Bug Fixes
+ - Fix 'save' keyboard shortcut not functioning in the Code Editor.
+
 ## 3.1.7 (2019-01-03)
 
 ## 3.1.6 (2018-12-18)

diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { PostTextEditor, PostTitle } from '@wordpress/editor';
+import {
+	PostTextEditor,
+	PostTitle,
+	TextEditorGlobalKeyboardShortcuts,
+} from '@wordpress/editor';
 import { IconButton } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -21,6 +25,7 @@ function TextEditor( { onExit, isRichEditingEnabled } ) {
 					>
 						{ __( 'Exit Code Editor' ) }
 					</IconButton>
+					<TextEditorGlobalKeyboardShortcuts />
 				</div>
 			)	}
 			<div className="edit-post-text-editor__body">

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -7,7 +7,7 @@ import {
 	PostTitle,
 	WritingFlow,
 	ObserveTyping,
-	EditorGlobalKeyboardShortcuts,
+	VisualEditorGlobalKeyboardShortcuts,
 	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
 	_BlockSettingsMenuFirstItem,
@@ -23,7 +23,7 @@ import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-se
 function VisualEditor() {
 	return (
 		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
-			<EditorGlobalKeyboardShortcuts />
+			<VisualEditorGlobalKeyboardShortcuts />
 			<CopyHandler />
 			<MultiSelectScrollIntoView />
 			<WritingFlow>

diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
@@ -1,8 +1,13 @@
 ## 9.1.0 (Unreleased)
 
-### New Feature
+### New Features
 
 - Added `createCustomColorsHOC` for creating a higher order `withCustomColors` component.
+- Added a new `TextEditorGlobalKeyboardShortcuts` component.
+
+### Deprecations
+
+- `EditorGlobalKeyboardShortcuts` has been deprecated in favor of `VisualEditorGlobalKeyboardShortcuts`.
 
 ### Bug Fixes
 

diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
@@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { shortcuts } from '../editor-global-keyboard-shortcuts';
+import { shortcuts } from '../global-keyboard-shortcuts/visual-editor-shortcuts';
 import BlockActions from '../block-actions';
 import BlockModeToggle from './block-mode-toggle';
 import ReusableBlockConvertButton from './reusable-block-convert-button';

diff --git a/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js b/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { KeyboardShortcuts } from '@wordpress/components';
+import { rawShortcut } from '@wordpress/keycodes';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+export function SaveShortcut( { onSave } ) {
+	return (
+		<KeyboardShortcuts
+			bindGlobal
+			shortcuts={ {
+				[ rawShortcut.primary( 's' ) ]: ( event ) => {
+					event.preventDefault();
+					onSave();
+				},
+			} }
+		/>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const { isEditedPostDirty } = select( 'core/editor' );
+
+		return {
+			isDirty: isEditedPostDirty(),
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps, { select } ) => {
+		const {
+			savePost,
+		} = dispatch( 'core/editor' );
+
+		return {
+			onSave() {
+				// TODO: This should be handled in the `savePost` effect in
+				// considering `isSaveable`. See note on `isEditedPostSaveable`
+				// selector about dirtiness and meta-boxes.
+				//
+				// See: `isEditedPostSaveable`
+				const { isEditedPostDirty } = select( 'core/editor' );
+				if ( ! isEditedPostDirty() ) {
+					return;
+				}
+
+				savePost();
+			},
+		};
+	} ),
+] )( SaveShortcut );
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import SaveShortcut from './save-shortcut';
+
+export default function TextEditorGlobalKeyboardShortcuts() {
+	return (
+		<SaveShortcut />
+	);
+}
diff --git a/...editor-global-keyboard-shortcuts/index.js → ...oard-shortcuts/visual-editor-shortcuts.js b/...editor-global-keyboard-shortcuts/index.js → ...oard-shortcuts/visual-editor-shortcuts.js
@@ -11,11 +11,13 @@ import { KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 import { compose } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import SaveShortcut from './save-shortcut';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -41,13 +43,12 @@ export const shortcuts = {
 	},
 };
 
-class EditorGlobalKeyboardShortcuts extends Component {
+class VisualEditorGlobalKeyboardShortcuts extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.selectAll = this.selectAll.bind( this );
 		this.undoOrRedo = this.undoOrRedo.bind( this );
-		this.save = this.save.bind( this );
 		this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this );
 		this.clearMultiSelection = this.clearMultiSelection.bind( this );
 	}
@@ -70,11 +71,6 @@ class EditorGlobalKeyboardShortcuts extends Component {
 		event.preventDefault();
 	}
 
-	save( event ) {
-		event.preventDefault();
-		this.props.onSave();
-	}
-
 	deleteSelectedBlocks( event ) {
 		const { selectedBlockClientIds, hasMultiSelection, onRemove, isLocked } = this.props;
 		if ( hasMultiSelection ) {
@@ -110,12 +106,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 						escape: this.clearMultiSelection,
 					} }
 				/>
-				<KeyboardShortcuts
-					bindGlobal
-					shortcuts={ {
-						[ rawShortcut.primary( 's' ) ]: this.save,
-					} }
-				/>
+				<SaveShortcut />
 				{ selectedBlockClientIds.length > 0 && (
 					<BlockActions clientIds={ selectedBlockClientIds }>
 						{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => (
@@ -146,7 +137,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 	}
 }
 
-export default compose( [
+const EnhancedVisualEditorGlobalKeyboardShortcuts = compose( [
 	withSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -169,35 +160,32 @@ export default compose( [
 			selectedBlockClientIds,
 		};
 	} ),
-	withDispatch( ( dispatch, ownProps, { select } ) => {
+	withDispatch( ( dispatch ) => {
 		const {
 			clearSelectedBlock,
 			multiSelect,
 			redo,
 			undo,
 			removeBlocks,
-			savePost,
 		} = dispatch( 'core/editor' );
 
 		return {
-			onSave() {
-				// TODO: This should be handled in the `savePost` effect in
-				// considering `isSaveable`. See note on `isEditedPostSaveable`
-				// selector about dirtiness and meta-boxes.
-				//
-				// See: `isEditedPostSaveable`
-				const { isEditedPostDirty } = select( 'core/editor' );
-				if ( ! isEditedPostDirty() ) {
-					return;
-				}
-
-				savePost();
-			},
 			clearSelectedBlock,
 			onMultiSelect: multiSelect,
 			onRedo: redo,
 			onUndo: undo,
 			onRemove: removeBlocks,
 		};
 	} ),
-] )( EditorGlobalKeyboardShortcuts );
+] )( VisualEditorGlobalKeyboardShortcuts );
+
+export default EnhancedVisualEditorGlobalKeyboardShortcuts;
+
+export function EditorGlobalKeyboardShortcuts() {
+	deprecated( 'EditorGlobalKeyboardShortcuts', {
+		alternative: 'VisualEditorGlobalKeyboardShortcuts',
+		plugin: 'Gutenberg',
+	} );
+
+	return <EnhancedVisualEditorGlobalKeyboardShortcuts />;
+}
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -36,7 +36,11 @@ export { default as URLPopover } from './url-popover';
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
-export { default as EditorGlobalKeyboardShortcuts } from './editor-global-keyboard-shortcuts';
+export {
+	default as VisualEditorGlobalKeyboardShortcuts,
+	EditorGlobalKeyboardShortcuts,
+} from './global-keyboard-shortcuts/visual-editor-shortcuts';
+export { default as TextEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/text-editor-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';