Add mapping of block styles attribute to API data format

[MAILPOET-2599]

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 {

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 (

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,
+    },
   },
 };
 

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

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,