Store columns block custom class name

[MAILPOET-2609]

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,

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

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');
+  });
 });

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');
+  });
 });