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 e0a104f2b8..6e6aaa8549 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 @@ -105,6 +105,20 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => } const childrenCount = parent ? parent.innerBlocks.length : 1; switch (block.name) { + case 'core/heading': + return { + position: (index + 1).toString(), + type: 'heading', + id: 'heading', + params: { + content: block.attributes.content, + level: block.attributes.level, + align: block.attributes.align || 'left', + text_color: block.attributes.textColor || '#000', + anchor: block.attributes.anchor || null, + class_name: block.attributes.className || null, + }, + }; case 'core/column': return { position: (index + 1).toString(), 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 afb031f565..73c117fa13 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 @@ -161,6 +161,16 @@ export const customHtmlBlock = { }, }; +export const headingBlock = { + clientId: 'd9dd2b88-d01f-4a5e-80a4-afaa74de1b00', + name: 'core/heading', + isValid: true, + attributes: { + content: '', + level: 2, + }, +}; + export const nestedColumns = { clientId: 'columns-1', name: 'core/columns', 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 39b2781d75..476d372b26 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 @@ -14,6 +14,7 @@ import { customSelectBlock, dividerBlock, nestedColumns, + headingBlock, } from './block_to_form_test_data.js'; const colorDefinitions = [{ @@ -259,6 +260,41 @@ describe('Blocks to Form Body', () => { expect(input.params.values[1]).to.have.property('value', 'option 2'); }); + it('Should map minimal heading block', () => { + const [input] = formBlocksToBody([headingBlock]); + expect(input.type).to.be.equal('heading'); + expect(input.id).to.be.a('string'); + expect(input.params.content).to.be.equal(''); + expect(input.params.level).to.be.equal(2); + expect(input.params.align).to.be.equal('left'); + expect(input.params.text_color).to.be.equal('#000'); + expect(input.params.anchor).to.be.be.null; + expect(input.params.class_name).to.be.null; + }); + + it('Should map full heading block', () => { + const [input] = formBlocksToBody([{ + clientId: 'd9dd2b88-d01f-4a5e-80a4-afaa74de1b00', + name: 'core/heading', + isValid: true, + attributes: { + content: 'Heading content', + level: 3, + align: 'center', + textColor: 'red', + anchor: 'anchor', + className: 'class', + }, + }]); + expect(input.type).to.be.equal('heading'); + expect(input.params.content).to.be.equal('Heading content'); + expect(input.params.level).to.be.equal(3); + expect(input.params.align).to.be.equal('center'); + expect(input.params.text_color).to.be.equal('red'); + expect(input.params.anchor).to.be.equal('anchor'); + expect(input.params.class_name).to.be.equal('class'); + }); + it('Should map custom checkbox field', () => { const customField = { created_at: '2019-12-13T15:22:07+00:00',