Add saving and loading of custom classes

[MAILPOET-2746]

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -117,6 +117,7 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) =>
         type: 'text',
         params: {
           label: block.attributes.label,
+          class_name: block.attributes.className || null,
         },
       };
       if (block.attributes.mandatory) {

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -174,8 +174,12 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
         attributes: {
           labelWithinInput: false,
           mandatory: false,
+          className: null,
         },
       };
+      if (item.params && has(item.params, 'class_name')) {
+        mapped.attributes.className = item.params.class_name;
+      }
       if (item.params && has(item.params, 'required')) {
         mapped.attributes.mandatory = !!item.params.required;
       }
@@ -273,6 +277,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
             ...mapped,
             name: 'mailpoet-form/html',
             attributes: {
+              className: mapped.attributes.className,
               content: item.params && item.params.text ? item.params.text : '',
               nl2br: item.params && item.params.nl2br ? !!item.params.nl2br : false,
             },

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -427,7 +427,7 @@ describe('Blocks to Form Body', () => {
     expect(mapped2.params.background_color).to.be.equal('#bbbbbb');
   });
 
-  it('Should map class name for columns and column', () => {
+  it('Should map class names', () => {
     const columns = { ...nestedColumns };
     columns.attributes = {
       className: 'my-class',
@@ -441,5 +441,28 @@ describe('Blocks to Form Body', () => {
     };
     const [mappedColumn] = formBlocksToBody([column]);
     expect(mappedColumn.params.class_name).to.be.equal('my-class-2');
+
+    const email = { ...emailBlock };
+    email.attributes.className = 'my-class-3';
+    const [mappedEmail] = formBlocksToBody([email]);
+    expect(mappedEmail.params.class_name).to.be.equal('my-class-3');
+
+    const customField = {
+      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 customText = { ...customTextBlock };
+    customText.attributes.className = 'my-class-4';
+    const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
+    const [mappedCustomText] = map([customText]);
+    expect(mappedCustomText.params.class_name).to.be.equal('my-class-4');
   });
 });

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -485,6 +485,29 @@ describe('Form Body To Blocks', () => {
     };
     const [block] = formBodyToBlocks([nested]);
     expect(block.attributes.className).to.be.equal('custom-class');
+
+    const email = { ...emailInput, position: '1' };
+    email.params.class_name = 'custom-class-2';
+    const [mappedEmail] = formBodyToBlocks([email]);
+    expect(mappedEmail.attributes.className).to.be.equal('custom-class-2');
+
+    const customField = {
+      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 customText = { ...customTextInput, position: '1' };
+    customText.params.class_name = 'custom-class-3 custom-class-4';
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [mappedCustomText] = map([customText]);
+    expect(mappedCustomText.attributes.className).to.be.equal('custom-class-3 custom-class-4');
   });
 
   it('It should map heading', () => {