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 e9e227a5bc..1a3f480bc5 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 @@ -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; diff --git a/tests/javascript/form_editor/store/block_to_form_test_data.js b/tests/javascript/form_editor/store/block_to_form_test_data.js new file mode 100644 index 0000000000..2bca42a48d --- /dev/null +++ b/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!', + }, + }, + ], + }, + ], +}; 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 15afcd5218..6740faed21 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 @@ -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', () => { - const unknownBlock = { - name: 'unknown', - clientId: '1234', - attributes: { - id: 'unknowns', - }, - }; - const inputs = formBlocksToBody([submitBlock, emailBlock, unknownBlock]); - inputs.map(checkBodyInputBasics); - expect(inputs.length).to.be.equal(2); - expect(inputs[0].id).to.be.equal('submit'); - expect(inputs[0].position).to.be.equal('1'); - expect(inputs[1].id).to.be.equal('email'); - expect(inputs[1].position).to.be.equal('2'); + it('Should map nested columns blocks', () => { + const mapped = formBlocksToBody([emailBlock, nestedColumns, submitBlock]); + const columns = mapped[1]; + expect(mapped.length).to.be.equal(3); + // First level + expect(columns.body.length).to.be.equal(2); + expect(columns.type).to.be.equal('columns'); + expect(columns.position).to.be.equal('2'); + const column1 = columns.body[0]; + const column2 = columns.body[1]; + expect(column1.type).to.be.equal('column'); + expect(column1.params.width).to.be.equal(66.66); + expect(column1.body.length).to.be.equal(2); + expect(column2.type).to.be.equal('column'); + 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); }); });