Add saving of nested columns blocks

[MAILPOET-2609]

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

@@ -63,8 +63,9 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
  * Transforms blocks to form.body data structure.
  * @param blocks - blocks representation taken from @wordpress/block-editor
  * @param customFields - list of all custom Fields
+ * @param parent - parent block of nested block
  */
-export default (blocks, customFields = []) => {
+const mapBlocks = (blocks, customFields = [], parent = null) => {
   if (!Array.isArray(blocks)) {
     throw new Error('Mapper expects blocks to be an array.');
   }
@@ -89,6 +90,22 @@ export default (blocks, customFields = []) => {
     }
 
     switch (block.name) {
+      case 'core/column':
+        return {
+          position: (index + 1).toString(),
+          type: 'column',
+          params: {
+            width: block.attributes.width
+              ? block.attributes.width : Math.round(100 / parent.innerBlocks.length),
+          },
+          body: mapBlocks(block.innerBlocks, customFields, block),
+        };
+      case 'core/columns':
+        return {
+          position: (index + 1).toString(),
+          type: 'columns',
+          body: mapBlocks(block.innerBlocks, customFields, block),
+        };
       case 'mailpoet-form/email-input':
         return {
           ...mapped,
@@ -168,3 +185,5 @@ export default (blocks, customFields = []) => {
     }
   }).filter(Boolean);
 };
+
+export default mapBlocks;

tests/javascript/form_editor/store/block_to_form_test_data.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/prefer-default-export
+export const nestedColumns = {
+  clientId: 'columns-1',
+  name: 'core/columns',
+  isValid: true,
+  attributes: {},
+  innerBlocks: [
+    {
+      clientId: 'column-1-1',
+      name: 'core/column',
+      isValid: true,
+      attributes: {
+        width: 66.66,
+      },
+      innerBlocks: [
+        {
+          clientId: 'columns-1-1',
+          name: 'core/columns',
+          isValid: true,
+          attributes: {},
+          innerBlocks: [
+            {
+              clientId: 'column-1-1-1',
+              name: 'core/column',
+              isValid: true,
+              attributes: {},
+              innerBlocks: [
+                {
+                  clientId: 'first-name-1-1-1',
+                  name: 'mailpoet-form/last-name-input',
+                  isValid: true,
+                  attributes: {
+                    label: 'Last name',
+                    labelWithinInput: true,
+                    mandatory: true,
+                  },
+                  innerBlocks: [],
+                },
+              ],
+            },
+            {
+              clientId: 'columns-1-1-2',
+              name: 'core/column',
+              isValid: true,
+              attributes: {},
+              innerBlocks: [],
+            },
+          ],
+        },
+        {
+          clientId: 'divider-1-1-2',
+          name: 'mailpoet-form/divider',
+          isValid: true,
+          attributes: {},
+          innerBlocks: [],
+        },
+      ],
+    },
+    {
+      clientId: 'column-1-2',
+      name: 'core/column',
+      isValid: true,
+      attributes: {
+        width: 33.33,
+      },
+      innerBlocks: [
+        {
+          clientId: 'submit-1-2',
+          isValid: true,
+          innerBlocks: [],
+          name: 'mailpoet-form/submit-button',
+          attributes: {
+            label: 'Subscribe!',
+          },
+        },
+      ],
+    },
+  ],
+};

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

@@ -1,5 +1,6 @@
 import { expect } from 'chai';
 import formBlocksToBody from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
+import { nestedColumns } from './block_to_form_test_data.js';
 
 const emailBlock = {
   clientId: 'email',
@@ -450,20 +451,39 @@ describe('Blocks to Form Body', () => {
     expect(input.params.is_default_today).to.be.equal('1');
   });
 
-  it('Should map multiple blocks at once', () => {
+  it('Should map nested columns blocks', () => {
-    const unknownBlock = {
+    const mapped = formBlocksToBody([emailBlock, nestedColumns, submitBlock]);
-      name: 'unknown',
+    const columns = mapped[1];
-      clientId: '1234',
+    expect(mapped.length).to.be.equal(3);
-      attributes: {
+    // First level
-        id: 'unknowns',
+    expect(columns.body.length).to.be.equal(2);
-      },
+    expect(columns.type).to.be.equal('columns');
-    };
+    expect(columns.position).to.be.equal('2');
-    const inputs = formBlocksToBody([submitBlock, emailBlock, unknownBlock]);
+    const column1 = columns.body[0];
-    inputs.map(checkBodyInputBasics);
+    const column2 = columns.body[1];
-    expect(inputs.length).to.be.equal(2);
+    expect(column1.type).to.be.equal('column');
-    expect(inputs[0].id).to.be.equal('submit');
+    expect(column1.params.width).to.be.equal(66.66);
-    expect(inputs[0].position).to.be.equal('1');
+    expect(column1.body.length).to.be.equal(2);
-    expect(inputs[1].id).to.be.equal('email');
+    expect(column2.type).to.be.equal('column');
-    expect(inputs[1].position).to.be.equal('2');
+    expect(column2.body.length).to.be.equal(1);
+    expect(column2.params.width).to.be.equal(33.33);
+    const divider = column1.body[1];
+    checkBodyInputBasics(divider);
+    const submit = column2.body[0];
+    checkBodyInputBasics(submit);
+    const columns11 = column1.body[0];
+    expect(columns11.type).to.be.equal('columns');
+    expect(columns11.body.length).to.be.equal(2);
+    // Second level
+    const column11 = columns11.body[0];
+    const column12 = columns11.body[1];
+    expect(column11.type).to.be.equal('column');
+    expect(column11.params.width).to.be.equal(50);
+    expect(column11.body.length).to.be.equal(1);
+    expect(column12.type).to.be.equal('column');
+    expect(column12.body.length).to.be.equal(0);
+    expect(column12.params.width).to.be.equal(50);
+    const input = column11.body[0];
+    checkBodyInputBasics(input);
   });
 });