Form Block: Add styling for input fields

projects/plugins/jetpack/changelog/add-styling_for_input_fields

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Form Block: add styling of input fields

projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js

@@ -50,6 +50,38 @@ const FieldDefaults = {
 			type: 'number',
 			default: 100,
 		},
+		borderRadius: {
+			type: 'number',
+			default: '',
+		},
+		borderWidth: {
+			type: 'number',
+			default: '',
+		},
+		labelFontSize: {
+			type: 'string',
+		},
+		fieldFontSize: {
+			type: 'string',
+		},
+		lineHeight: {
+			type: 'number',
+		},
+		labelLineHeight: {
+			type: 'number',
+		},
+		inputColor: {
+			type: 'string',
+		},
+		labelColor: {
+			type: 'string',
+		},
+		fieldBackgroundColor: {
+			type: 'string',
+		},
+		borderColor: {
+			type: 'string',
+		},
 	},
 	transforms: {
 		to: [
@@ -134,6 +166,7 @@ const editField = type => props => {
 
 	return (
 		<JetpackField
+			clientId={ props.clientId }
 			type={ type }
 			label={ getFieldLabel( props ) }
 			required={ props.attributes.required }
@@ -144,6 +177,7 @@ const editField = type => props => {
 			placeholder={ props.attributes.placeholder }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -153,6 +187,7 @@ const editMultiField = type => props => {
 
 	return (
 		<JetpackFieldMultiple
+			clientId={ props.clientId }
 			label={ getFieldLabel( props ) }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
@@ -162,6 +197,7 @@ const editMultiField = type => props => {
 			isSelected={ props.isSelected }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -174,6 +210,7 @@ const EditTextarea = props => {
 			label={ props.attributes.label }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
+			attributes={ props.attributes }
 			setAttributes={ props.setAttributes }
 			isSelected={ props.isSelected }
 			defaultValue={ props.attributes.defaultValue }
@@ -197,6 +234,7 @@ const EditCheckbox = props => {
 			defaultValue={ props.attributes.defaultValue }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -214,6 +252,7 @@ const EditConsent = ( { attributes, clientId, isSelected, name, setAttributes }
 			implicitConsentMessage={ implicitConsentMessage }
 			explicitConsentMessage={ explicitConsentMessage }
 			setAttributes={ setAttributes }
+			attributes={ attributes }
 		/>
 	);
 };

projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js

@@ -1,9 +1,17 @@
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	FontSizePicker,
+	InspectorAdvancedControls,
+	InspectorControls,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import JetpackFieldControls from './jetpack-field-controls';
+import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
+import JetpackFieldWidth from './jetpack-field-width';
+import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
+import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 function JetpackFieldCheckbox( props ) {
 	const {
@@ -15,12 +23,16 @@ function JetpackFieldCheckbox( props ) {
 		setAttributes,
 		width,
 		defaultValue,
+		attributes,
 	} = props;
 
+	const { blockStyle } = useJetpackFieldStyles( attributes );
+
 	return (
 		<div
 			id={ `jetpack-field-checkbox-${ instanceId }` }
 			className="jetpack-field jetpack-field-checkbox"
+			style={ blockStyle }
 		>
 			<input
 				className="jetpack-field-checkbox__checkbox"
@@ -33,12 +45,7 @@ function JetpackFieldCheckbox( props ) {
 				requiredText={ requiredText }
 				label={ label }
 				setAttributes={ setAttributes }
-			/>
-			<JetpackFieldControls
-				id={ id }
-				required={ required }
-				width={ width }
-				setAttributes={ setAttributes }
+				attributes={ attributes }
 			/>
 			<InspectorControls>
 				<PanelBody title={ __( 'Checkbox Settings', 'jetpack' ) }>
@@ -49,6 +56,50 @@ function JetpackFieldCheckbox( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Manage Responses', 'jetpack' ) }>
+					<JetpackManageResponsesSettings isChildBlock />
+				</PanelBody>
+				<PanelBody title={ __( 'Field Settings', 'jetpack' ) }>
+					<ToggleControl
+						label={ __( 'Field is required', 'jetpack' ) }
+						className="jetpack-field-label__required"
+						checked={ required }
+						onChange={ value => setAttributes( { required: value } ) }
+						help={ __( 'You can edit the "required" label in the editor', 'jetpack' ) }
+					/>
+					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+				</PanelBody>
+
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: attributes.labelColor,
+							onChange: value => setAttributes( { labelColor: value } ),
+							label: __( 'Label Text', 'jetpack' ),
+						},
+					] }
+				></PanelColorSettings>
+				<PanelBody
+					title={ __( 'Label Styles', 'jetpack' ) }
+					initialOpen={ attributes.labelFontSize }
+				>
+					<FontSizePicker
+						withSlider
+						withReset={ true }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+						onChange={ labelFontSize => setAttributes( { labelFontSize } ) }
+						value={ attributes.labelFontSize }
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			<InspectorAdvancedControls>
+				<JetpackFieldCss setAttributes={ setAttributes } id={ id } />
+			</InspectorAdvancedControls>
 		</div>
 	);
 }

projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js

@@ -15,6 +15,7 @@ const JetpackFieldConsent = ( {
 	implicitConsentMessage,
 	explicitConsentMessage,
 	setAttributes,
+	attributes,
 } ) => {
 	return (
 		<div
@@ -32,6 +33,7 @@ const JetpackFieldConsent = ( {
 						explicit: explicitConsentMessage,
 					}[ consentType ] ?? ''
 				}
+				attributes={ attributes }
 				setAttributes={ setAttributes }
 				labelFieldName={ `${ consentType }ConsentMessage` }
 				placeholder={ sprintf(

projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js

@@ -1,15 +1,20 @@
 import {
+	FontSizePicker,
 	InspectorAdvancedControls,
 	InspectorControls,
+	LineHeightControl,
 	BlockControls,
+	PanelColorSettings,
 } from '@wordpress/block-editor';
 import {
+	BaseControl,
 	PanelBody,
 	TextControl,
 	ToggleControl,
 	ToolbarGroup,
 	ToolbarButton,
 	Path,
+	RangeControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import renderMaterialIcon from '../../../shared/render-material-icon';
@@ -18,13 +23,48 @@ import JetpackFieldWidth from './jetpack-field-width';
 import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
 
 const JetpackFieldControls = ( {
-	setAttributes,
-	width,
+	attributes,
 	id,
-	required,
 	placeholder,
 	placeholderField = 'placeholder',
+	required,
+	setAttributes,
+	width,
+	type,
 } ) => {
+	const setNumberAttribute = ( key, parse = parseInt ) => value => {
+		const parsedValue = parse( value, 10 );
+
+		setAttributes( {
+			[ key ]: ! isNaN( parsedValue ) ? parsedValue : '',
+		} );
+	};
+
+	const hasBorderControls = type !== 'radio' && type !== 'checkbox';
+
+	const colorSettings = [
+		{
+			value: attributes.labelColor,
+			onChange: value => setAttributes( { labelColor: value } ),
+			label: __( 'Label Text', 'jetpack' ),
+		},
+		{
+			value: attributes.inputColor,
+			onChange: value => setAttributes( { inputColor: value } ),
+			label: __( 'Field Text', 'jetpack' ),
+		},
+		{
+			value: attributes.fieldBackgroundColor,
+			onChange: value => setAttributes( { fieldBackgroundColor: value } ),
+			label: __( 'Field Background', 'jetpack' ),
+		},
+		{
+			value: attributes.borderColor,
+			onChange: value => setAttributes( { borderColor: value } ),
+			label: __( 'Border', 'jetpack' ),
+		},
+	];
+
 	return (
 		<>
 			<BlockControls>
@@ -67,8 +107,72 @@ const JetpackFieldControls = ( {
 							'jetpack'
 						) }
 					/>
-
+				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ ! hasBorderControls ? colorSettings.slice( 0, 2 ) : colorSettings }
+				/>
+				<PanelBody title={ __( 'Input Field Styles', 'jetpack' ) } initialOpen={ false }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+					<BaseControl>
+						<FontSizePicker
+							withReset={ true }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+							onChange={ fieldFontSize => setAttributes( { fieldFontSize } ) }
+							value={ attributes.fieldFontSize }
+						/>
+					</BaseControl>
+					<BaseControl>
+						<LineHeightControl
+							__nextHasNoMarginBottom={ true }
+							__unstableInputWidth="100%"
+							value={ attributes.lineHeight }
+							onChange={ setNumberAttribute( 'lineHeight', parseFloat ) }
+							size="__unstable-large"
+						/>
+					</BaseControl>
+					{ hasBorderControls && (
+						<>
+							<RangeControl
+								label={ __( 'Border Width', 'jetpack' ) }
+								value={ attributes.borderWidth }
+								initialPosition={ 1 }
+								onChange={ setNumberAttribute( 'borderWidth' ) }
+								min={ 0 }
+								max={ 100 }
+							/>
+							<RangeControl
+								label={ __( 'Border Radius', 'jetpack' ) }
+								value={ attributes.borderRadius }
+								initialPosition={ 0 }
+								onChange={ setNumberAttribute( 'borderRadius' ) }
+								min={ 0 }
+								max={ 100 }
+							/>
+						</>
+					) }
+				</PanelBody>
+				<PanelBody title={ __( 'Label Styles', 'jetpack' ) } initialOpen={ false }>
+					<BaseControl>
+						<FontSizePicker
+							withReset={ true }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+							onChange={ labelFontSize => setAttributes( { labelFontSize } ) }
+							value={ attributes.labelFontSize }
+						/>
+					</BaseControl>
+					<BaseControl>
+						<LineHeightControl
+							__unstableInputWidth="100%"
+							__nextHasNoMarginBottom={ true }
+							value={ attributes.labelLineHeight }
+							onChange={ setNumberAttribute( 'labelLineHeight', parseFloat ) }
+							size="__unstable-large"
+						/>
+					</BaseControl>
 				</PanelBody>
 			</InspectorControls>