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 eae020fa74..b56c5d9696 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 @@ -132,9 +132,19 @@ const mapFontSizeSlug = (fontSizeDefinitions, fontSizeValue) => { return result ? result.slug : undefined; }; -const mapColumnBlocks = (data, colorDefinitions, customFields = []) => { +/** + * @param {Object} data - column or columns block data + * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions + * @param {Array.<{name: string, slug: string, size: number}>} fontSizeDefinitions + * @param customFields - list of all custom Fields + */ +const mapColumnBlocks = (data, fontSizeDefinitions, colorDefinitions, customFields = []) => { // eslint-disable-next-line no-use-before-define - const mapFormBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, customFields); + const mapFormBodyToBlocks = formBodyToBlocksFactory( + colorDefinitions, + fontSizeDefinitions, + customFields + ); const mapped = { clientId: generateId(), name: `core/${data.type}`, @@ -191,7 +201,7 @@ export const formBodyToBlocksFactory = ( return data.map((item) => { if (['column', 'columns'].includes(item.type)) { - return mapColumnBlocks(item, colorDefinitions, customFields); + return mapColumnBlocks(item, fontSizeDefinitions, colorDefinitions, customFields); } const mapped = { 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 29c54b6fb1..833b2db467 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 @@ -638,4 +638,32 @@ describe('Form Body To Blocks', () => { expect(block.attributes.width).to.equal(100); expect(block.attributes.height).to.equal(200); }); + + it('Should map custom field in column', () => { + const columnsWithCustomField = { ...nestedColumns }; + // Add custom field to first column + columnsWithCustomField.body[0].body = [customTextInput]; + // Prepare custom fields definitions + const customField = { + created_at: '2019-12-10T15:05:06+00:00', + id: 1, + name: 'Custom Field name', + params: { + label: 'Street name', + required: '1', + validate: '', + }, + type: 'text', + updated_at: '2019-12-10T15:05:06+00:00', + }; + const customFields = [customField]; + // Map columns with custom field + const map = formBodyToBlocksFactory(colorDefinitions, fontSizeDefinitions, customFields); + const [columns] = map([columnsWithCustomField]); + const firstColumn = columns.innerBlocks[0]; + expect(firstColumn.innerBlocks.length).to.be.equal(1); + const customFieldBlock = firstColumn.innerBlocks[0]; + checkBlockBasics(customFieldBlock); + expect(customFieldBlock.name).includes('mailpoet-form/custom-text-'); + }); });