Add saving and loading of custom classes

[MAILPOET-2746]

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', () => {