From 48d144da1c3b3e670bd0dbf685b1feb162cbe58b Mon Sep 17 00:00:00 2001 From: apeatling Date: Tue, 14 Apr 2020 15:09:08 -0700 Subject: [PATCH] Add support for controlling padding and spacing of all innerblock field blocks from the parent block. --- extensions/blocks/contact-form/attributes.js | 12 ++++- .../components/jetpack-field-checkbox.js | 33 ++++++++++-- .../components/jetpack-field-multiple.js | 37 +++++++++++-- .../components/jetpack-field-textarea.js | 32 +++++++++++- .../contact-form/components/jetpack-field.js | 52 +++++++++++++++---- extensions/blocks/contact-form/edit.js | 29 ++++++++++- extensions/blocks/contact-form/editor.scss | 1 + extensions/blocks/contact-form/index.js | 48 ++++++++++------- 8 files changed, 204 insertions(+), 40 deletions(-) diff --git a/extensions/blocks/contact-form/attributes.js b/extensions/blocks/contact-form/attributes.js index 29e1180ac3503..5b6afe23d68f8 100644 --- 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 index d10d7eb01c44c..6017830190e7f 100644 --- 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 ( +
- +
} /> ); }; -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 index d8e1eb5a4753d..aafde05b40eaa 100644 --- 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,7 +53,16 @@ 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 ) { @@ -60,6 +70,10 @@ class JetpackFieldMultiple extends Component { inFocus = 0; } + if ( parentBlock && parentBlock.attributes.spacing !== spacing ) { + setAttributes( { spacing: parentBlock.attributes.spacing } ); + } + return ( { options.map( ( option, index ) => ( { + 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 index c7c311bb045c6..85f1e553895ec 100644 --- 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 (
@@ -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', + } } />
@@ -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 index 6ddea3b7e16c2..475dc665e700e 100644 --- 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 (
@@ -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', + } } />
@@ -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 index 61dd1589024d2..1fa7b0c7ed8f9 100644 --- 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 { { this.renderFormSettings() } + + setAttributes( { padding: newPadding } ) } + /> + + setAttributes( { spacing: newSpacing } ) } + /> +
diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss index b3566b915f8d0..728ccbe82f267 100644 --- 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 diff --git a/extensions/blocks/contact-form/index.js b/extensions/blocks/contact-form/index.js index 134a18a8161ad..66d91260d5ca2 100644 --- a/extensions/blocks/contact-form/index.js +++ b/extensions/blocks/contact-form/index.js @@ -77,6 +77,14 @@ const FieldDefaults = { type: 'string', default: '', }, + padding: { + type: 'number', + default: defaultAttributes.padding.default, + }, + spacing: { + type: 'number', + default: defaultAttributes.spacing.default, + }, }, transforms: { to: [ @@ -122,14 +130,6 @@ const FieldDefaults = { isMatch: ( { options } ) => ! options.length, transform: attributes => createBlock( 'jetpack/field-textarea', attributes ), }, - /* // not yet ready for prime time. - { - type: 'block', - blocks: [ 'jetpack/field-checkbox' ], - isMatch: ( { options } ) => 1 === options.length, - transform: ( attributes )=>createBlock( 'jetpack/field-checkbox', attributes ) - }, - */ { type: 'block', blocks: [ 'jetpack/field-checkbox-multiple' ], @@ -157,18 +157,22 @@ const getFieldLabel = ( { attributes, name: blockName } ) => { return null === attributes.label ? getBlockType( blockName ).title : attributes.label; }; -const editField = type => props => ( - -); +const editField = type => props => { + return ( + + ); +}; const editMultiField = type => props => ( props => ( type={ type } isSelected={ props.isSelected } id={ props.attributes.id } + spacing={ props.attributes.spacing } /> ); @@ -289,6 +294,8 @@ export const childBlocks = [ defaultValue={ props.attributes.defaultValue } placeholder={ props.attributes.placeholder } id={ props.attributes.id } + padding={ props.attributes.padding } + spacing={ props.attributes.spacing } /> ), }, @@ -311,6 +318,7 @@ export const childBlocks = [ isSelected={ props.isSelected } defaultValue={ props.attributes.defaultValue } id={ props.attributes.id } + spacing={ props.attributes.spacing } /> ), attributes: {