Contact Form: add extra field settings to base field

projects/packages/forms/changelog/update-contact-form-extra-field-settings

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Contact Form: add extra field settings to base field

projects/packages/forms/composer.json

@@ -62,7 +62,7 @@
 			"link-template": "https://github.com/automattic/jetpack-forms/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.27.x-dev"
+			"dev-trunk": "0.28.x-dev"
 		},
 		"textdomain": "jetpack-forms",
 		"version-constants": {

projects/packages/forms/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.27.0",
+	"version": "0.28.0-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {

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

@@ -13,6 +13,7 @@ import {
 	ToggleControl,
 	RangeControl,
 } from '@wordpress/components';
+import { isValidElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useFormStyle, FORM_STYLE, getBlockStyle } from '../util/form';
 import ToolbarRequiredGroup from './block-controls/toolbar-required-group';
@@ -31,6 +32,7 @@ const JetpackFieldControls = ( {
 	setAttributes,
 	type,
 	width,
+	extraFieldSettings = [],
 } ) => {
 	const formStyle = useFormStyle( clientId );
 	const blockStyle = getBlockStyle( blockClassNames );
@@ -103,6 +105,50 @@ const JetpackFieldControls = ( {
 		setAttributes( { id: newValue } );
 	};
 
+	let fieldSettings = [
+		<ToggleControl
+			label={ __( 'Field is required', 'jetpack-forms' ) }
+			className="jetpack-field-label__required"
+			checked={ required }
+			onChange={ value => setAttributes( { required: value } ) }
+			help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
+		/>,
+		! hidePlaceholder && (
+			<TextControl
+				label={ __( 'Placeholder text', 'jetpack-forms' ) }
+				value={ placeholder || '' }
+				onChange={ value => setAttributes( { [ placeholderField ]: value } ) }
+				help={ __(
+					'Show visitors an example of the type of content expected. Otherwise, leave blank.',
+					'jetpack-forms'
+				) }
+			/>
+		),
+		<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />,
+		<ToggleControl
+			label={ __( 'Sync fields style', 'jetpack-forms' ) }
+			checked={ attributes.shareFieldAttributes }
+			onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
+			help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+		/>,
+	];
+
+	extraFieldSettings.forEach( ( { element, index } ) => {
+		if ( ! isValidElement( element ) ) {
+			return;
+		}
+
+		if ( index >= 0 && index < fieldSettings.length ) {
+			fieldSettings = [
+				...fieldSettings.slice( 0, index ),
+				element,
+				...fieldSettings.slice( index ),
+			];
+		} else {
+			fieldSettings.push( element );
+		}
+	} );
+
 	return (
 		<>
 			<BlockControls>
@@ -117,31 +163,9 @@ const JetpackFieldControls = ( {
 					<JetpackManageResponsesSettings isChildBlock />
 				</PanelBody>
 				<PanelBody title={ __( 'Field Settings', 'jetpack-forms' ) }>
-					<ToggleControl
-						label={ __( 'Field is required', 'jetpack-forms' ) }
-						className="jetpack-field-label__required"
-						checked={ required }
-						onChange={ value => setAttributes( { required: value } ) }
-						help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
-					/>
-					{ ! hidePlaceholder && (
-						<TextControl
-							label={ __( 'Placeholder text', 'jetpack-forms' ) }
-							value={ placeholder || '' }
-							onChange={ value => setAttributes( { [ placeholderField ]: value } ) }
-							help={ __(
-								'Show visitors an example of the type of content expected. Otherwise, leave blank.',
-								'jetpack-forms'
-							) }
-						/>
-					) }
-					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
-					<ToggleControl
-						label={ __( 'Sync fields style', 'jetpack-forms' ) }
-						checked={ attributes.shareFieldAttributes }
-						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
-						help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
-					/>
+					{ fieldSettings.filter( Boolean ).map( ( elt, index ) => (
+						<div key={ index }>{ elt }</div>
+					) ) }
 				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack-forms' ) }

projects/packages/forms/src/class-jetpack-forms.php

@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.27.0';
+	const PACKAGE_VERSION = '0.28.0-alpha';
 
 	/**
 	 * Load the contact form module.

projects/plugins/jetpack/changelog/update-contact-form-extra-field-settings

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+