Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Separate the block editor shortcuts from the post editor shortcuts #14116

Merged
merged 1 commit into from
Feb 28, 2019
Merged

Separate the block editor shortcuts from the post editor shortcuts #14116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/editor/src/components/block-settings-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
158 changes: 158 additions & 0 deletions packages/editor/src/components/global-keyboard-shortcuts/block-editor-shortcuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Fragment>
<KeyboardShortcuts
shortcuts={ {
[ rawShortcut.primary( 'a' ) ]: this.selectAll,
backspace: this.deleteSelectedBlocks,
del: this.deleteSelectedBlocks,
escape: this.clearMultiSelection,
} }
/>
{ selectedBlockClientIds.length > 0 && (
<BlockActions clientIds={ selectedBlockClientIds }>
{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => (
<KeyboardShortcuts
bindGlobal
shortcuts={ {
// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
// Prevents reposition Chrome devtools pane shortcut when devtools are open.
[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),

// Prevent 'view recently closed tabs' in Opera using preventDefault.
[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
} }
/>
) }
</BlockActions>
) }
</Fragment>
);
}
}

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 );
154 changes: 15 additions & 139 deletions packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ) {
Expand All @@ -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 (
<Fragment>
<BlockEditorKeyboardShortcuts />
<KeyboardShortcuts
shortcuts={ {
[ rawShortcut.primary( 'a' ) ]: this.selectAll,
[ rawShortcut.primary( 'z' ) ]: this.undoOrRedo,
[ rawShortcut.primaryShift( 'z' ) ]: this.undoOrRedo,
backspace: this.deleteSelectedBlocks,
del: this.deleteSelectedBlocks,
escape: this.clearMultiSelection,
} }
/>
<SaveShortcut />
{ selectedBlockClientIds.length > 0 && (
<BlockActions clientIds={ selectedBlockClientIds }>
{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => (
<KeyboardShortcuts
bindGlobal
shortcuts={ {
// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
// Prevents reposition Chrome devtools pane shortcut when devtools are open.
[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),

// Prevent 'view recently closed tabs' in Opera using preventDefault.
[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
} }
/>
) }
</BlockActions>
) }
</Fragment>
);
}
}

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;

Expand Down