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,

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { partial } from 'lodash';
 import blocksToFormBodyFactory from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
 import {
   emailBlock,
@@ -22,6 +23,7 @@ import {
 import {
   fontSizeDefinitions,
   colorDefinitions,
+  gradientDefinitions,
 } from './editor_settings';
 
 const checkBodyInputBasics = (input) => {
@@ -30,7 +32,13 @@ const checkBodyInputBasics = (input) => {
   expect(input.type).to.be.not.empty;
 };
 
-const formBlocksToBody = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, []);
+const getMapper = partial(
+  blocksToFormBodyFactory,
+  fontSizeDefinitions,
+  colorDefinitions,
+  gradientDefinitions,
+);
+const formBlocksToBody = getMapper([]);
 
 describe('Blocks to Form Body', () => {
   it('Should throw an error for wrong input', () => {
@@ -265,7 +273,7 @@ describe('Blocks to Form Body', () => {
       type: 'text',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]);
+    const map = getMapper([customField]);
     const [input] = map([customTextBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('1');
@@ -293,7 +301,7 @@ describe('Blocks to Form Body', () => {
       updated_at: '2019-12-10T15:05:06+00:00',
     };
 
-    const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]);
+    const map = getMapper([customField]);
     const [input] = map([customSelectBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('6');
@@ -320,7 +328,7 @@ describe('Blocks to Form Body', () => {
       type: 'radio',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
+    const map = getMapper([customField]);
     const [input] = map([customRadioBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('2');
@@ -507,7 +515,7 @@ describe('Blocks to Form Body', () => {
       updated_at: '2019-12-13T15:22:07+00:00',
     };
 
-    const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
+    const map = getMapper([customField]);
     const [input] = map([customCheckBox]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('3');
@@ -536,7 +544,7 @@ describe('Blocks to Form Body', () => {
       updated_at: '2019-12-13T15:22:07+00:00',
     };
 
-    const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
+    const map = getMapper([customField]);
     const [input] = map([customDateBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('6');
@@ -609,6 +617,25 @@ describe('Blocks to Form Body', () => {
     expect(mapped2.params.background_color).to.be.equal('#bbbbbb');
   });
 
+  it('Should map gradient for columns', () => {
+    const columns = { ...nestedColumns };
+    columns.attributes = {
+      gradient: 'black-white',
+    };
+    const [mapped] = formBlocksToBody([columns]);
+    expect(mapped.params.gradient).to.be.equal('linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)');
+
+    columns.attributes = {
+      style: {
+        color: {
+          gradient: 'linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)',
+        },
+      },
+    };
+    const [mapped2] = formBlocksToBody([columns]);
+    expect(mapped2.params.gradient).to.be.equal('linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)');
+  });
+
   it('Should map class names', () => {
     const columns = { ...nestedColumns };
     columns.attributes = {
@@ -653,7 +680,7 @@ describe('Blocks to Form Body', () => {
     };
     const customText = { ...customTextBlock };
     customText.attributes.className = 'my-class-4';
-    const map = blocksToFormBodyFactory(colorDefinitions, [], [customField]);
+    const map = getMapper([customField]);
     const [mappedCustomText] = map([customText]);
     expect(mappedCustomText.params.class_name).to.be.equal('my-class-4');
   });

tests/javascript/form_editor/store/editor_settings.ts

@@ -1,6 +1,7 @@
 import {
   ColorDefinition,
   FontSizeDefinition,
+  GradientDefinition,
 } from '../../../../assets/js/src/form_editor/store/form_data_types';
 
 export const colorDefinitions: ColorDefinition[] = [{
@@ -13,6 +14,16 @@ export const colorDefinitions: ColorDefinition[] = [{
   color: '#ffffff',
 }];
 
+export const gradientDefinitions: GradientDefinition[] = [{
+  name: 'Black White',
+  slug: 'black-white',
+  gradient: 'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%)',
+}, {
+  name: 'White Black',
+  slug: 'white-black',
+  gradient: 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%)',
+}];
+
 export const fontSizeDefinitions: FontSizeDefinition[] = [
   { name: 'Small', size: 13, slug: 'small' },
   { name: 'Normal', size: 16, slug: 'normal' },