Store columns text and background colors settings

[MAILPOET-2609]

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

@@ -106,6 +106,12 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
           position: (index + 1).toString(),
           type: 'columns',
           body: mapBlocks(block.innerBlocks, customFields, block),
+          params: {
+            text_color: block.attributes.textColor || null,
+            background_color: block.attributes.backgroundColor || null,
+            custom_text_color: block.attributes.customTextColor || null,
+            custom_background_color: block.attributes.customBackgroundColor || null,
+          },
         };
       case 'mailpoet-form/email-input':
         return {

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

@@ -72,6 +72,18 @@ const mapColumnBlocks = (data, customFields = []) => {
   if (has(data.params, 'vertical_alignment')) {
     mapped.attributes.verticalAlignment = data.params.vertical_alignment;
   }
+  if (has(data.params, 'text_color')) {
+    mapped.attributes.textColor = data.params.text_color;
+  }
+  if (has(data.params, 'custom_text_color')) {
+    mapped.attributes.customTextColor = data.params.custom_text_color;
+  }
+  if (has(data.params, 'background_color')) {
+    mapped.attributes.backgroundColor = data.params.background_color;
+  }
+  if (has(data.params, 'custom_background_color')) {
+    mapped.attributes.customBackgroundColor = data.params.custom_background_color;
+  }
   return mapped;
 };
 

tests/javascript/form_editor/store/block_to_form_test_data.js

@@ -161,7 +161,6 @@ export const customHtmlBlock = {
   },
 };
 
-
 export const nestedColumns = {
   clientId: 'columns-1',
   name: 'core/columns',

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

@@ -338,4 +338,19 @@ describe('Blocks to Form Body', () => {
     const input = column11.body[0];
     checkBodyInputBasics(input);
   });
+
+  it('Should map colors for columns', () => {
+    const columns = { ...nestedColumns };
+    columns.attributes = {
+      textColor: 'vivid-red',
+      backgroundColor: 'white',
+      customBackgroundColor: '#ffffff',
+      customTextColor: '#dd0000',
+    };
+    const [mapped] = formBlocksToBody([columns]);
+    expect(mapped.params.text_color).to.be.equal('vivid-red');
+    expect(mapped.params.background_color).to.be.equal('white');
+    expect(mapped.params.custom_background_color).to.be.equal('#ffffff');
+    expect(mapped.params.custom_text_color).to.be.equal('#dd0000');
+  });
 });

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

@@ -340,4 +340,19 @@ describe('Form Body To Blocks', () => {
     const column12 = columns11.innerBlocks[1];
     expect(column12.innerBlocks.length).to.be.equal(0);
   });
+
+  it('Should map columns colors', () => {
+    const nested = { ...nestedColumns, position: '1' };
+    nested.params = {
+      text_color: 'vivid-red',
+      background_color: 'white',
+      custom_text_color: '#dd0000',
+      custom_background_color: '#ffffff',
+    };
+    const [block] = formBodyToBlocks([nested]);
+    expect(block.attributes.textColor).to.be.equal('vivid-red');
+    expect(block.attributes.backgroundColor).to.be.equal('white');
+    expect(block.attributes.customTextColor).to.be.equal('#dd0000');
+    expect(block.attributes.customBackgroundColor).to.be.equal('#ffffff');
+  });
 });