Add columns graditent mapping from blocks to server data

[MAILPOET-3005]

assets/js/src/form_editor/store/actions.jsx

@@ -154,8 +154,9 @@ export function* showPreview(formType = null) {
   const formData = select('mailpoet-form-editor').getFormData();
   const formBlocks = select('mailpoet-form-editor').getFormBlocks();
   const blocksToFormBody = blocksToFormBodyFactory(
-    editorSettings.colors,
     editorSettings.fontSizes,
+    editorSettings.colors,
+    editorSettings.gradients,
     customFields
   );
   const { success, error } = yield {

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -3,6 +3,7 @@ import {
   mapInputBlockStyles,
   mapColorSlugToValue,
   mapFontSizeSlugToValue,
+  mapGradientSlugToValue,
 } from './mapping/from_blocks/styles_mapper';
 
 const mapCustomField = (block, customFields, mappedCommonProperties) => {
@@ -67,11 +68,17 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
 
 /**
  * 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 {Array.<{name: string, slug: string, color: string}>} colorDefinitions
+ * @param {Array.<{name: string, slug: string, gradient: string}>} gradientDefinitions
  * @param customFields - list of all custom Fields
  */
-const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, customFields) => {
+const blocksToFormBodyFactory = (
+  fontSizeDefinitions,
+  colorDefinitions,
+  gradientDefinitions,
+  customFields
+) => {
   if (!Array.isArray(customFields)) {
     throw new Error('Mapper expects customFields to be an array.');
   }
@@ -208,6 +215,11 @@ const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, customFi
                 block.attributes.backgroundColor,
                 block.attributes.style?.color?.background
               ),
+              gradient: mapGradientSlugToValue(
+                gradientDefinitions,
+                block.attributes.gradient,
+                block.attributes.style?.color?.gradient
+              ),
             },
           };
         case 'mailpoet-form/email-input':

assets/js/src/form_editor/store/controls.jsx

@@ -45,8 +45,9 @@ export default {
     const { getSettings } = select('core/block-editor');
     const settings = getSettings();
     const blocksToFormBody = blocksToFormBodyFactory(
-      settings.colors,
       settings.fontSizes,
+      settings.colors,
+      settings.gradients,
       customFields
     );
     const requestData = {

assets/js/src/form_editor/store/mapping/from_blocks/styles_mapper.ts

@@ -4,6 +4,7 @@ import {
   InputBlockStylesServerData,
   FontSizeDefinition,
   ColorDefinition,
+  GradientDefinition,
 } from 'form_editor/store/form_data_types';
 
 export const mapInputBlockStyles = (styles: InputBlockStyles) => {
@@ -50,6 +51,15 @@ export const mapColorSlugToValue = (
   return result ? result.color : colorValue;
 };
 
+export const mapGradientSlugToValue = (
+  colorDefinitions: GradientDefinition[],
+  slug: string,
+  value: string = null
+): string => {
+  const result = colorDefinitions.find((color) => color.slug === slug);
+  return result ? result.gradient : value;
+};
+
 export const mapFontSizeSlugToValue = (
   fontSizeDefinitions: FontSizeDefinition[],
   sizeSlug: string,