From 21c4aacd7afbdf1354bc480a1318ab73386fd9a1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 1 Feb 2019 14:13:41 +0800 Subject: [PATCH] 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 --- packages/edit-post/CHANGELOG.md | 3 ++ .../src/components/text-editor/index.js | 7 ++- .../src/components/visual-editor/index.js | 4 +- packages/editor/CHANGELOG.md | 7 ++- .../components/block-settings-menu/index.js | 2 +- .../save-shortcut.js | 52 +++++++++++++++++++ .../text-editor-shortcuts.js | 10 ++++ .../visual-editor-shortcuts.js} | 48 +++++++---------- packages/editor/src/components/index.js | 6 ++- 9 files changed, 103 insertions(+), 36 deletions(-) create mode 100644 packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js create mode 100644 packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js rename packages/editor/src/components/{editor-global-keyboard-shortcuts/index.js => global-keyboard-shortcuts/visual-editor-shortcuts.js} (85%) diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index ee41b7e7fb9f1e..db8c68da542295 100644 --- 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 index 019a19b2e518c8..882e97dd7e83c6 100644 --- 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' ) } + ) }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 03dbcdb3f047be..a8cdc7e06f69df 100644 --- 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 ( - + diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 30e57fd4f033fe..c5365bd4b44df9 100644 --- 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 index ec4bbd60db53f7..8436276c8f99b5 100644 --- 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 new file mode 100644 index 00000000000000..c2a117ec6816fb --- /dev/null +++ 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 ( + { + 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 new file mode 100644 index 00000000000000..2d2d0510fd3167 --- /dev/null +++ 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 ( + + ); +} diff --git a/packages/editor/src/components/editor-global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js similarity index 85% rename from packages/editor/src/components/editor-global-keyboard-shortcuts/index.js rename to packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js index ed2a4039755b1f..9242734d0e9e4a 100644 --- a/packages/editor/src/components/editor-global-keyboard-shortcuts/index.js +++ b/packages/editor/src/components/global-keyboard-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, } } /> - + { selectedBlockClientIds.length > 0 && ( { ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => ( @@ -146,7 +137,7 @@ class EditorGlobalKeyboardShortcuts extends Component { } } -export default compose( [ +const EnhancedVisualEditorGlobalKeyboardShortcuts = compose( [ withSelect( ( select ) => { const { getBlockOrder, @@ -169,30 +160,16 @@ 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, @@ -200,4 +177,15 @@ export default compose( [ onRemove: removeBlocks, }; } ), -] )( EditorGlobalKeyboardShortcuts ); +] )( VisualEditorGlobalKeyboardShortcuts ); + +export default EnhancedVisualEditorGlobalKeyboardShortcuts; + +export function EditorGlobalKeyboardShortcuts() { + deprecated( 'EditorGlobalKeyboardShortcuts', { + alternative: 'VisualEditorGlobalKeyboardShortcuts', + plugin: 'Gutenberg', + } ); + + return ; +} diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index ebd0a59331198c..b02da43dbfe579 100644 --- 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';