Save paragraph block to server

[MAILPOET-2614]

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -35,6 +35,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
     },
     []
   );
+
   return (
     <Panel>
       <PanelBody

assets/js/src/form_editor/components/preview.jsx

@@ -42,7 +42,11 @@ const FormPreview = () => {
   );
 
   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) {

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',

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),

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',

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');