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 71491a9f97..f7dc6847fc 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 @@ -25,6 +25,23 @@ export const customFieldValuesToBlockValues = (values) => values.map((value) => return mappedValue; }); +const mapBlockStyles = (styles) => { + if (!styles) { + return backwardCompatibleBlockStyles; + } + const mappedStyles = { + fullWidth: styles.full_width === '1', + }; + // Detect if styles inherit from theme by checking if bold param is present + if (!has(styles, 'bold')) { + mappedStyles.inheritFromTheme = true; + return mappedStyles; + } + mappedStyles.inheritFromTheme = false; + mappedStyles.bold = styles.bold === '1'; + return mappedStyles; +}; + const mapCustomField = (item, customFields, mappedCommonProperties) => { const customField = customFields.find((cf) => cf.id === parseInt(item.id, 10)); if (!customField) return null; @@ -67,7 +84,7 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => { } if (customField.type === 'text' || customField.type === 'textarea') { - mapped.attributes.styles = backwardCompatibleBlockStyles; + mapped.attributes.styles = mapBlockStyles(item.styles); } return mapped; }; @@ -169,7 +186,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => name: 'mailpoet-form/email-input', attributes: { ...mapped.attributes, - styles: backwardCompatibleBlockStyles, + styles: mapBlockStyles(item.styles), }, }; case 'heading': @@ -197,7 +214,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => name: 'mailpoet-form/first-name-input', attributes: { ...mapped.attributes, - styles: backwardCompatibleBlockStyles, + styles: mapBlockStyles(item.styles), }, }; case 'last_name': @@ -206,7 +223,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => name: 'mailpoet-form/last-name-input', attributes: { ...mapped.attributes, - styles: backwardCompatibleBlockStyles, + styles: mapBlockStyles(item.styles), }, }; case 'segments': 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 f8ca1065e7..1a8f00e308 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 @@ -111,6 +111,45 @@ describe('Form Body To Blocks', () => { expect(customTextArea.attributes.styles).to.eql(defaultStyles); }); + it('Should map input block styles', () => { + 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 emailStyles = { + full_width: '1', + }; + + const customTextStyles = { + full_width: '0', + bold: '1', + }; + + const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText]); + const [email, customText] = map([ + { ...emailInput, position: '1', styles: emailStyles }, + { ...customTextInput, position: '2', styles: customTextStyles }, + ]); + expect(email.attributes.styles).to.eql({ + fullWidth: true, + inheritFromTheme: true, + }); + expect(customText.attributes.styles).to.eql({ + fullWidth: false, + inheritFromTheme: false, + bold: true, + }); + }); + it('Should map email with label within correctly', () => { const email = { ...emailInput }; email.params.label_within = '1';