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 67d91cfbd5..56f7122660 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 @@ -83,6 +83,17 @@ export default (blocks) => { static: '0', params: '', }; + case 'mailpoet-form/custom-html': + return { + ...mapped, + id: 'html', + type: 'html', + name: 'Custom text or HTML', + static: '0', + params: { + text: block.attributes && block.attributes.content ? block.attributes.content : '', + }, + }; default: return null; } 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 0b3522461a..9b28118c05 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 @@ -70,6 +70,15 @@ export default (data) => { name: 'mailpoet-form/divider', clientId: `divider_${index}`, }; + case 'html': + return { + ...mapped, + name: 'mailpoet-form/custom-html', + clientId: `custom_html_${index}`, + attributes: { + content: item.params && item.params.text ? item.params.text : '', + }, + }; default: return null; } 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 ad4440c611..08bea4ac96 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 @@ -67,6 +67,16 @@ const dividerBlock = { attributes: {}, }; +const customHtmlBlock = { + clientId: 'some_random_321', + isValid: true, + innerBlocks: [], + name: 'mailpoet-form/custom-html', + attributes: { + content: 'HTML content', + }, +}; + const checkBodyInputBasics = (input) => { expect(input.id).to.be.a('string'); expect(parseInt(input.position, 10)).to.be.a('number'); @@ -202,6 +212,18 @@ describe('Blocks to Form Body', () => { expect(divider2.position).to.be.equal('2'); }); + it('Should custom html block to form data', () => { + const [html] = formBlocksToBody([customHtmlBlock]); + checkBodyInputBasics(html); + expect(html.id).to.be.equal('html'); + expect(html.name).to.be.equal('Custom text or HTML'); + expect(html.type).to.be.equal('html'); + expect(html.position).to.be.equal('1'); + expect(html.unique).to.be.equal('0'); + expect(html.static).to.be.equal('0'); + expect(html.params.text).to.be.equal('HTML content'); + }); + it('Should map multiple blocks at once', () => { const unknownBlock = { name: 'unknown', 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 1d01975f59..8b1654e724 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 @@ -82,6 +82,18 @@ const divider = { position: null, }; +const customHtml = { + type: 'html,', + name: 'Custom text or HTML', + id: 'html', + unique: '0', + static: '0', + params: { + text: 'test', + }, + position: null, +}; + const checkBlockBasics = (block) => { expect(block.clientId).to.be.a('string'); expect(block.name).to.be.a('string'); @@ -191,10 +203,26 @@ describe('Form Body To Blocks', () => { checkBlockBasics(block1); expect(block1.clientId).to.be.equal('divider_0'); expect(block1.name).to.be.equal('mailpoet-form/divider'); + checkBlockBasics(block2); expect(block2.clientId).to.be.equal('divider_1'); expect(block2.name).to.be.equal('mailpoet-form/divider'); }); + it('Should map custom html to blocks', () => { + const [block1, block2] = formBodyToBlocks([ + { ...customHtml, position: '1', params: { text: '123' } }, + { ...customHtml, position: '2', params: { text: 'nice one' } }, + ]); + checkBlockBasics(block1); + expect(block1.clientId).to.be.equal('custom_html_0'); + expect(block1.name).to.be.equal('mailpoet-form/custom-html'); + expect(block1.attributes.content).to.be.equal('123'); + checkBlockBasics(block2); + expect(block2.clientId).to.be.equal('custom_html_1'); + expect(block2.name).to.be.equal('mailpoet-form/custom-html'); + expect(block2.attributes.content).to.be.equal('nice one'); + }); + it('Should ignore unknown input type', () => { const blocks = formBodyToBlocks([{ ...submitInput, id: 'some-nonsense' }]); expect(blocks).to.be.empty;