Fixes the form so that we ship less code but still end up with the sa…

…me result
Automattic · Jan 16, 2025 · e5778e4 · e5778e4
1 parent e4e7dcc
commit e5778e4
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 22 deletions.
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -74,7 +74,6 @@ function JetpackFieldCheckbox( props ) {
 					<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' ) }

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
@@ -109,7 +109,6 @@ const JetpackFieldControls = ( {
 		<ToggleControl
 			key="required"
 			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' ) }
@@ -120,7 +119,6 @@ const JetpackFieldControls = ( {
 				key="placeholderField"
 				label={ __( 'Placeholder text', 'jetpack-forms' ) }
 				value={ placeholder || '' }
-				className="jetpack-field-label__placeholder"
 				onChange={ value => setAttributes( { [ placeholderField ]: value } ) }
 				help={ __(
 					'Show visitors an example of the type of content expected. Otherwise, leave blank.',
@@ -170,9 +168,7 @@ const JetpackFieldControls = ( {
 					<JetpackManageResponsesSettings isChildBlock />
 				</PanelBody>
 				<PanelBody title={ __( 'Field Settings', 'jetpack-forms' ) }>
-					{ fieldSettings.filter( Boolean ).map( ( elt, index ) => (
-						<div key={ index }>{ elt }</div>
-					) ) }
+					<>{ fieldSettings }</>
 				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack-forms' ) }

diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -267,16 +267,6 @@
 	.components-base-control {
 		margin-top: -1px;
 		margin-bottom: -3px;
-
-		&.jetpack-field-label__required {
-			.components-form-toggle {
-				margin: 2px 8px 0 16px;
-			}
-
-			.components-toggle-control__label {
-				word-break: normal;
-			}
-		}
 	}
 
 	.rich-text.jetpack-field-label__input {
@@ -500,12 +490,6 @@
 	}
 }
 
-.jetpack-field-label__width,
-.jetpack-field-label__required,
-.jetpack-field-label__placeholder {
-	margin-bottom: 1em;
-}
-
 // Duplicated to elevate specificity in order to overwrite core styles
 .jetpack-field-multiple__list.jetpack-field-multiple__list {
 	list-style-type: none;