diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx index 2672adb990..fce30a63ed 100644 --- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx +++ b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx @@ -35,6 +35,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => { }, [] ); + return ( { ); const loadFormPreviewFromServer = useCallback(() => { - const blocksToFormBody = blocksToFormBodyFactory(editorSettings.colors, customFields); + const blocksToFormBody = blocksToFormBodyFactory( + editorSettings.colors, + editorSettings.fontSizes, + customFields + ); MailPoet.Ajax.post({ api_version: window.mailpoet_api_version, endpoint: 'forms', @@ -54,7 +58,7 @@ const FormPreview = () => { }).done((response) => { setForm(response.data); }); - }, [formBlocks, customFields, settings, editorSettings.colors]); + }, [formBlocks, customFields, settings, editorSettings.colors, editorSettings.fontSizes]); useEffect(() => { if (isPreview) { 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 9c93b3a1ed..7ca4daca9a 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 @@ -93,15 +93,28 @@ export const mapColorSlugToValue = (colorDefinitions, colorSlug, colorValue = nu return result ? result.color : colorValue; }; +/** + * @param {Array.<{name: string, slug: string, size: number}>} fontSizeDefinitions + * @param {string} sizeSlug + * @param {string|null} sizeValue + */ +export const mapFontSizeSlugToValue = (fontSizeDefinitions, sizeSlug, sizeValue = null) => { + const result = fontSizeDefinitions.find((size) => size.slug === sizeSlug); + return result ? result.size : sizeValue; +}; + /** * Factory for block to form data mapper * @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 */ -export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => { + +export const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, customFields) => { if (!Array.isArray(customFields)) { throw new Error('Mapper expects customFields to be an array.'); } + /** * @param blocks * @param parent - parent block of nested block @@ -145,6 +158,32 @@ export const blocksToFormBodyFactory = (colorDefinitions, customFields = []) => class_name: block.attributes.className || null, }, }; + case 'core/paragraph': + return { + type: 'paragraph', + id: 'paragraph', + params: { + content: block.attributes.content, + drop_cap: block.attributes.dropCap ? '1' : '0', + align: block.attributes.align || 'left', + font_size: mapFontSizeSlugToValue( + fontSizeDefinitions, + block.attributes.fontSize, + block.attributes.customFontSize + ), + text_color: mapColorSlugToValue( + colorDefinitions, + block.attributes.textColor, + block.attributes.customTextColor + ), + background_color: mapColorSlugToValue( + colorDefinitions, + block.attributes.backgroundColor, + block.attributes.customBackgroundColor + ), + class_name: block.attributes.className || null, + }, + }; case 'core/column': return { type: 'column', diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx index 108c8cfdef..19201b8a27 100644 --- a/assets/js/src/form_editor/store/controls.jsx +++ b/assets/js/src/form_editor/store/controls.jsx @@ -41,7 +41,12 @@ export default { const formBlocks = select('mailpoet-form-editor').getFormBlocks(); const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields(); const { getSettings } = select('core/block-editor'); - const blocksToFormBody = blocksToFormBodyFactory(getSettings().colors, customFields); + const settings = getSettings(); + const blocksToFormBody = blocksToFormBodyFactory( + settings.colors, + settings.fontSizes, + customFields + ); const requestData = { ...mapFormDataBeforeSaving(formData), body: blocksToFormBody(formBlocks), 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 2dd943967f..38e92efdff 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 @@ -187,6 +187,17 @@ export const headingBlock = { }, }; +export const paragraphBlock = { + clientId: '895d5bfd-9fef-4b58-83be-7259a7375785', + name: 'core/paragraph', + isValid: true, + attributes: { + content: 'content', + dropCap: true, + align: 'center', + }, +}; + 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 358b2cc056..fa108702ea 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 @@ -15,6 +15,7 @@ import { dividerBlock, nestedColumns, headingBlock, + paragraphBlock, } from './block_to_form_test_data.js'; const colorDefinitions = [{ @@ -27,13 +28,18 @@ const colorDefinitions = [{ color: '#ffffff', }]; +const fontSizeDefinitions = [ + { name: 'Small', size: 13, slug: 'small' }, + { name: 'Normal', size: 16, slug: 'normal' }, +]; + const checkBodyInputBasics = (input) => { expect(input.id).to.be.a('string'); expect(input.type).to.be.a('string'); expect(input.type).to.be.not.empty; }; -const formBlocksToBody = blocksToFormBodyFactory(colorDefinitions, []); +const formBlocksToBody = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, []); describe('Blocks to Form Body', () => { it('Should throw an error for wrong input', () => { @@ -210,7 +216,7 @@ describe('Blocks to Form Body', () => { type: 'text', updated_at: '2019-12-10T15:05:06+00:00', }; - const map = blocksToFormBodyFactory(colorDefinitions, [customField]); + const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]); const [input] = map([customTextBlock]); checkBodyInputBasics(input); expect(input.id).to.be.equal('1'); @@ -238,7 +244,7 @@ describe('Blocks to Form Body', () => { updated_at: '2019-12-10T15:05:06+00:00', }; - const map = blocksToFormBodyFactory(colorDefinitions, [customField]); + const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]); const [input] = map([customSelectBlock]); checkBodyInputBasics(input); expect(input.id).to.be.equal('6'); @@ -265,7 +271,7 @@ describe('Blocks to Form Body', () => { type: 'radio', updated_at: '2019-12-10T15:05:06+00:00', }; - const map = blocksToFormBodyFactory(colorDefinitions, [customField]); + const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]); const [input] = map([customRadioBlock]); checkBodyInputBasics(input); expect(input.id).to.be.equal('2'); @@ -279,6 +285,40 @@ describe('Blocks to Form Body', () => { expect(input.params.values[1]).to.have.property('value', 'option 2'); }); + it('Should map paragraph block', () => { + const [input] = formBlocksToBody([paragraphBlock]); + expect(input.type).to.be.equal('paragraph'); + expect(input.id).to.be.a('string'); + expect(input.params.content).to.be.equal('content'); + expect(input.params.drop_cap).to.be.equal('1'); + expect(input.params.align).to.be.equal('center'); + }); + + it('Should map font size in paragraph block', () => { + const [input] = formBlocksToBody([ + { + ...paragraphBlock, + attributes: { + fontSize: 'small', + }, + }, + ]); + expect(input.params.font_size).to.be.equal(13); + }); + + it('Should map custom font size in paragraph block', () => { + const [input] = formBlocksToBody([ + { + ...paragraphBlock, + attributes: { + fontSize: undefined, + customFontSize: 37, + }, + }, + ]); + expect(input.params.font_size).to.be.equal(37); + }); + it('Should map minimal heading block', () => { const [input] = formBlocksToBody([headingBlock]); expect(input.type).to.be.equal('heading'); @@ -329,7 +369,7 @@ describe('Blocks to Form Body', () => { updated_at: '2019-12-13T15:22:07+00:00', }; - const map = blocksToFormBodyFactory(colorDefinitions, [customField]); + const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]); const [input] = map([customCheckBox]); checkBodyInputBasics(input); expect(input.id).to.be.equal('3'); @@ -358,7 +398,7 @@ describe('Blocks to Form Body', () => { updated_at: '2019-12-13T15:22:07+00:00', }; - const map = blocksToFormBodyFactory(colorDefinitions, [customField]); + const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]); const [input] = map([customDateBlock]); checkBodyInputBasics(input); expect(input.id).to.be.equal('6');