Add support for controlling padding and spacing of all innerblock fie…

…ld blocks from the parent block.
Automattic · Apr 14, 2020 · 48d144d · 48d144d
1 parent 2cae3c8
commit 48d144d
Show file tree

Hide file tree

Showing 8 changed files with 204 additions and 40 deletions.
diff --git a/extensions/blocks/contact-form/attributes.js b/extensions/blocks/contact-form/attributes.js
@@ -34,7 +34,9 @@ export const defaultAttributes = {
 		type: 'string',
 		validator: colorValidator,
 	},
-	submitButtonClasses: { type: 'string' },
+	submitButtonClasses: {
+		type: 'string',
+	},
 	hasFormSettingsSet: {
 		type: 'string',
 		default: null,
@@ -51,6 +53,14 @@ export const defaultAttributes = {
 		type: 'string',
 		default: '',
 	},
+	padding: {
+		type: 'number',
+		default: 12,
+	},
+	spacing: {
+		type: 'number',
+		default: 10,
+	},
 
 	// Deprecated
 	has_form_settings_set: {

diff --git a/extensions/blocks/contact-form/components/jetpack-field-checkbox.js b/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -5,7 +5,8 @@ import { __ } from '@wordpress/i18n';
 import { BaseControl, PanelBody, ToggleControl } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,13 +20,23 @@ const JetpackFieldCheckbox = ( {
 	setAttributes,
 	isSelected,
 	defaultValue,
+	parentBlock,
+	spacing,
 } ) => {
+	if ( parentBlock && parentBlock.attributes.spacing !== spacing ) {
+		setAttributes( { spacing: parentBlock.attributes.spacing } );
+	}
+
 	return (
 		<BaseControl
 			id={ `jetpack-field-checkbox-${ instanceId }` }
 			className="jetpack-field jetpack-field-checkbox"
 			label={
-				<Fragment>
+				<div
+					style={ {
+						marginBottom: spacing + 'px',
+					} }
+				>
 					<input
 						className="jetpack-field-checkbox__checkbox"
 						type="checkbox"
@@ -47,10 +58,24 @@ const JetpackFieldCheckbox = ( {
 							/>
 						</PanelBody>
 					</InspectorControls>
-				</Fragment>
+				</div>
 			}
 		/>
 	);
 };
 
-export default withInstanceId( JetpackFieldCheckbox );
+export default compose( [
+	withSelect( select => {
+		const { getBlock, getSelectedBlockClientId, getBlockHierarchyRootClientId } = select(
+			'core/block-editor'
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentBlock: selectedBlockClientId
+				? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+				: null,
+		};
+	} ),
+	withInstanceId,
+] )( JetpackFieldCheckbox );
diff --git a/extensions/blocks/contact-form/components/jetpack-field-multiple.js b/extensions/blocks/contact-form/components/jetpack-field-multiple.js
@@ -4,7 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { BaseControl, IconButton } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { compose, withInstanceId } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -52,14 +53,27 @@ class JetpackFieldMultiple extends Component {
 	}
 
 	render() {
-		const { type, instanceId, required, label, setAttributes, isSelected } = this.props;
+		const {
+			type,
+			instanceId,
+			required,
+			label,
+			spacing,
+			setAttributes,
+			isSelected,
+			parentBlock,
+		} = this.props;
 		let { options } = this.props;
 		let { inFocus } = this.state;
 		if ( ! options.length ) {
 			options = [ '' ];
 			inFocus = 0;
 		}
 
+		if ( parentBlock && parentBlock.attributes.spacing !== spacing ) {
+			setAttributes( { spacing: parentBlock.attributes.spacing } );
+		}
+
 		return (
 			<Fragment>
 				<BaseControl
@@ -78,6 +92,9 @@ class JetpackFieldMultiple extends Component {
 					<ol
 						className="jetpack-field-multiple__list"
 						id={ `jetpack-field-multiple-${ instanceId }` }
+						style={ {
+							marginBottom: spacing + 'px',
+						} }
 					>
 						{ options.map( ( option, index ) => (
 							<JetpackOption
@@ -108,4 +125,18 @@ class JetpackFieldMultiple extends Component {
 	}
 }
 
-export default withInstanceId( JetpackFieldMultiple );
+export default compose( [
+	withSelect( select => {
+		const { getBlock, getSelectedBlockClientId, getBlockHierarchyRootClientId } = select(
+			'core/block-editor'
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentBlock: selectedBlockClientId
+				? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+				: null,
+		};
+	} ),
+	withInstanceId,
+] )( JetpackFieldMultiple );
diff --git a/extensions/blocks/contact-form/components/jetpack-field-textarea.js b/extensions/blocks/contact-form/components/jetpack-field-textarea.js
@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, TextareaControl, TextControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,11 +16,22 @@ import JetpackFieldLabel from './jetpack-field-label';
 function JetpackFieldTextarea( {
 	required,
 	label,
+	parentBlock,
 	setAttributes,
 	isSelected,
 	defaultValue,
 	placeholder,
+	padding,
+	spacing,
 } ) {
+	if ( parentBlock && parentBlock.attributes.padding !== padding ) {
+		setAttributes( { padding: parentBlock.attributes.padding } );
+	}
+
+	if ( parentBlock && parentBlock.attributes.spacing !== spacing ) {
+		setAttributes( { spacing: parentBlock.attributes.spacing } );
+	}
+
 	return (
 		<Fragment>
 			<div className="jetpack-field">
@@ -35,6 +48,10 @@ function JetpackFieldTextarea( {
 					value={ placeholder }
 					onChange={ value => setAttributes( { placeholder: value } ) }
 					title={ __( 'Set the placeholder text', 'jetpack' ) }
+					style={ {
+						padding: padding + 'px',
+						marginBottom: spacing + 'px',
+					} }
 				/>
 			</div>
 			<InspectorControls>
@@ -61,4 +78,17 @@ function JetpackFieldTextarea( {
 	);
 }
 
-export default JetpackFieldTextarea;
+export default compose( [
+	withSelect( select => {
+		const { getBlock, getSelectedBlockClientId, getBlockHierarchyRootClientId } = select(
+			'core/block-editor'
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentBlock: selectedBlockClientId
+				? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+				: null,
+		};
+	} ),
+] )( JetpackFieldTextarea );
diff --git a/extensions/blocks/contact-form/components/jetpack-field.js b/extensions/blocks/contact-form/components/jetpack-field.js
@@ -6,21 +6,36 @@ import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import JetpackFieldLabel from './jetpack-field-label';
 
-function JetpackField( {
-	isSelected,
-	type,
-	required,
-	label,
-	setAttributes,
-	defaultValue,
-	placeholder,
-} ) {
+function JetpackField( props ) {
+	const {
+		isSelected,
+		type,
+		required,
+		label,
+		parentBlock,
+		setAttributes,
+		defaultValue,
+		placeholder,
+		padding,
+		spacing,
+	} = props;
+
+	if ( parentBlock && parentBlock.attributes.padding !== padding ) {
+		setAttributes( { padding: parentBlock.attributes.padding } );
+	}
+
+	if ( parentBlock && parentBlock.attributes.spacing !== spacing ) {
+		setAttributes( { spacing: parentBlock.attributes.spacing } );
+	}
+
 	return (
 		<Fragment>
 			<div className={ classNames( 'jetpack-field', { 'is-selected': isSelected } ) }>
@@ -38,6 +53,10 @@ function JetpackField( {
 					value={ placeholder }
 					onChange={ value => setAttributes( { placeholder: value } ) }
 					title={ __( 'Set the placeholder text', 'jetpack' ) }
+					style={ {
+						padding: padding + 'px',
+						marginBottom: spacing + 'px',
+					} }
 				/>
 			</div>
 			<InspectorControls>
@@ -64,4 +83,17 @@ function JetpackField( {
 	);
 }
 
-export default JetpackField;
+export default compose( [
+	withSelect( select => {
+		const { getBlock, getSelectedBlockClientId, getBlockHierarchyRootClientId } = select(
+			'core/block-editor'
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentBlock: selectedBlockClientId
+				? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+				: null,
+		};
+	} ),
+] )( JetpackField );
diff --git a/extensions/blocks/contact-form/edit.js b/extensions/blocks/contact-form/edit.js
@@ -15,6 +15,7 @@ import {
 	Button,
 	Dropdown,
 	Icon,
+	RangeControl,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { compose, withInstanceId } from '@wordpress/compose';
@@ -58,6 +59,11 @@ const ALLOWED_BLOCKS = [
 	'core/video',
 ];
 
+const MIN_PADDING_VALUE = 5;
+const MAX_PADDING_VALUE = 50;
+const MIN_SPACING_VALUE = 5;
+const MAX_SPACING_VALUE = 50;
+
 class JetpackContactFormEdit extends Component {
 	constructor( ...args ) {
 		super( ...args );
@@ -263,7 +269,7 @@ class JetpackContactFormEdit extends Component {
 			selectBlock,
 		} = this.props;
 
-		const { hasFormSettingsSet } = attributes;
+		const { hasFormSettingsSet, padding, spacing } = attributes;
 		const formClassnames = classnames( className, 'jetpack-contact-form', {
 			'has-intro': ! hasFormSettingsSet,
 		} );
@@ -337,6 +343,27 @@ class JetpackContactFormEdit extends Component {
 					<PanelBody title={ __( 'Form Settings', 'jetpack' ) }>
 						{ this.renderFormSettings() }
 					</PanelBody>
+					<PanelBody title={ __( 'Spacing Settings', 'jetpack' ) }>
+						<RangeControl
+							value={ padding }
+							label={ __( 'Space Inside Fields', 'jetpack' ) }
+							min={ MIN_PADDING_VALUE }
+							max={ MAX_PADDING_VALUE }
+							initialPosition={ padding }
+							allowReset
+							onChange={ newPadding => setAttributes( { padding: newPadding } ) }
+						/>
+
+						<RangeControl
+							value={ spacing }
+							label={ __( 'Space Between Fields', 'jetpack' ) }
+							min={ MIN_SPACING_VALUE }
+							max={ MAX_SPACING_VALUE }
+							initialPosition={ padding }
+							allowReset
+							onChange={ newSpacing => setAttributes( { spacing: newSpacing } ) }
+						/>
+					</PanelBody>
 				</InspectorControls>
 
 				<div className={ formClassnames }>

diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss
@@ -136,6 +136,7 @@ input.components-text-control__input {
 
 .jetpack-field-checkbox__checkbox.jetpack-field-checkbox__checkbox.jetpack-field-checkbox__checkbox {
 	float: left;
+	margin: 3px 5px 0 0
 }
 
 // Duplicated to elevate specificity in order to overwrite core styles