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 1a3f480bc5..f2bede5102 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 @@ -95,6 +95,7 @@ const mapBlocks = (blocks, customFields = [], parent = null) => { position: (index + 1).toString(), type: 'column', params: { + vertical_alignment: block.attributes.verticalAlignment || null, width: block.attributes.width ? block.attributes.width : Math.round(100 / parent.innerBlocks.length), }, 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 a83b1579f5..52bad724a0 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 @@ -69,6 +69,9 @@ const mapColumnBlocks = (data, customFields = []) => { if (has(data.params, 'width')) { mapped.attributes.width = parseFloat(data.params.width); } + if (has(data.params, 'vertical_alignment')) { + mapped.attributes.verticalAlignment = data.params.vertical_alignment; + } return mapped; }; 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 index d6e133d96f..9ea4470ff0 100644 --- a/tests/javascript/form_editor/store/block_to_form_test_data.js +++ b/tests/javascript/form_editor/store/block_to_form_test_data.js @@ -174,6 +174,7 @@ export const nestedColumns = { isValid: true, attributes: { width: 66.66, + verticalAlignment: 'center', }, innerBlocks: [ { 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 c8c9f52288..481dee2b4d 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 @@ -314,6 +314,7 @@ describe('Blocks to Form Body', () => { const column2 = columns.body[1]; expect(column1.type).to.be.equal('column'); expect(column1.params.width).to.be.equal(66.66); + expect(column1.params.vertical_alignment).to.be.equal('center'); expect(column1.body.length).to.be.equal(2); expect(column2.type).to.be.equal('column'); expect(column2.body.length).to.be.equal(1); 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 b6cf1aa292..38662b6255 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 @@ -323,6 +323,8 @@ describe('Form Body To Blocks', () => { // First level const column1 = blocks[1].innerBlocks[0]; expect(column1.name).to.be.equal('core/column'); + expect(column1.attributes.width).to.be.equal(66.66); + expect(column1.attributes.verticalAlignment).to.be.equal('center'); expect(column1.innerBlocks.length).to.be.equal(2); const columns11 = column1.innerBlocks[0]; checkBlockBasics(column1.innerBlocks[1]); @@ -330,7 +332,6 @@ describe('Form Body To Blocks', () => { expect(column2.name).to.be.equal('core/column'); expect(column2.innerBlocks.length).to.be.equal(1); checkBlockBasics(column1.innerBlocks[0]); - // Second level expect(columns11.innerBlocks.length).to.be.equal(2); const column11 = columns11.innerBlocks[0]; diff --git a/tests/javascript/form_editor/store/form_to_block_test_data.js b/tests/javascript/form_editor/store/form_to_block_test_data.js index 1958ab1cf5..8f9e4f0b1b 100644 --- a/tests/javascript/form_editor/store/form_to_block_test_data.js +++ b/tests/javascript/form_editor/store/form_to_block_test_data.js @@ -184,6 +184,7 @@ export const nestedColumns = { type: 'column', params: { width: 66.66, + vertical_alignment: 'center', }, body: [ {