Skip to content

Commit

Permalink
Refactor the visual editor shortcuts to use the keyboard-shortcuts pa…
Browse files Browse the repository at this point in the history
…ckage (#19318)
  • Loading branch information
youknowriad authored Dec 25, 2019
1 parent ffcd657 commit 3757147
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 182 deletions.
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,9 @@ export const mainShortcuts = [
];

export const globalShortcuts = [
{
keyCombination: primary( 's' ),
description: __( 'Save your changes.' ),
},
{
keyCombination: primary( 'z' ),
description: __( 'Undo your last changes.' ),
},
{
keyCombination: primaryShift( 'z' ),
description: __( 'Redo your last undo.' ),
},
'core/editor/save',
'core/editor/undo',
'core/editor/redo',
{
keyCombination: primaryShift( ',' ),
description: __( 'Show or hide the settings sidebar.' ),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,9 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
<ShortcutSection
shortcuts={
Array [
Object {
"description": "Save your changes.",
"keyCombination": Array [
"Ctrl",
"+",
"S",
],
},
Object {
"description": "Undo your last changes.",
"keyCombination": Array [
"Ctrl",
"+",
"Z",
],
},
Object {
"description": "Redo your last undo.",
"keyCombination": Array [
"Ctrl",
"+",
"Shift",
"+",
"Z",
],
},
"core/editor/save",
"core/editor/undo",
"core/editor/redo",
Object {
"ariaLabel": "Control + Shift + Comma",
"description": "Show or hide the settings sidebar.",
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
UnsavedChangesWarning,
EditorNotices,
PostPublishPanel,
EditorKeyboardShortcutsRegister,
} from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
import {
BlockBreadcrumb,
BlockEditorKeyboardShortcuts,
__experimentalPageTemplatePicker,
__experimentalUsePageTemplatePickerVisible,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -90,7 +90,7 @@ function Layout() {
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditorModeKeyboardShortcuts />
<BlockEditorKeyboardShortcuts.Register />
<EditorKeyboardShortcutsRegister />
<FocusReturnProvider>
<EditorRegions
className={ className }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/media-utils": "file:../media-utils",
"@wordpress/notices": "file:../notices",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/**
* WordPress dependencies
*/
import { useEffect } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';

function EditorKeyboardShortcutsRegister() {
// Registering the shortcuts
const { registerShortcut } = useDispatch( 'core/keyboard-shortcuts' );
useEffect( () => {
registerShortcut( {
name: 'core/editor/save',
category: 'global',
description: __( 'Save your changes.' ),
keyCombination: {
modifier: 'primary',
character: 's',
},
} );

registerShortcut( {
name: 'core/editor/undo',
category: 'global',
description: __( 'Undo your last changes.' ),
keyCombination: {
modifier: 'primary',
character: 'z',
},
} );

registerShortcut( {
name: 'core/editor/redo',
category: 'global',
description: __( 'Redo your last undo.' ),
keyCombination: {
modifier: 'primaryShift',
character: 'z',
},
} );
}, [ registerShortcut ] );

return <BlockEditorKeyboardShortcuts.Register />;
}

export default EditorKeyboardShortcutsRegister;
Original file line number Diff line number Diff line change
@@ -1,50 +1,29 @@
/**
* WordPress dependencies
*/
import { KeyboardShortcuts } from '@wordpress/components';
import { rawShortcut } from '@wordpress/keycodes';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useDispatch, useSelect } from '@wordpress/data';

export function SaveShortcut( { onSave } ) {
return (
<KeyboardShortcuts
bindGlobal
shortcuts={ {
[ rawShortcut.primary( 's' ) ]: ( event ) => {
event.preventDefault();
onSave();
},
} }
/>
);
}
function SaveShortcut() {
const { savePost } = useDispatch( 'core/editor' );
const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );

useShortcut( 'core/editor/save', ( event ) => {
event.preventDefault();

export default compose( [
withSelect( ( select ) => {
const { isEditedPostDirty } = select( 'core/editor' );
// TODO: This should be handled in the `savePost` effect in
// considering `isSaveable`. See note on `isEditedPostSaveable`
// selector about dirtiness and meta-boxes.
//
// See: `isEditedPostSaveable`
if ( ! isEditedPostDirty() ) {
return;
}

return {
isDirty: isEditedPostDirty(),
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
const { savePost } = dispatch( 'core/editor' );
savePost();
}, { bindGlobal: true } );

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;
}
return null;
}

savePost();
},
};
} ),
] )( SaveShortcut );
export default SaveShortcut;
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { KeyboardShortcuts } from '@wordpress/components';
import { withDispatch } from '@wordpress/data';
import { rawShortcut } from '@wordpress/keycodes';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useDispatch, useSelect } from '@wordpress/data';
import deprecated from '@wordpress/deprecated';
import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';

Expand All @@ -13,59 +11,50 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
*/
import SaveShortcut from './save-shortcut';

class VisualEditorGlobalKeyboardShortcuts extends Component {
constructor() {
super( ...arguments );
this.undoOrRedo = this.undoOrRedo.bind( this );
}
function VisualEditorGlobalKeyboardShortcuts() {
const { redo, undo, savePost } = useDispatch( 'core/editor' );
const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );

undoOrRedo( event ) {
const { onRedo, onUndo } = this.props;
useShortcut( 'core/editor/undo', ( event ) => {
undo();
event.preventDefault();
}, { bindGlobal: true } );

if ( event.shiftKey ) {
onRedo();
} else {
onUndo();
}
useShortcut( 'core/editor/redo', ( event ) => {
redo();
event.preventDefault();
}, { bindGlobal: true } );

useShortcut( 'core/editor/save', ( event ) => {
event.preventDefault();
}

render() {
return (
<>
<BlockEditorKeyboardShortcuts />
<KeyboardShortcuts
shortcuts={ {
[ rawShortcut.primary( 'z' ) ]: this.undoOrRedo,
[ rawShortcut.primaryShift( 'z' ) ]: this.undoOrRedo,
} }
/>
<SaveShortcut />
</>
);
}
}
// TODO: This should be handled in the `savePost` effect in
// considering `isSaveable`. See note on `isEditedPostSaveable`
// selector about dirtiness and meta-boxes.
//
// See: `isEditedPostSaveable`
if ( ! isEditedPostDirty() ) {
return;
}

const EnhancedVisualEditorGlobalKeyboardShortcuts = withDispatch( ( dispatch ) => {
const {
redo,
undo,
} = dispatch( 'core/editor' );
savePost();
}, { bindGlobal: true } );

return {
onRedo: redo,
onUndo: undo,
};
} )( VisualEditorGlobalKeyboardShortcuts );
return (
<>
<BlockEditorKeyboardShortcuts />
<SaveShortcut />
</>
);
}

export default EnhancedVisualEditorGlobalKeyboardShortcuts;
export default VisualEditorGlobalKeyboardShortcuts;

export function EditorGlobalKeyboardShortcuts() {
deprecated( 'EditorGlobalKeyboardShortcuts', {
alternative: 'VisualEditorGlobalKeyboardShortcuts',
plugin: 'Gutenberg',
} );

return <EnhancedVisualEditorGlobalKeyboardShortcuts />;
return <VisualEditorGlobalKeyboardShortcuts />;
}
1 change: 1 addition & 0 deletions packages/editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export {
EditorGlobalKeyboardShortcuts,
} from './global-keyboard-shortcuts/visual-editor-shortcuts';
export { default as TextEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/text-editor-shortcuts';
export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-shortcuts/register-shortcuts';
export { default as EditorHistoryRedo } from './editor-history/redo';
export { default as EditorHistoryUndo } from './editor-history/undo';
export { default as EditorNotices } from './editor-notices';
Expand Down
Loading

0 comments on commit 3757147

Please sign in to comment.