Add keyboard options to blocks

assets/src/stories-editor/components/higher-order/with-keyboard-navigation-handler.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { withDispatch } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { UP, DOWN, RIGHT, LEFT, DELETE } from '@wordpress/keycodes';
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_CHILD_BLOCKS, ALLOWED_MOVABLE_BLOCKS } from '../../constants';
+
+const applyWithDispatch = withDispatch( ( dispatch, props, { select } ) => {
+	const {	isReordering } = select( 'amp/story' );
+	const { getSelectedBlock } = select( 'core/block-editor' );
+	const { updateBlockAttributes, removeBlock } = dispatch( 'core/block-editor' );
+
+	const onKeyPress = ( event ) => {
+		const { keyCode, target } = event;
+		const { classList } = target;
+		const selectedBlock = getSelectedBlock();
+
+		if ( ! selectedBlock ) {
+			return;
+		}
+
+		if ( classList.contains( 'editor-rich-text__editable' ) && classList.contains( 'is-selected' ) ) {
+			return;
+		}
+
+		let top = 0;
+		let left = 0;
+		switch ( keyCode ) {
+			case UP:
+				top = -1;
+				break;
+			case DOWN:
+				top = 1;
+				break;
+			case RIGHT:
+				left = 1;
+				break;
+			case LEFT:
+				left = -1;
+				break;
+			case DELETE:
+				removeBlock( selectedBlock.clientId );
+				return;
+			default:
+				return;
+		}
+		event.preventDefault();
+		if ( ALLOWED_MOVABLE_BLOCKS.includes( selectedBlock.name ) ) {
+			const newPositionTop = selectedBlock.attributes.positionTop + top;
+			const newPositionLeft = selectedBlock.attributes.positionLeft + left;
+			updateBlockAttributes( selectedBlock.clientId, {
+				positionTop: newPositionTop,
+				positionLeft: newPositionLeft,
+			} );
+		}
+	};
+
+	return {
+		isReordering,
+		onKeyPress,
+	};
+} );
+
+/**
+ * Higher-order component that adds right click handler to each inner block.
+ *
+ * @return {Function} Higher-order component.
+ */
+export default createHigherOrderComponent(
+	( BlockEdit ) => {
+		return applyWithDispatch( ( props ) => {
+			const { name, onKeyPress, isReordering } = props;
+			const isPageBlock = 'amp/amp-story-page' === name;
+			// Add for page block and inner blocks.
+			if ( ! isPageBlock && ! ALLOWED_CHILD_BLOCKS.includes( name ) ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			// Not relevant for reordering.
+			if ( isReordering() ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			return (
+				<div onKeyDown={ onKeyPress }>
+					<BlockEdit { ...props } />
+				</div>
+			);
+		} );
+	},
+	'withKeyboardNavigationHandler'
+);

assets/src/stories-editor/components/index.js

@@ -30,6 +30,7 @@ export { default as withCroppedFeaturedImage } from './with-cropped-featured-ima
 export { default as withHasSelectedInnerBlock } from './higher-order/with-has-selected-inner-block';
 export { default as withPageNumber } from './higher-order/with-page-number';
 export { default as withRightClickHandler } from './higher-order/with-right-click-handler';
+export { default as withKeyboardNavigation } from './higher-order/with-keyboard-navigation-handler';
 export { default as withStoryFeaturedImageNotice } from './higher-order/with-story-featured-image-notice';
 export { default as withEditFeaturedImage } from './with-edit-featured-image';
 export { default as withCustomVideoBlockEdit } from './with-custom-video-block-edit';

assets/src/stories-editor/index.js

@@ -39,6 +39,7 @@ import {
 	withCallToActionValidation,
 	withCroppedFeaturedImage,
 	withRightClickHandler,
+	withKeyboardNavigation,
 } from './components';
 import {
 	maybeEnqueueFontStyle,
@@ -317,6 +318,7 @@ addFilter( 'blocks.registerBlockType', 'ampStoryEditorBlocks/deprecateCoreBlocks
 addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/addStorySettings', withAmpStorySettings );
 addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/addPageNumber', withPageNumber );
 addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/rightClickHandler', withRightClickHandler );
+addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/keyboardHandler', withKeyboardNavigation );
 addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/addEditFeaturedImage', withEditFeaturedImage );
 addFilter( 'editor.BlockEdit', 'ampEditorBlocks/addVideoBlockPreview', withCustomVideoBlockEdit, 9 );
 addFilter( 'editor.PostFeaturedImage', 'ampStoryEditorBlocks/addFeaturedImageNotice', withStoryFeaturedImageNotice );