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