diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index e1814aab89..92375ae86b 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx @@ -1,5 +1,16 @@ import { has } from 'lodash'; +const mapBlockStyles = (styles) => { + const mappedStyles = { + full_width: styles.fullWidth ? '1' : '0', + }; + if (styles.inheritFromTheme) { + return mappedStyles; + } + mappedStyles.bold = styles.bold ? '1' : '0'; + return mappedStyles; +}; + const mapCustomField = (block, customFields, mappedCommonProperties) => { const customField = customFields.find((cf) => cf.id === block.attributes.customFieldId); if (!customField) return null; @@ -13,9 +24,11 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => { } if (block.name.startsWith('mailpoet-form/custom-text')) { mapped.type = 'text'; + mapped.styles = mapBlockStyles(block.attributes.styles); } if (block.name.startsWith('mailpoet-form/custom-textarea')) { mapped.type = 'textarea'; + mapped.styles = mapBlockStyles(block.attributes.styles); } if (block.name.startsWith('mailpoet-form/custom-radio')) { mapped.type = 'radio'; @@ -74,6 +87,9 @@ export const mapColorSlugToValue = (colorDefinitions, colorSlug, colorValue = nu * @param customFields - list of all custom Fields */ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => { + if (!Array.isArray(customFields)) { + throw new Error('Mapper expects customFields to be an array.'); + } /** * @param blocks * @param parent - parent block of nested block @@ -83,9 +99,6 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => if (!Array.isArray(blocks)) { throw new Error('Mapper expects blocks to be an array.'); } - if (!Array.isArray(customFields)) { - throw new Error('Mapper expects customFields to be an array.'); - } return blocks.map((block) => { const mapped = { @@ -158,18 +171,21 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => ...mapped.params, required: '1', }, + styles: mapBlockStyles(block.attributes.styles), }; case 'mailpoet-form/first-name-input': return { ...mapped, id: 'first_name', name: 'First name', + styles: mapBlockStyles(block.attributes.styles), }; case 'mailpoet-form/last-name-input': return { ...mapped, id: 'last_name', name: 'Last name', + styles: mapBlockStyles(block.attributes.styles), }; case 'mailpoet-form/segment-select': return { 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 8952c2a020..71491a9f97 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 @@ -167,7 +167,10 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => return { ...mapped, name: 'mailpoet-form/email-input', - styles: backwardCompatibleBlockStyles, + attributes: { + ...mapped.attributes, + styles: backwardCompatibleBlockStyles, + }, }; case 'heading': if (item.params && has(item.params, 'level')) { @@ -192,13 +195,19 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => return { ...mapped, name: 'mailpoet-form/first-name-input', - styles: backwardCompatibleBlockStyles, + attributes: { + ...mapped.attributes, + styles: backwardCompatibleBlockStyles, + }, }; case 'last_name': return { ...mapped, name: 'mailpoet-form/last-name-input', - styles: backwardCompatibleBlockStyles, + attributes: { + ...mapped.attributes, + styles: backwardCompatibleBlockStyles, + }, }; case 'segments': if ( diff --git a/tests/javascript/form_editor/store/block_to_form_test_data.js b/tests/javascript/form_editor/store/block_to_form_test_data.js index 73c117fa13..2dd943967f 100644 --- a/tests/javascript/form_editor/store/block_to_form_test_data.js +++ b/tests/javascript/form_editor/store/block_to_form_test_data.js @@ -6,6 +6,10 @@ export const emailBlock = { attributes: { label: 'Email Address', labelWithinInput: false, + styles: { + fullWidth: false, + inheritFromTheme: true, + }, }, }; @@ -45,6 +49,10 @@ export const firstNameBlock = { label: 'First Name', labelWithinInput: false, mandatory: false, + styles: { + fullWidth: false, + inheritFromTheme: true, + }, }, }; @@ -57,6 +65,10 @@ export const lastNameBlock = { label: 'Last Name', labelWithinInput: false, mandatory: false, + styles: { + fullWidth: false, + inheritFromTheme: true, + }, }, }; @@ -71,6 +83,10 @@ export const customTextBlock = { mandatory: false, validate: 'alphanum', customFieldId: 1, + styles: { + fullWidth: false, + inheritFromTheme: true, + }, }, }; diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index 025dc67c6c..17f3f64592 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js @@ -63,6 +63,42 @@ describe('Blocks to Form Body', () => { expect(input.params.label_within).to.be.equal('1'); }); + it('Should map input block styles', () => { + const blockWithThemeStyles = { + ...emailBlock, + attributes: { + ...emailBlock.attributes, + styles: { + fullWidth: true, + inheritFromTheme: true, + bold: true, + }, + }, + }; + const blockWithCustomStyles = { + ...firstNameBlock, + attributes: { + ...firstNameBlock.attributes, + styles: { + fullWidth: false, + inheritFromTheme: false, + bold: true, + }, + }, + }; + const [ + inputWithThemeStyles, + inputWithCustomStyles, + ] = formBlocksToBody([blockWithThemeStyles, blockWithCustomStyles]); + expect(inputWithThemeStyles.styles).to.eql({ + full_width: '1', + }); + expect(inputWithCustomStyles.styles).to.eql({ + full_width: '0', + bold: '1', + }); + }); + it('Should map last name block to input data', () => { const [input] = formBlocksToBody([lastNameBlock]); checkBodyInputBasics(input); 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 d886fea13e..f8ca1065e7 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 @@ -92,13 +92,14 @@ describe('Form Body To Blocks', () => { updated_at: '2019-12-10T15:05:06+00:00', }; - const [email, firstName, lastName, customText, customTextArea] = formBodyToBlocks([ + const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText, customFieldTextarea]); + const [email, firstName, lastName, customText, customTextArea] = map([ { ...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,