From 251c9ffd3860c7820b1fac5d0e593bb059485a00 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Mon, 2 Mar 2020 17:06:41 +0100 Subject: [PATCH] Add default inputs style settings [MAILPOET-2599] --- .../blocks/custom_text/custom_text.jsx | 5 ++ .../form_editor/blocks/custom_text/edit.jsx | 8 ++- .../custom_textarea/custom_textarea.jsx | 5 ++ .../blocks/custom_textarea/edit.jsx | 8 ++- .../js/src/form_editor/blocks/email/edit.jsx | 8 ++- .../js/src/form_editor/blocks/email/email.jsx | 5 ++ .../form_editor/blocks/first_name/edit.jsx | 8 ++- .../blocks/first_name/first_name.jsx | 5 ++ .../blocks/input_styles_settings.jsx | 63 ++++++++++++++++--- .../src/form_editor/blocks/last_name/edit.jsx | 8 ++- .../blocks/last_name/last_name.jsx | 5 ++ .../form_editor/store/form_body_to_blocks.jsx | 17 +++++ .../store/form_body_to_blocks.spec.js | 46 ++++++++++++++ .../store/form_to_block_test_data.js | 14 +++++ views/form/editor.html | 3 + 15 files changed, 189 insertions(+), 19 deletions(-) diff --git a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx index e81f2da386..bd7dbc81e7 100644 --- a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx +++ b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx @@ -1,5 +1,6 @@ import Icon from './icon.jsx'; import Edit from './edit.jsx'; +import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx'; export const name = 'mailpoet-form/custom-text'; @@ -30,6 +31,10 @@ export function getSettings(customField) { type: 'string', default: customField.id, }, + styles: { + type: 'object', + default: defaultBlockStyles, + }, }, supports: { html: false, diff --git a/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/assets/js/src/form_editor/blocks/custom_text/edit.jsx index aee698f661..fcba96a304 100644 --- a/assets/js/src/form_editor/blocks/custom_text/edit.jsx +++ b/assets/js/src/form_editor/blocks/custom_text/edit.jsx @@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx'; import CustomFieldSettings from './custom_field_settings.jsx'; import formatLabel from '../label_formatter.jsx'; import mapCustomFieldFormData from '../map_custom_field_form_data.jsx'; -import InputStylesSettings from '../input_styles_settings.jsx'; +import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; const CustomTextEdit = ({ attributes, setAttributes, clientId }) => { const isSaving = useSelect( @@ -78,7 +78,10 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => { /> - + (setAttributes({ styles }))} + /> ); @@ -113,6 +116,7 @@ CustomTextEdit.propTypes = { labelWithinInput: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired, customFieldId: PropTypes.number.isRequired, + styles: inputStylesPropTypes.isRequired, }).isRequired, setAttributes: PropTypes.func.isRequired, clientId: PropTypes.string.isRequired, diff --git a/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx b/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx index 0218185dc9..221172030a 100644 --- a/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx +++ b/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx @@ -1,5 +1,6 @@ import Icon from '../custom_text/icon.jsx'; import Edit from './edit.jsx'; +import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx'; export const name = 'mailpoet-form/custom-textarea'; @@ -34,6 +35,10 @@ export function getSettings(customField) { type: 'string', default: customField.id, }, + styles: { + type: 'object', + default: defaultBlockStyles, + }, }, supports: { html: false, diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx index 0b01d205ef..7297e7e026 100644 --- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx +++ b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx @@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx'; import CustomFieldSettings from '../custom_text/custom_field_settings.jsx'; import formatLabel from '../label_formatter.jsx'; import mapCustomFieldFormData from '../map_custom_field_form_data.jsx'; -import InputStylesSettings from '../input_styles_settings.jsx'; +import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => { const isSaving = useSelect( @@ -100,7 +100,10 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => { /> - + (setAttributes({ styles }))} + /> ); @@ -140,6 +143,7 @@ CustomTextAreaEdit.propTypes = { labelWithinInput: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired, lines: PropTypes.string, + styles: inputStylesPropTypes.isRequired, }).isRequired, setAttributes: PropTypes.func.isRequired, clientId: PropTypes.string.isRequired, diff --git a/assets/js/src/form_editor/blocks/email/edit.jsx b/assets/js/src/form_editor/blocks/email/edit.jsx index a6e6e65d95..3a3cf40031 100644 --- a/assets/js/src/form_editor/blocks/email/edit.jsx +++ b/assets/js/src/form_editor/blocks/email/edit.jsx @@ -10,7 +10,7 @@ import PropTypes from 'prop-types'; import MailPoet from 'mailpoet'; import ParagraphEdit from '../paragraph_edit.jsx'; -import InputStylesSettings from '../input_styles_settings.jsx'; +import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; const EmailEdit = ({ attributes, setAttributes }) => { const inspectorControls = ( @@ -30,7 +30,10 @@ const EmailEdit = ({ attributes, setAttributes }) => { /> - + (setAttributes({ styles }))} + /> ); @@ -62,6 +65,7 @@ EmailEdit.propTypes = { attributes: PropTypes.shape({ label: PropTypes.string.isRequired, labelWithinInput: PropTypes.bool.isRequired, + styles: inputStylesPropTypes.isRequired, }).isRequired, setAttributes: PropTypes.func.isRequired, }; diff --git a/assets/js/src/form_editor/blocks/email/email.jsx b/assets/js/src/form_editor/blocks/email/email.jsx index 0266e3f1a5..358af2a396 100644 --- a/assets/js/src/form_editor/blocks/email/email.jsx +++ b/assets/js/src/form_editor/blocks/email/email.jsx @@ -1,6 +1,7 @@ import MailPoet from 'mailpoet'; import edit from './edit.jsx'; import icon from './icon.jsx'; +import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx'; export const name = 'mailpoet-form/email-input'; @@ -18,6 +19,10 @@ export const settings = { type: 'boolean', default: true, }, + styles: { + type: 'object', + default: defaultBlockStyles, + }, }, supports: { html: false, diff --git a/assets/js/src/form_editor/blocks/first_name/edit.jsx b/assets/js/src/form_editor/blocks/first_name/edit.jsx index 308c5be93d..5d7e50aeb3 100644 --- a/assets/js/src/form_editor/blocks/first_name/edit.jsx +++ b/assets/js/src/form_editor/blocks/first_name/edit.jsx @@ -11,7 +11,7 @@ import MailPoet from 'mailpoet'; import ParagraphEdit from '../paragraph_edit.jsx'; import formatLabel from '../label_formatter.jsx'; -import InputStylesSettings from '../input_styles_settings.jsx'; +import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; const FirstNameEdit = ({ attributes, setAttributes }) => { const inspectorControls = ( @@ -36,7 +36,10 @@ const FirstNameEdit = ({ attributes, setAttributes }) => { /> - + (setAttributes({ styles }))} + /> ); @@ -69,6 +72,7 @@ FirstNameEdit.propTypes = { label: PropTypes.string.isRequired, labelWithinInput: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired, + styles: inputStylesPropTypes.isRequired, }).isRequired, setAttributes: PropTypes.func.isRequired, }; diff --git a/assets/js/src/form_editor/blocks/first_name/first_name.jsx b/assets/js/src/form_editor/blocks/first_name/first_name.jsx index 827a4e167a..689946a004 100644 --- a/assets/js/src/form_editor/blocks/first_name/first_name.jsx +++ b/assets/js/src/form_editor/blocks/first_name/first_name.jsx @@ -1,6 +1,7 @@ import MailPoet from 'mailpoet'; import icon from './icon.jsx'; import edit from './edit.jsx'; +import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx'; export const name = 'mailpoet-form/first-name-input'; @@ -22,6 +23,10 @@ export const settings = { type: 'boolean', default: false, }, + styles: { + type: 'object', + default: defaultBlockStyles, + }, }, supports: { html: false, diff --git a/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/assets/js/src/form_editor/blocks/input_styles_settings.jsx index 60e26a8395..943589f9a6 100644 --- a/assets/js/src/form_editor/blocks/input_styles_settings.jsx +++ b/assets/js/src/form_editor/blocks/input_styles_settings.jsx @@ -1,16 +1,61 @@ -import React from 'react'; +import React, { useState } from 'react'; import MailPoet from 'mailpoet'; import { Panel, PanelBody, + ToggleControl, } from '@wordpress/components'; +import { partial } from 'underscore'; +import PropTypes from 'prop-types'; -const InputStylesSettings = () => ( - - - TODO: styles settings - - -); +const InputStylesSettings = ({ + styles, + onChange, +}) => { + const [localStyles, setStyles] = useState(styles); -export default InputStylesSettings; + const updateStyles = (property, value) => { + const updated = { ...localStyles }; + updated[property] = value; + onChange(updated); + setStyles(updated); + }; + return ( + + + + + {!localStyles.inheritFromTheme ? ( + <> + + + ) : null} + + + ); +}; + +export const inputStylesPropTypes = PropTypes.shape({ + fullWidth: PropTypes.bool.isRequired, + inheritFromTheme: PropTypes.bool.isRequired, + bold: PropTypes.bool, +}); + +InputStylesSettings.propTypes = { + styles: inputStylesPropTypes.isRequired, + onChange: PropTypes.func.isRequired, +}; + +export { InputStylesSettings }; diff --git a/assets/js/src/form_editor/blocks/last_name/edit.jsx b/assets/js/src/form_editor/blocks/last_name/edit.jsx index 38bc5892e0..749b4b8f04 100644 --- a/assets/js/src/form_editor/blocks/last_name/edit.jsx +++ b/assets/js/src/form_editor/blocks/last_name/edit.jsx @@ -11,7 +11,7 @@ import MailPoet from 'mailpoet'; import ParagraphEdit from '../paragraph_edit.jsx'; import formatLabel from '../label_formatter.jsx'; -import InputStylesSettings from '../input_styles_settings.jsx'; +import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; const LastNameEdit = ({ attributes, setAttributes }) => { const inspectorControls = ( @@ -36,7 +36,10 @@ const LastNameEdit = ({ attributes, setAttributes }) => { /> - + (setAttributes({ styles }))} + /> ); @@ -69,6 +72,7 @@ LastNameEdit.propTypes = { label: PropTypes.string.isRequired, labelWithinInput: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired, + styles: inputStylesPropTypes.isRequired, }).isRequired, setAttributes: PropTypes.func.isRequired, }; diff --git a/assets/js/src/form_editor/blocks/last_name/last_name.jsx b/assets/js/src/form_editor/blocks/last_name/last_name.jsx index 3416d9cc98..a4caed70ed 100644 --- a/assets/js/src/form_editor/blocks/last_name/last_name.jsx +++ b/assets/js/src/form_editor/blocks/last_name/last_name.jsx @@ -1,6 +1,7 @@ import MailPoet from 'mailpoet'; import icon from './icon.jsx'; import edit from './edit.jsx'; +import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx'; export const name = 'mailpoet-form/last-name-input'; @@ -22,6 +23,10 @@ export const settings = { type: 'boolean', default: true, }, + styles: { + type: 'object', + default: defaultBlockStyles, + }, }, supports: { html: false, diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx index cabcd9f1aa..8952c2a020 100644 --- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx +++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx @@ -4,6 +4,16 @@ import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name const generateId = () => (`${Math.random().toString()}-${Date.now()}`); +export const defaultBlockStyles = { + fullWidth: true, + inheritFromTheme: true, +}; + +const backwardCompatibleBlockStyles = { + fullWidth: false, + inheritFromTheme: true, +}; + export const customFieldValuesToBlockValues = (values) => values.map((value) => { const mappedValue = { name: value.value, @@ -55,6 +65,10 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => { mapped.attributes.values = customFieldValuesToBlockValues(item.params.values); } } + + if (customField.type === 'text' || customField.type === 'textarea') { + mapped.attributes.styles = backwardCompatibleBlockStyles; + } return mapped; }; @@ -153,6 +167,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => return { ...mapped, name: 'mailpoet-form/email-input', + styles: backwardCompatibleBlockStyles, }; case 'heading': if (item.params && has(item.params, 'level')) { @@ -177,11 +192,13 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => return { ...mapped, name: 'mailpoet-form/first-name-input', + styles: backwardCompatibleBlockStyles, }; case 'last_name': return { ...mapped, name: 'mailpoet-form/last-name-input', + styles: backwardCompatibleBlockStyles, }; case 'segments': if ( diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js index 87e19d817e..d886fea13e 100644 --- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js +++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js @@ -8,6 +8,7 @@ import { segmentsInput, submitInput, customTextInput, + customTextareaInput, customRadioInput, customSelectInput, customCheckboxInput, @@ -64,6 +65,51 @@ describe('Form Body To Blocks', () => { expect(block.attributes.labelWithinInput).to.be.equal(false); }); + it('Should add default styles to input blocks', () => { + const customFieldText = { + created_at: '2019-12-10T15:05:06+00:00', + id: 1, + name: 'Custom Field name', + params: { + label: 'Street name', + required: '1', + validate: '', + }, + type: 'text', + updated_at: '2019-12-10T15:05:06+00:00', + }; + const customFieldTextarea = { + created_at: '2019-12-10T15:05:06+00:00', + id: 2, + name: 'Custom Field 2 name', + params: { + label: 'Description', + required: '1', + validate: '', + lines: '3', + }, + type: 'textarea', + updated_at: '2019-12-10T15:05:06+00:00', + }; + + const [email, firstName, lastName, customText, customTextArea] = formBodyToBlocks([ + { ...emailInput, position: '1' }, + { ...firstNameInput, position: '2' }, + { ...lastNameInput, position: '3' }, + { ...customTextInput, position: '4' }, + { ...customTextareaInput, position: '5', id: 2 }, + ], [customFieldText, customFieldTextarea]); + const defaultStyles = { + fullWidth: false, + inheritFromTheme: true, + }; + expect(email.attributes.styles).to.eql(defaultStyles); + expect(firstName.attributes.styles).to.eql(defaultStyles); + expect(lastName.attributes.styles).to.eql(defaultStyles); + expect(customText.attributes.styles).to.eql(defaultStyles); + expect(customTextArea.attributes.styles).to.eql(defaultStyles); + }); + it('Should map email with label within correctly', () => { const email = { ...emailInput }; email.params.label_within = '1'; diff --git a/tests/javascript/form_editor/store/form_to_block_test_data.js b/tests/javascript/form_editor/store/form_to_block_test_data.js index e733bd12d3..9e1dd7f2f8 100644 --- a/tests/javascript/form_editor/store/form_to_block_test_data.js +++ b/tests/javascript/form_editor/store/form_to_block_test_data.js @@ -82,6 +82,20 @@ export const customTextInput = { }, position: null, }; +export const customTextareaInput = { + type: 'textarea', + name: 'Description', + id: '1', + unique: '1', + static: '0', + params: { + required: '', + label: 'Name of the street', + label_within: '1', + lines: '3', + }, + position: null, +}; export const customRadioInput = { type: 'radio', name: 'Options', diff --git a/views/form/editor.html b/views/form/editor.html index f3851222c9..3e667189ac 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -46,6 +46,9 @@ 'formSettingsStylesFontSize': __('Font Size'), 'formSettingsStylesFontColor': __('Font Color'), 'formSettingsStylesFontColorInherit': __('Inherit from theme'), + 'formSettingsInheritStyleFromTheme': __('Inherit style from theme'), + 'formSettingsDisplayFullWidth': _x('Display Fullwidth', 'A label for checkbox in form style settings'), + 'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'), 'customFieldSettings': _x('Custom field settings', 'A settings section heading'), 'customFieldsFormSettings': _x('Form settings', 'A settings section heading'), 'formPlacement': _x('Form Placement', 'A settings section heading'),