Add mapping of form API data format styles to block attributes

[MAILPOET-2599]

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':

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';