diff --git a/projects/packages/forms/changelog/update-contact-form-extra-field-settings b/projects/packages/forms/changelog/update-contact-form-extra-field-settings new file mode 100644 index 0000000000000..58d4f1a42f30a --- /dev/null +++ b/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 diff --git a/projects/packages/forms/composer.json b/projects/packages/forms/composer.json index a0b6f17d23937..5f3e71f727afc 100644 --- a/projects/packages/forms/composer.json +++ b/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": { diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json index d0e2b3923420b..0e98d8040e82a 100644 --- a/projects/packages/forms/package.json +++ b/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": { diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js index 4fe8431504e22..59482070b4351 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js +++ b/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 = [ + setAttributes( { required: value } ) } + help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) } + />, + ! hidePlaceholder && ( + setAttributes( { [ placeholderField ]: value } ) } + help={ __( + 'Show visitors an example of the type of content expected. Otherwise, leave blank.', + 'jetpack-forms' + ) } + /> + ), + , + 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 ( <> @@ -117,31 +163,9 @@ const JetpackFieldControls = ( { - setAttributes( { required: value } ) } - help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) } - /> - { ! hidePlaceholder && ( - setAttributes( { [ placeholderField ]: value } ) } - help={ __( - 'Show visitors an example of the type of content expected. Otherwise, leave blank.', - 'jetpack-forms' - ) } - /> - ) } - - setAttributes( { shareFieldAttributes: value } ) } - help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) } - /> + { fieldSettings.filter( Boolean ).map( ( elt, index ) => ( +
{ elt }
+ ) ) }