From b51ce7c1b290f3250d6bd1dd021c101f39853ff6 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Tue, 18 Feb 2020 16:03:28 +0100
Subject: [PATCH] Store columns block custom class name

[MAILPOET-2609]
---
 .../form_editor/store/blocks_to_form_body.jsx    |  6 ++++--
 .../form_editor/store/form_body_to_blocks.jsx    |  3 +++
 .../store/blocks_to_form_body.spec.js            | 16 ++++++++++++++++
 .../store/form_body_to_blocks.spec.js            |  9 +++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx
index 2842b1cca9..38739fa97d 100644
--- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx
+++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx
@@ -88,16 +88,17 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
     if (block.attributes.labelWithinInput) {
       mapped.params.label_within = '1';
     }
-
+    const childrenCount = parent ? parent.innerBlocks.length : 1;
     switch (block.name) {
       case 'core/column':
         return {
           position: (index + 1).toString(),
           type: 'column',
           params: {
+            class_name: block.attributes.className || null,
             vertical_alignment: block.attributes.verticalAlignment || null,
             width: block.attributes.width
-              ? block.attributes.width : Math.round(100 / parent.innerBlocks.length),
+              ? block.attributes.width : Math.round(100 / childrenCount),
           },
           body: mapBlocks(block.innerBlocks, customFields, block),
         };
@@ -107,6 +108,7 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
           type: 'columns',
           body: mapBlocks(block.innerBlocks, customFields, block),
           params: {
+            class_name: block.attributes.className || null,
             text_color: block.attributes.textColor || null,
             background_color: block.attributes.backgroundColor || null,
             custom_text_color: block.attributes.customTextColor || null,
diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index 4430d9d44e..0249c9c141 100644
--- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -84,6 +84,9 @@ const mapColumnBlocks = (data, customFields = []) => {
   if (has(data.params, 'custom_background_color')) {
     mapped.attributes.customBackgroundColor = data.params.custom_background_color;
   }
+  if (has(data.params, 'class_name') && data.params.class_name) {
+    mapped.attributes.className = data.params.class_name;
+  }
   return mapped;
 };
 
diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
index d400c80f41..f07875e87b 100644
--- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
+++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
@@ -353,4 +353,20 @@ describe('Blocks to Form Body', () => {
     expect(mapped.params.custom_background_color).to.be.equal('#ffffff');
     expect(mapped.params.custom_text_color).to.be.equal('#dd0000');
   });
+
+  it('Should map class name for columns and column', () => {
+    const columns = { ...nestedColumns };
+    columns.attributes = {
+      className: 'my-class',
+    };
+    const [mapped] = formBlocksToBody([columns]);
+    expect(mapped.params.class_name).to.be.equal('my-class');
+
+    const column = { ...nestedColumns.innerBlocks[0] };
+    column.attributes = {
+      className: 'my-class-2',
+    };
+    const [mappedColumn] = formBlocksToBody([column]);
+    expect(mappedColumn.params.class_name).to.be.equal('my-class-2');
+  });
 });
diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
index f2df24808b..d73aab883d 100644
--- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
+++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
@@ -355,4 +355,13 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.customTextColor).to.be.equal('#dd0000');
     expect(block.attributes.customBackgroundColor).to.be.equal('#ffffff');
   });
+
+  it('Should map class name', () => {
+    const nested = { ...nestedColumns, position: '1' };
+    nested.params = {
+      class_name: 'custom-class',
+    };
+    const [block] = formBodyToBlocks([nested]);
+    expect(block.attributes.className).to.be.equal('custom-class');
+  });
 });