How to use @wordpress/keyboard-shortcuts - 10 common examples
To help you get started, we’ve selected a few @wordpress/keyboard-shortcuts examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
WordPress / gutenberg / packages / block-editor / src / components / keyboard-shortcuts / index.js View on Github 
rootBlocksClientIds: getBlockOrder(),
};
}, [] );
const {
duplicateBlocks,
removeBlocks,
insertAfterBlock,
insertBeforeBlock,
multiSelect,
clearSelectedBlock,
} = useDispatch( 'core/block-editor' );
// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
// Prevents reposition Chrome devtools pane shortcut when devtools are open.
useShortcut( 'core/block-editor/duplicate', useCallback( ( event ) => {
event.preventDefault();
duplicateBlocks( clientIds );
}, [ clientIds, duplicateBlocks ] ), { bindGlobal: true } );
// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/remove', useCallback( ( event ) => {
event.preventDefault();
removeBlocks( clientIds );
}, [ clientIds, removeBlocks ] ), { bindGlobal: true } );
// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/insert-after', useCallback( ( event ) => {
event.preventDefault();
insertAfterBlock( last( clientIds ) );// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/remove', useCallback( ( event ) => {
event.preventDefault();
removeBlocks( clientIds );
}, [ clientIds, removeBlocks ] ), { bindGlobal: true } );
// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/insert-after', useCallback( ( event ) => {
event.preventDefault();
insertAfterBlock( last( clientIds ) );
}, [ clientIds, insertAfterBlock ] ), { bindGlobal: true } );
// Prevent 'view recently closed tabs' in Opera using preventDefault.
useShortcut( 'core/block-editor/insert-before', useCallback( ( event ) => {
event.preventDefault();
insertBeforeBlock( first( clientIds ) );
}, [ clientIds, insertBeforeBlock ] ), { bindGlobal: true } );
useShortcut( 'core/block-editor/delete-multi-selection', useCallback( ( event ) => {
if ( clientIds.length > 0 ) {
event.preventDefault();
removeBlocks( clientIds );
}
}, [ clientIds, removeBlocks ] ) );
useShortcut( 'core/block-editor/select-all', useCallback( ( event ) => {
event.preventDefault();
multiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
}, [ rootBlocksClientIds, multiSelect ] ) );function VisualEditorGlobalKeyboardShortcuts() {
const { redo, undo, savePost } = useDispatch( 'core/editor' );
const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );
useShortcut( 'core/editor/undo', ( event ) => {
undo();
event.preventDefault();
}, { bindGlobal: true } );
useShortcut( 'core/editor/redo', ( event ) => {
redo();
event.preventDefault();
}, { bindGlobal: true } );
useShortcut( 'core/editor/save', ( event ) => {
event.preventDefault();
// TODO: This should be handled in the `savePost` effect in
// considering `isSaveable`. See note on `isEditedPostSaveable`
// selector about dirtiness and meta-boxes.
//function VisualEditorGlobalKeyboardShortcuts() {
const { redo, undo, savePost } = useDispatch( 'core/editor' );
const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );
useShortcut( 'core/editor/undo', ( event ) => {
undo();
event.preventDefault();
}, { bindGlobal: true } );
useShortcut( 'core/editor/redo', ( event ) => {
redo();
event.preventDefault();
}, { bindGlobal: true } );
useShortcut( 'core/editor/save', ( event ) => {
event.preventDefault();
// 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;
}
savePost();
}, { bindGlobal: true } );
return (
<>}, [ clientIds, insertAfterBlock ] ), { bindGlobal: true } );
// Prevent 'view recently closed tabs' in Opera using preventDefault.
useShortcut( 'core/block-editor/insert-before', useCallback( ( event ) => {
event.preventDefault();
insertBeforeBlock( first( clientIds ) );
}, [ clientIds, insertBeforeBlock ] ), { bindGlobal: true } );
useShortcut( 'core/block-editor/delete-multi-selection', useCallback( ( event ) => {
if ( clientIds.length > 0 ) {
event.preventDefault();
removeBlocks( clientIds );
}
}, [ clientIds, removeBlocks ] ) );
useShortcut( 'core/block-editor/select-all', useCallback( ( event ) => {
event.preventDefault();
multiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
}, [ rootBlocksClientIds, multiSelect ] ) );
useShortcut( 'core/block-editor/unselect', useCallback( ( event ) => {
if ( clientIds.length > 1 ) {
event.preventDefault();
clearSelectedBlock();
window.getSelection().removeAllRanges();
}
}, [ clientIds, clearSelectedBlock ] ) );
return null;
}aliases: [ {
modifier: 'access',
character: 'p',
} ],
} );
}, [] );
useShortcut( 'core/edit-post/toggle-mode', () => {
const { richEditingEnabled, codeEditingEnabled } = getEditorSettings();
if ( ! richEditingEnabled || ! codeEditingEnabled ) {
return;
}
switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
}, { bindGlobal: true } );
useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
// This shortcut has no known clashes, but use preventDefault to prevent any
// obscure shortcuts from triggering.
event.preventDefault();
if ( isEditorSidebarOpen ) {
closeGeneralSidebar();
} else {
const sidebarToOpen = getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document';
openGeneralSidebar( sidebarToOpen );
}
}, { bindGlobal: true } );
return null;
}// Prevents reposition Chrome devtools pane shortcut when devtools are open.
useShortcut( 'core/block-editor/duplicate', useCallback( ( event ) => {
event.preventDefault();
duplicateBlocks( clientIds );
}, [ clientIds, duplicateBlocks ] ), { bindGlobal: true } );
// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/remove', useCallback( ( event ) => {
event.preventDefault();
removeBlocks( clientIds );
}, [ clientIds, removeBlocks ] ), { bindGlobal: true } );
// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut( 'core/block-editor/insert-after', useCallback( ( event ) => {
event.preventDefault();
insertAfterBlock( last( clientIds ) );
}, [ clientIds, insertAfterBlock ] ), { bindGlobal: true } );
// Prevent 'view recently closed tabs' in Opera using preventDefault.
useShortcut( 'core/block-editor/insert-before', useCallback( ( event ) => {
event.preventDefault();
insertBeforeBlock( first( clientIds ) );
}, [ clientIds, insertBeforeBlock ] ), { bindGlobal: true } );
useShortcut( 'core/block-editor/delete-multi-selection', useCallback( ( event ) => {
if ( clientIds.length > 0 ) {
event.preventDefault();
removeBlocks( clientIds );
}
}, [ clientIds, removeBlocks ] ) );registerShortcut( {
name: 'core/edit-post/previous-region',
category: 'global',
description: __( 'Navigate to the previous part of the editor.' ),
keyCombination: {
modifier: 'ctrlShift',
character: '`',
},
aliases: [ {
modifier: 'access',
character: 'p',
} ],
} );
}, [] );
useShortcut( 'core/edit-post/toggle-mode', () => {
const { richEditingEnabled, codeEditingEnabled } = getEditorSettings();
if ( ! richEditingEnabled || ! codeEditingEnabled ) {
return;
}
switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
}, { bindGlobal: true } );
useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
// This shortcut has no known clashes, but use preventDefault to prevent any
// obscure shortcuts from triggering.
event.preventDefault();
if ( isEditorSidebarOpen ) {
closeGeneralSidebar();
} else {
const sidebarToOpen = getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document';function SaveShortcut() {
const { savePost } = useDispatch( 'core/editor' );
const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );
useShortcut( 'core/editor/save', ( event ) => {
event.preventDefault();
// 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;
}
savePost();
}, { bindGlobal: true } );
return null;
}insertBeforeBlock( first( clientIds ) );
}, [ clientIds, insertBeforeBlock ] ), { bindGlobal: true } );
useShortcut( 'core/block-editor/delete-multi-selection', useCallback( ( event ) => {
if ( clientIds.length > 0 ) {
event.preventDefault();
removeBlocks( clientIds );
}
}, [ clientIds, removeBlocks ] ) );
useShortcut( 'core/block-editor/select-all', useCallback( ( event ) => {
event.preventDefault();
multiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
}, [ rootBlocksClientIds, multiSelect ] ) );
useShortcut( 'core/block-editor/unselect', useCallback( ( event ) => {
if ( clientIds.length > 1 ) {
event.preventDefault();
clearSelectedBlock();
window.getSelection().removeAllRanges();
}
}, [ clientIds, clearSelectedBlock ] ) );
return null;
}@wordpress/keyboard-shortcuts
Handling keyboard shortcuts.
