diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js index 57677f5e8e0844..46f8f67bbaebab 100644 --- a/packages/block-library/src/list-item/edit.js +++ b/packages/block-library/src/list-item/edit.js @@ -24,6 +24,7 @@ import { useMergeRefs } from '@wordpress/compose'; import { useEnter, useBackspace, + useSpace, useIndentListItem, useOutdentListItem, } from './hooks'; @@ -67,11 +68,16 @@ export default function ListItemEdit( { } ); const useEnterRef = useEnter( { content, clientId } ); const useBackspaceRef = useBackspace( { clientId } ); + const useSpaceRef = useSpace( clientId ); return ( <>
  • diff --git a/packages/block-library/src/list-item/hooks/index.js b/packages/block-library/src/list-item/hooks/index.js index 14faf1e5f3acb5..5fcd802926065f 100644 --- a/packages/block-library/src/list-item/hooks/index.js +++ b/packages/block-library/src/list-item/hooks/index.js @@ -2,3 +2,4 @@ export { default as useOutdentListItem } from './use-outdent-list-item'; export { default as useIndentListItem } from './use-indent-list-item'; export { default as useEnter } from './use-enter'; export { default as useBackspace } from './use-backspace'; +export { default as useSpace } from './use-space'; diff --git a/packages/block-library/src/list-item/hooks/use-space.js b/packages/block-library/src/list-item/hooks/use-space.js new file mode 100644 index 00000000000000..d3fb099edd2cdc --- /dev/null +++ b/packages/block-library/src/list-item/hooks/use-space.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { useRefEffect } from '@wordpress/compose'; +import { SPACE } from '@wordpress/keycodes'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import useIndentListItem from './use-indent-list-item'; + +export default function useSpace( clientId ) { + const { getSelectionStart, getSelectionEnd } = useSelect( + blockEditorStore + ); + const [ canIndent, indentListItem ] = useIndentListItem( clientId ); + + return useRefEffect( + ( element ) => { + function onKeyDown( event ) { + if ( + event.defaultPrevented || + event.keyCode !== SPACE || + ! canIndent + ) { + return; + } + const selectionStart = getSelectionStart(); + const selectionEnd = getSelectionEnd(); + if ( + selectionStart.offset === 0 && + selectionEnd.offset === 0 + ) { + event.preventDefault(); + indentListItem(); + } + } + + element.addEventListener( 'keydown', onKeyDown ); + return () => { + element.removeEventListener( 'keydown', onKeyDown ); + }; + }, + [ canIndent, indentListItem ] + ); +}