Add textarea block

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

@@ -28,6 +28,7 @@ import JetpackStepContainer from '../form-step-container/index.js';
 import JetpackStepDivider from '../form-step-divider/index.js';
 import JetpackStepNavigation from '../form-step-navigation/index.js';
 import JetpackInput from '../input/index.js';
+import JetpackTextarea from '../textarea/index.js';
 import JetpackImageOptionInput from '../input-image-option/index.tsx';
 import JetpackPhoneInput from '../input-phone/index.js';
 import JetpackSliderInput from '../input-range/index.js';
@@ -40,6 +41,7 @@ export const childBlocks = [
 	JetpackLabel,
 	JetpackDropzone,
 	JetpackInput,
+	JetpackTextarea,
 	JetpackOption,
 	JetpackOptions,
 	JetpackCheckboxField,

projects/packages/forms/src/blocks/field-textarea/edit.js

@@ -27,7 +27,7 @@ export default function TextareaFieldEdit( props ) {
 	const template = useMemo( () => {
 		return [
 			[ 'jetpack/label', { label: __( 'Message', 'jetpack-forms' ), requiredIndicator } ],
-			[ 'jetpack/input', { type: 'textarea' } ],
+			[ 'jetpack/textarea' ],
 		];
 	}, [ requiredIndicator ] );
 

projects/packages/forms/src/blocks/field-textarea/index.js

@@ -33,10 +33,7 @@ const settings = {
 				},
 			},
 			{
-				name: 'jetpack/input',
-				attributes: {
-					type: 'textarea',
-				},
+				name: 'jetpack/textarea',
 			},
 		],
 	},

projects/packages/forms/src/blocks/textarea/edit.js

@@ -0,0 +1,47 @@
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { useCallback } from '@wordpress/element';
+import { clsx } from 'clsx';
+import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes.js';
+import useVariationStyleProperties from '../shared/hooks/use-variation-style-properties.js';
+
+const SYNCED_ATTRIBUTE_KEYS = [
+	'backgroundColor',
+	'borderColor',
+	'fontFamily',
+	'fontSize',
+	'style',
+	'textColor',
+];
+
+const TextareaEdit = ( { attributes, clientId, isSelected, name, setAttributes, context } ) => {
+	const { 'jetpack/field-share-attributes': isSynced } = context;
+	useSyncedAttributes( name, isSynced, SYNCED_ATTRIBUTE_KEYS, attributes, setAttributes );
+	const { placeholder } = attributes;
+	const variationProps = useVariationStyleProperties( {
+		clientId,
+		inputBlockName: name,
+		inputBlockAttributes: attributes,
+	} );
+	const blockProps = useBlockProps( {
+		className: 'jetpack-field__textarea',
+		style: variationProps?.cssVars,
+	} );
+
+	const onChange = useCallback(
+		event => {
+			setAttributes( { placeholder: event.target.value } );
+		},
+		[ setAttributes ]
+	);
+
+	return (
+		<textarea
+			{ ...blockProps }
+			onChange={ onChange }
+			value={ isSelected ? placeholder : '' }
+			placeholder={ placeholder }
+		/>
+	);
+};
+
+export default TextareaEdit;

projects/packages/forms/src/blocks/textarea/index.js

@@ -0,0 +1,70 @@
+import { Path } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import renderMaterialIcon from '../shared/components/render-material-icon.js';
+import edit from './edit.js';
+import save from './save.js';
+
+const name = 'textarea';
+const settings = {
+	apiVersion: 3,
+	title: __( 'Textarea', 'jetpack-forms' ),
+	description: __( 'A textarea for a form field', 'jetpack-forms' ),
+	category: 'contact-form',
+	icon: {
+		src: renderMaterialIcon(
+			<Path d="M20 5H4V6.5H20V5ZM5.5 11.5H18.5V18.5H5.5V11.5ZM20 20V10H4V20H20Z" />
+		),
+	},
+	parent: [ 'jetpack/field-textarea' ],
+	usesContext: [ 'jetpack/field-share-attributes' ],
+	supports: {
+		reusable: false,
+		html: false,
+		color: {
+			text: true,
+			background: true,
+			gradients: false,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+	},
+	attributes: {
+		placeholder: {
+			type: 'string',
+			default: '',
+		},
+	},
+	edit,
+	save,
+};
+
+export default {
+	name,
+	settings,
+};

projects/packages/forms/src/blocks/textarea/save.js

@@ -0,0 +1 @@
+export default () => null;