Forms: Create new default block when pressing Enter on text inputs (#41177)

Author: ntsekouras

projects/packages/forms/changelog/forms-add-default-block-on-input-enter

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: Create new default block when pressing Enter on text inputs

projects/packages/forms/src/blocks/contact-form/child-blocks.js

@@ -274,6 +274,7 @@ const editField = type => props => {
 			id={ props.attributes.id }
 			width={ props.attributes.width }
 			attributes={ props.attributes }
+			insertBlocksAfter={ props.insertBlocksAfter }
 		/>
 	);
 };

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js

@@ -1,4 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { SelectControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -34,7 +35,7 @@ const DATE_FORMATS = [
 ];
 
 const JetpackDatePicker = props => {
-	const { attributes, clientId, isSelected, name, setAttributes } = props;
+	const { attributes, clientId, isSelected, name, setAttributes, insertBlocksAfter } = props;
 	const { id, label, required, requiredText, width, placeholder, dateFormat } = attributes;
 
 	useFormWrapper( { attributes, clientId, name } );
@@ -67,6 +68,12 @@ const JetpackDatePicker = props => {
 					style={ fieldStyle }
 					type="text"
 					value={ placeholder }
+					onKeyDown={ event => {
+						if ( event.defaultPrevented || event.key !== 'Enter' ) {
+							return;
+						}
+						insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+					} }
 				/>
 			</div>
 

projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js

@@ -1,4 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import clsx from 'clsx';
@@ -21,6 +22,7 @@ const JetpackField = props => {
 		setAttributes,
 		placeholder,
 		width,
+		insertBlocksAfter,
 	} = props;
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
@@ -50,6 +52,12 @@ const JetpackField = props => {
 					style={ fieldStyle }
 					type="text"
 					value={ placeholder }
+					onKeyDown={ event => {
+						if ( event.defaultPrevented || event.key !== 'Enter' ) {
+							return;
+						}
+						insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+					} }
 				/>
 			</div>