Add: Space to indent list item

packages/block-library/src/list-item/edit.js

@@ -7,7 +7,7 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 } from '@wordpress/block-editor';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, _x } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import {
@@ -21,7 +21,12 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { useEnter, useIndentListItem, useOutdentListItem } from './hooks';
+import {
+	useEnter,
+	useSpace,
+	useIndentListItem,
+	useOutdentListItem,
+} from './hooks';
 
 function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
@@ -40,6 +45,7 @@ function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
+				shortcut={ _x( 'Space', 'keyboard key' ) }
 				isDisabled={ ! canIndent }
 				onClick={ indentListItem }
 			/>
@@ -61,11 +67,12 @@ export default function ListItemEdit( {
 		allowedBlocks: [ 'core/list' ],
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
+	const useSpaceRef = useSpace( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [ useEnterRef ] ) }
+					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>

packages/block-library/src/list-item/hooks/index.js

@@ -1,3 +1,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 useSpace } from './use-space';

packages/block-library/src/list-item/hooks/use-space.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+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 ) {
+					return;
+				}
+				if ( canIndent ) {
+					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 ]
+	);
+}