Merge pull request #3993 from WordPress/fix/allow-pressing-enter-to-c…

…hange-reusable-block-name

Allow pressing ENTER to change Reusable Block name

blocks/library/block/edit-panel/index.js

@@ -3,65 +3,78 @@
  */
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { keycodes } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+const { ESCAPE } = keycodes;
+
 function ReusableBlockEditPanel( props ) {
 	const { isEditing, title, isSaving, onEdit, onDetach, onChangeTitle, onSave, onCancel } = props;
 
-	return (
-		<div className="reusable-block-edit-panel">
-			{ ! isEditing && ! isSaving && [
-				<span key="info" className="reusable-block-edit-panel__info">
+	return [
+		( ! isEditing && ! isSaving ) && (
+			<div key="view" className="reusable-block-edit-panel">
+				<span className="reusable-block-edit-panel__info">
 					<b>{ title }</b>
-				</span>,
+				</span>
 				<Button
-					key="edit"
 					isLarge
 					className="reusable-block-edit-panel__button"
 					onClick={ onEdit }>
 					{ __( 'Edit' ) }
-				</Button>,
+				</Button>
 				<Button
-					key="detach"
 					isLarge
 					className="reusable-block-edit-panel__button"
 					onClick={ onDetach }>
 					{ __( 'Detach' ) }
-				</Button>,
-			] }
-			{ ( isEditing || isSaving ) && [
+				</Button>
+			</div>
+		),
+		( isEditing || isSaving ) && (
+			<form
+				key="edit"
+				className="reusable-block-edit-panel"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onSave();
+				} }>
 				<input
-					key="title"
 					type="text"
 					disabled={ isSaving }
 					className="reusable-block-edit-panel__title"
 					value={ title }
-					onChange={ ( event ) => onChangeTitle( event.target.value ) } />,
+					onChange={ ( event ) => onChangeTitle( event.target.value ) }
+					onKeyDown={ ( event ) => {
+						if ( event.keyCode === ESCAPE ) {
+							event.stopPropagation();
+							onCancel();
+						}
+					} } />
 				<Button
-					key="save"
+					type="submit"
 					isPrimary
 					isLarge
 					isBusy={ isSaving }
 					disabled={ ! title || isSaving }
 					className="reusable-block-edit-panel__button"
 					onClick={ onSave }>
 					{ __( 'Save' ) }
-				</Button>,
+				</Button>
 				<Button
-					key="cancel"
 					isLarge
 					disabled={ isSaving }
 					className="reusable-block-edit-panel__button"
 					onClick={ onCancel }>
 					{ __( 'Cancel' ) }
-				</Button>,
-			] }
-		</div>
-	);
+				</Button>
+			</form>
+		),
+	];
 }
 
 export default ReusableBlockEditPanel;