From 17d509ba2512326409244c8fe70739f68d0df018 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 28 Feb 2019 09:37:39 +0100 Subject: [PATCH] Separate the block editor shortcuts from the post editor shortcuts (#14116) --- .../components/block-settings-menu/index.js | 2 +- .../block-editor-shortcuts.js | 158 ++++++++++++++++++ .../visual-editor-shortcuts.js | 154 ++--------------- 3 files changed, 174 insertions(+), 140 deletions(-) create mode 100644 packages/editor/src/components/global-keyboard-shortcuts/block-editor-shortcuts.js diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js index b07452bdce393..c15bc11c63b29 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 '../global-keyboard-shortcuts/visual-editor-shortcuts'; +import { shortcuts } from '../global-keyboard-shortcuts/block-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/block-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/block-editor-shortcuts.js new file mode 100644 index 0000000000000..4e97184cd93f9 --- /dev/null +++ b/packages/editor/src/components/global-keyboard-shortcuts/block-editor-shortcuts.js @@ -0,0 +1,158 @@ +/** + * External dependencies + */ +import { first, last, some, flow } from 'lodash'; + +/** + * WordPress dependencies + */ +import { Component, Fragment } from '@wordpress/element'; +import { KeyboardShortcuts } from '@wordpress/components'; +import { withSelect, withDispatch } from '@wordpress/data'; +import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; +import { compose } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import BlockActions from '../block-actions'; + +const preventDefault = ( event ) => { + event.preventDefault(); + return event; +}; + +export const shortcuts = { + duplicate: { + raw: rawShortcut.primaryShift( 'd' ), + display: displayShortcut.primaryShift( 'd' ), + }, + removeBlock: { + raw: rawShortcut.access( 'z' ), + display: displayShortcut.access( 'z' ), + }, + insertBefore: { + raw: rawShortcut.primaryAlt( 't' ), + display: displayShortcut.primaryAlt( 't' ), + }, + insertAfter: { + raw: rawShortcut.primaryAlt( 'y' ), + display: displayShortcut.primaryAlt( 'y' ), + }, +}; + +class BlockEditorKeyboardShortcuts extends Component { + constructor() { + super( ...arguments ); + + this.selectAll = this.selectAll.bind( this ); + this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this ); + this.clearMultiSelection = this.clearMultiSelection.bind( this ); + } + + selectAll( event ) { + const { rootBlocksClientIds, onMultiSelect } = this.props; + event.preventDefault(); + onMultiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) ); + } + + deleteSelectedBlocks( event ) { + const { selectedBlockClientIds, hasMultiSelection, onRemove, isLocked } = this.props; + if ( hasMultiSelection ) { + event.preventDefault(); + if ( ! isLocked ) { + onRemove( selectedBlockClientIds ); + } + } + } + + /** + * Clears current multi-selection, if one exists. + */ + clearMultiSelection() { + const { hasMultiSelection, clearSelectedBlock } = this.props; + if ( hasMultiSelection ) { + clearSelectedBlock(); + window.getSelection().removeAllRanges(); + } + } + + render() { + const { selectedBlockClientIds } = this.props; + return ( + + + { selectedBlockClientIds.length > 0 && ( + + { ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => ( + + ) } + + ) } + + ); + } +} + +export default compose( [ + withSelect( ( select ) => { + const { + getBlockOrder, + getMultiSelectedBlockClientIds, + hasMultiSelection, + getBlockRootClientId, + getTemplateLock, + getSelectedBlockClientId, + } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); + const selectedBlockClientIds = selectedBlockClientId ? [ selectedBlockClientId ] : getMultiSelectedBlockClientIds(); + + return { + rootBlocksClientIds: getBlockOrder(), + hasMultiSelection: hasMultiSelection(), + isLocked: some( + selectedBlockClientIds, + ( clientId ) => !! getTemplateLock( getBlockRootClientId( clientId ) ) + ), + selectedBlockClientIds, + }; + } ), + withDispatch( ( dispatch ) => { + const { + clearSelectedBlock, + multiSelect, + removeBlocks, + } = dispatch( 'core/block-editor' ); + + return { + clearSelectedBlock, + onMultiSelect: multiSelect, + onRemove: removeBlocks, + }; + } ), +] )( BlockEditorKeyboardShortcuts ); diff --git a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js index 02fe1d0e94b7e..4a0cd7f8fd4f7 100644 --- a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js +++ b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js @@ -1,62 +1,22 @@ -/** - * External dependencies - */ -import { first, last, some, flow } from 'lodash'; - /** * WordPress dependencies */ import { Component, Fragment } from '@wordpress/element'; import { KeyboardShortcuts } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; -import { compose } from '@wordpress/compose'; +import { withDispatch } from '@wordpress/data'; +import { rawShortcut } from '@wordpress/keycodes'; import deprecated from '@wordpress/deprecated'; /** * Internal dependencies */ -import BlockActions from '../block-actions'; import SaveShortcut from './save-shortcut'; - -const preventDefault = ( event ) => { - event.preventDefault(); - return event; -}; - -export const shortcuts = { - duplicate: { - raw: rawShortcut.primaryShift( 'd' ), - display: displayShortcut.primaryShift( 'd' ), - }, - removeBlock: { - raw: rawShortcut.access( 'z' ), - display: displayShortcut.access( 'z' ), - }, - insertBefore: { - raw: rawShortcut.primaryAlt( 't' ), - display: displayShortcut.primaryAlt( 't' ), - }, - insertAfter: { - raw: rawShortcut.primaryAlt( 'y' ), - display: displayShortcut.primaryAlt( 'y' ), - }, -}; +import BlockEditorKeyboardShortcuts from './block-editor-shortcuts'; class VisualEditorGlobalKeyboardShortcuts extends Component { constructor() { super( ...arguments ); - - this.selectAll = this.selectAll.bind( this ); this.undoOrRedo = this.undoOrRedo.bind( this ); - this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this ); - this.clearMultiSelection = this.clearMultiSelection.bind( this ); - } - - selectAll( event ) { - const { rootBlocksClientIds, onMultiSelect } = this.props; - event.preventDefault(); - onMultiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) ); } undoOrRedo( event ) { @@ -71,117 +31,33 @@ class VisualEditorGlobalKeyboardShortcuts extends Component { event.preventDefault(); } - deleteSelectedBlocks( event ) { - const { selectedBlockClientIds, hasMultiSelection, onRemove, isLocked } = this.props; - if ( hasMultiSelection ) { - event.preventDefault(); - if ( ! isLocked ) { - onRemove( selectedBlockClientIds ); - } - } - } - - /** - * Clears current multi-selection, if one exists. - */ - clearMultiSelection() { - const { hasMultiSelection, clearSelectedBlock } = this.props; - if ( hasMultiSelection ) { - clearSelectedBlock(); - window.getSelection().removeAllRanges(); - } - } - render() { - const { selectedBlockClientIds } = this.props; return ( + - { selectedBlockClientIds.length > 0 && ( - - { ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => ( - - ) } - - ) } ); } } -const EnhancedVisualEditorGlobalKeyboardShortcuts = compose( [ - withSelect( ( select ) => { - const { - getBlockOrder, - getMultiSelectedBlockClientIds, - hasMultiSelection, - getBlockRootClientId, - getTemplateLock, - getSelectedBlockClientId, - } = select( 'core/block-editor' ); - const selectedBlockClientId = getSelectedBlockClientId(); - const selectedBlockClientIds = selectedBlockClientId ? [ selectedBlockClientId ] : getMultiSelectedBlockClientIds(); - - return { - rootBlocksClientIds: getBlockOrder(), - hasMultiSelection: hasMultiSelection(), - isLocked: some( - selectedBlockClientIds, - ( clientId ) => !! getTemplateLock( getBlockRootClientId( clientId ) ) - ), - selectedBlockClientIds, - }; - } ), - withDispatch( ( dispatch ) => { - // This component should probably be split into to - // A block editor specific one and a post editor one. - const { - clearSelectedBlock, - multiSelect, - removeBlocks, - } = dispatch( 'core/block-editor' ); - const { - redo, - undo, - } = dispatch( 'core/editor' ); - - return { - clearSelectedBlock, - onMultiSelect: multiSelect, - onRedo: redo, - onUndo: undo, - onRemove: removeBlocks, - }; - } ), -] )( VisualEditorGlobalKeyboardShortcuts ); +const EnhancedVisualEditorGlobalKeyboardShortcuts = withDispatch( ( dispatch ) => { + const { + redo, + undo, + } = dispatch( 'core/editor' ); + + return { + onRedo: redo, + onUndo: undo, + }; +} )( VisualEditorGlobalKeyboardShortcuts ); export default EnhancedVisualEditorGlobalKeyboardShortcuts;