Use block editor's color settings for block colors mapping

[MAILPOET-2754]

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

@@ -60,12 +60,27 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
 };
 
 /**
- * Transforms blocks to form.body data structure.
+ * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
- * @param blocks - blocks representation taken from @wordpress/block-editor
+ * @param {string} colorSlug
- * @param customFields - list of all custom Fields
+ * @param {string} colorValue
- * @param parent - parent block of nested block
  */
-const mapBlocks = (blocks, customFields = [], parent = null) => {
+const mapColor = (colorDefinitions, colorSlug, colorValue = null) => {
+  const result = colorDefinitions.find((color) => color.slug === colorSlug);
+  return result ? result.color : colorValue;
+};
+
+/**
+ * Factory for block to form data mapper
+ * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
+ * @param customFields - list of all custom Fields
+ */
+export default (colorDefinitions, customFields = []) => {
+  /**
+   * @param blocks
+   * @param parent  - parent block of nested block
+   * @returns {*}
+   */
+  const mapBlocks = (blocks, parent = null) => {
     if (!Array.isArray(blocks)) {
       throw new Error('Mapper expects blocks to be an array.');
     }
@@ -100,20 +115,26 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
               width: block.attributes.width
                 ? block.attributes.width : Math.round(100 / childrenCount),
             },
-          body: mapBlocks(block.innerBlocks, customFields, block),
+            body: mapBlocks(block.innerBlocks, block),
           };
         case 'core/columns':
           return {
             position: (index + 1).toString(),
             type: 'columns',
-          body: mapBlocks(block.innerBlocks, customFields, block),
+            body: mapBlocks(block.innerBlocks, block),
             params: {
               vertical_alignment: block.attributes.verticalAlignment || null,
               class_name: block.attributes.className || null,
-            text_color: block.attributes.textColor || null,
+              text_color: mapColor(
-            background_color: block.attributes.backgroundColor || null,
+                colorDefinitions,
-            custom_text_color: block.attributes.customTextColor || null,
+                block.attributes.textColor,
-            custom_background_color: block.attributes.customBackgroundColor || null,
+                block.attributes.customTextColor
+              ),
+              background_color: mapColor(
+                colorDefinitions,
+                block.attributes.backgroundColor,
+                block.attributes.customBackgroundColor
+              ),
             },
           };
         case 'mailpoet-form/email-input':
@@ -195,5 +216,5 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
       }
     }).filter(Boolean);
   };
-
+  return mapBlocks;
-export default mapBlocks;
+};

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

@@ -2,7 +2,7 @@ import { select, dispatch } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 import { merge } from 'lodash';
 import { createBlock, unregisterBlockType } from '@wordpress/blocks';
-import blocksToFormBody from './blocks_to_form_body.jsx';
+import blocksToFormBodyFactory from './blocks_to_form_body.jsx';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
 import getCustomFieldBlockSettings from '../blocks/custom_fields_blocks.jsx';
 import { registerCustomFieldBlock } from '../blocks/blocks.jsx';
@@ -31,9 +31,11 @@ export default {
     const formData = select('mailpoet-form-editor').getFormData();
     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 requestData = {
       ...mapFormDataBeforeSaving(formData),
-      body: blocksToFormBody(formBlocks, customFields),
+      body: blocksToFormBody(formBlocks),
       editor_version: 2,
     };
     MailPoet.Ajax.post({

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

@@ -57,15 +57,27 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
   return mapped;
 };
 
-const mapColumnBlocks = (data, customFields = []) => {
+/**
+ * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
+ * @param {string} colorValue
+ */
+const mapColorSlug = (colorDefinitions, colorValue) => {
+  const result = colorDefinitions.find((color) => color.color === colorValue);
+  return result ? result.slug : undefined;
+};
+
+const mapColumnBlocks = (data, colorDefinitions, customFields = []) => {
+  // eslint-disable-next-line no-use-before-define
+  const mapFormBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, customFields);
   const mapped = {
     clientId: generateId(),
     name: `core/${data.type}`,
     isValid: true,
     attributes: {},
-    // eslint-disable-next-line no-use-before-define
+    innerBlocks: mapFormBodyToBlocks(data.body ? data.body : []),
-    innerBlocks: formBodyToBlocks(data.body ? data.body : [], customFields),
   };
+  const textColorSlug = mapColorSlug(colorDefinitions, data.params.text_color);
+  const backgroundColorSlug = mapColorSlug(colorDefinitions, data.params.background_color);
   if (has(data.params, 'width')) {
     mapped.attributes.width = parseFloat(data.params.width);
   }
@@ -73,16 +85,13 @@ const mapColumnBlocks = (data, customFields = []) => {
     mapped.attributes.verticalAlignment = data.params.vertical_alignment;
   }
   if (has(data.params, 'text_color')) {
-    mapped.attributes.textColor = data.params.text_color;
+    mapped.attributes.textColor = textColorSlug;
-  }
+    mapped.attributes.customTextColor = !textColorSlug ? data.params.text_color : undefined;
-  if (has(data.params, 'custom_text_color')) {
-    mapped.attributes.customTextColor = data.params.custom_text_color;
   }
   if (has(data.params, 'background_color')) {
-    mapped.attributes.backgroundColor = data.params.background_color;
+    mapped.attributes.backgroundColor = backgroundColorSlug;
-  }
+    mapped.attributes.customBackgroundColor = !backgroundColorSlug
-  if (has(data.params, 'custom_background_color')) {
+      ? data.params.background_color : undefined;
-    mapped.attributes.customBackgroundColor = data.params.custom_background_color;
   }
   if (has(data.params, 'class_name') && data.params.class_name) {
     mapped.attributes.className = data.params.class_name;
@@ -91,21 +100,27 @@ const mapColumnBlocks = (data, customFields = []) => {
 };
 
 /**
- * Transforms form body items to array of blocks which can be passed to block editor.
+ * Factory for form data to blocks mapper
- * @param {array} data - from form.body property
+ * @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
- * @param {array} customFields - list of all custom fields
+ * @param customFields - list of all custom Fields
  */
-export const formBodyToBlocks = (data, customFields = []) => {
+export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => {
-  if (!Array.isArray(data)) {
-    throw new Error('Mapper expects form body to be an array.');
-  }
   if (!Array.isArray(customFields)) {
     throw new Error('Mapper expects customFields to be an array.');
   }
 
+  /**
+   * Transforms form body items to array of blocks which can be passed to block editor.
+   * @param {array} data - from form.body property
+   */
+  const formBodyToBlocks = (data) => {
+    if (!Array.isArray(data)) {
+      throw new Error('Mapper expects form body to be an array.');
+    }
+
     return data.map((item, index) => {
       if (['column', 'columns'].includes(item.type)) {
-      return mapColumnBlocks(item, customFields);
+        return mapColumnBlocks(item, colorDefinitions, customFields);
       }
 
       const mapped = {
@@ -189,3 +204,6 @@ export const formBodyToBlocks = (data, customFields = []) => {
       }
     }).filter(Boolean);
   };
+
+  return formBodyToBlocks;
+};

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

@@ -3,17 +3,23 @@
  * @see https://developer.wordpress.org/block-editor/packages/packages-data/
  */
 import { registerStore } from '@wordpress/data';
+import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
 import * as actions from './actions.jsx';
 import createReducer from './reducer.jsx';
 import selectors from './selectors.jsx';
 import controls from './controls.jsx';
 import validateForm from './form_validator.jsx';
-import { formBodyToBlocks } from './form_body_to_blocks.jsx';
+import { formBodyToBlocksFactory } from './form_body_to_blocks.jsx';
 import mapFormDataAfterLoading from './map_form_data_after_loading.jsx';
 
+const formBodyToBlocks = formBodyToBlocksFactory(
+  SETTINGS_DEFAULTS.colors,
+  window.mailpoet_custom_fields
+);
+
 export default () => {
   const formData = { ...window.mailpoet_form_data };
-  const formBlocks = formBodyToBlocks(formData.body, window.mailpoet_custom_fields);
+  const formBlocks = formBodyToBlocks(formData.body);
   delete formData.body;
   const dateSettingData = {
     dateTypes: window.mailpoet_date_types,

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

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import formBlocksToBody from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
+import formBlocksToBodyFactory from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
 import {
   emailBlock,
   lastNameBlock,
@@ -16,6 +16,16 @@ import {
   nestedColumns,
 } from './block_to_form_test_data.js';
 
+const colorDefinitions = [{
+  name: 'Black',
+  slug: 'black',
+  color: '#000000',
+}, {
+  name: 'White',
+  slug: 'white',
+  color: '#ffffff',
+}];
+
 const checkBodyInputBasics = (input) => {
   expect(input.id).to.be.a('string');
   expect(parseInt(input.position, 10)).to.be.a('number');
@@ -23,6 +33,8 @@ const checkBodyInputBasics = (input) => {
   expect(input.type).to.be.not.empty;
 };
 
+const formBlocksToBody = formBlocksToBodyFactory(colorDefinitions, []);
+
 describe('Blocks to Form Body', () => {
   it('Should throw an error for wrong input', () => {
     const error = 'Mapper expects blocks to be an array.';
@@ -174,7 +186,8 @@ describe('Blocks to Form Body', () => {
       type: 'text',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const [input] = formBlocksToBody([customTextBlock], [customField]);
+    const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
+    const [input] = map([customTextBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('1');
     expect(input.name).to.be.equal('Custom Field name');
@@ -201,7 +214,8 @@ describe('Blocks to Form Body', () => {
       type: 'select',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const [input] = formBlocksToBody([customSelectBlock], [customField]);
+    const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
+    const [input] = map([customSelectBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('6');
     expect(input.name).to.be.equal('Custom Select');
@@ -229,7 +243,8 @@ describe('Blocks to Form Body', () => {
       type: 'radio',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const [input] = formBlocksToBody([customRadioBlock], [customField]);
+    const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
+    const [input] = map([customRadioBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('2');
     expect(input.name).to.be.equal('Custom Field name');
@@ -259,7 +274,8 @@ describe('Blocks to Form Body', () => {
       type: 'checkbox',
       updated_at: '2019-12-13T15:22:07+00:00',
     };
-    const [input] = formBlocksToBody([customCheckBox], [customField]);
+    const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
+    const [input] = map([customCheckBox]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('3');
     expect(input.name).to.be.equal('Custom Checkbox');
@@ -288,7 +304,8 @@ describe('Blocks to Form Body', () => {
       type: 'date',
       updated_at: '2019-12-13T15:22:07+00:00',
     };
-    const [input] = formBlocksToBody([customDateBlock], [customField]);
+    const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
+    const [input] = map([customDateBlock]);
     checkBodyInputBasics(input);
     expect(input.id).to.be.equal('6');
     expect(input.name).to.be.equal('Custom Date');
@@ -343,16 +360,20 @@ describe('Blocks to Form Body', () => {
   it('Should map colors for columns', () => {
     const columns = { ...nestedColumns };
     columns.attributes = {
-      textColor: 'vivid-red',
+      textColor: 'black',
       backgroundColor: 'white',
-      customBackgroundColor: '#ffffff',
-      customTextColor: '#dd0000',
     };
     const [mapped] = formBlocksToBody([columns]);
-    expect(mapped.params.text_color).to.be.equal('vivid-red');
+    expect(mapped.params.text_color).to.be.equal('#000000');
-    expect(mapped.params.background_color).to.be.equal('white');
+    expect(mapped.params.background_color).to.be.equal('#ffffff');
-    expect(mapped.params.custom_background_color).to.be.equal('#ffffff');
+
-    expect(mapped.params.custom_text_color).to.be.equal('#dd0000');
+    columns.attributes = {
+      customTextColor: '#aaaaaa',
+      customBackgroundColor: '#bbbbbb',
+    };
+    const [mapped2] = formBlocksToBody([columns]);
+    expect(mapped2.params.text_color).to.be.equal('#aaaaaa');
+    expect(mapped2.params.background_color).to.be.equal('#bbbbbb');
   });
 
   it('Should map class name for columns and column', () => {

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

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { formBodyToBlocks } from '../../../../assets/js/src/form_editor/store/form_body_to_blocks.jsx';
+import { formBodyToBlocksFactory } from '../../../../assets/js/src/form_editor/store/form_body_to_blocks.jsx';
 
 import {
   emailInput,
@@ -17,6 +17,18 @@ import {
   nestedColumns,
 } from './form_to_block_test_data.js';
 
+const colorDefinitions = [{
+  name: 'Black',
+  slug: 'black',
+  color: '#000000',
+}, {
+  name: 'White',
+  slug: 'white',
+  color: '#ffffff',
+}];
+
+const formBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, []);
+
 const checkBlockBasics = (block) => {
   expect(block.clientId).to.be.a('string');
   expect(block.name).to.be.a('string');
@@ -36,10 +48,10 @@ describe('Form Body To Blocks', () => {
 
   it('Should throw an error for wrong custom fields input', () => {
     const error = 'Mapper expects customFields to be an array.';
-    expect(() => formBodyToBlocks([], null)).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], null)).to.throw(error);
-    expect(() => formBodyToBlocks([], 'hello')).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], 'hello')).to.throw(error);
-    expect(() => formBodyToBlocks([], () => {})).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], () => {})).to.throw(error);
-    expect(() => formBodyToBlocks([], 1)).to.throw(error);
+    expect(() => formBodyToBlocksFactory([], 1)).to.throw(error);
   });
 
   it('Should map email input to block', () => {
@@ -177,7 +189,8 @@ describe('Form Body To Blocks', () => {
       type: 'text',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const [block] = formBodyToBlocks([{ ...customTextInput, position: '1' }], [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [block] = map([{ ...customTextInput, position: '1' }]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.equal('1_0');
     expect(block.name).to.be.equal('mailpoet-form/custom-text-customfieldname');
@@ -204,7 +217,8 @@ describe('Form Body To Blocks', () => {
       type: 'radio',
       updated_at: '2019-12-10T15:05:06+00:00',
     };
-    const [block] = formBodyToBlocks([{ ...customRadioInput, position: '1' }], [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [block] = map([{ ...customRadioInput, position: '1' }]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.equal('3_0');
     expect(block.name).to.be.equal('mailpoet-form/custom-radio-name');
@@ -233,7 +247,8 @@ describe('Form Body To Blocks', () => {
       },
       position: null,
     };
-    const [block] = formBodyToBlocks([{ ...customCheckboxInput, position: '1' }], [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [block] = map([{ ...customCheckboxInput, position: '1' }]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.equal('4_0');
     expect(block.name).to.be.equal('mailpoet-form/custom-checkbox-customcheck');
@@ -261,7 +276,8 @@ describe('Form Body To Blocks', () => {
       },
       position: null,
     };
-    const [block] = formBodyToBlocks([{ ...customSelectInput, position: '1' }], [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [block] = map([{ ...customSelectInput, position: '1' }]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.equal('5_0');
     expect(block.name).to.be.equal('mailpoet-form/custom-select-customselect');
@@ -286,7 +302,8 @@ describe('Form Body To Blocks', () => {
       type: 'date',
       updated_at: '2019-12-13T15:22:07+00:00',
     };
-    const [block] = formBodyToBlocks([{ ...customDateInput, position: '1' }], [customField]);
+    const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
+    const [block] = map([{ ...customDateInput, position: '1' }]);
     checkBlockBasics(block);
     expect(block.clientId).to.be.equal('6_0');
     expect(block.name).to.be.equal('mailpoet-form/custom-date-customdate');
@@ -345,16 +362,24 @@ describe('Form Body To Blocks', () => {
   it('Should map columns colors', () => {
     const nested = { ...nestedColumns, position: '1' };
     nested.params = {
-      text_color: 'vivid-red',
+      text_color: '#ffffff',
-      background_color: 'white',
+      background_color: '#000000',
-      custom_text_color: '#dd0000',
-      custom_background_color: '#ffffff',
     };
     const [block] = formBodyToBlocks([nested]);
-    expect(block.attributes.textColor).to.be.equal('vivid-red');
+    expect(block.attributes.textColor).to.be.equal('white');
-    expect(block.attributes.backgroundColor).to.be.equal('white');
+    expect(block.attributes.backgroundColor).to.be.equal('black');
-    expect(block.attributes.customTextColor).to.be.equal('#dd0000');
+    expect(block.attributes.customTextColor).to.be.undefined;
-    expect(block.attributes.customBackgroundColor).to.be.equal('#ffffff');
+    expect(block.attributes.customBackgroundColor).to.be.undefined;
+
+    nested.params = {
+      text_color: '#aaaaaa',
+      background_color: '#bbbbbb',
+    };
+    const [block2] = formBodyToBlocks([nested]);
+    expect(block2.attributes.textColor).to.be.undefined;
+    expect(block2.attributes.backgroundColor).to.be.undefined;
+    expect(block2.attributes.customTextColor).to.be.equal('#aaaaaa');
+    expect(block2.attributes.customBackgroundColor).to.be.equal('#bbbbbb');
   });
 
   it('Should map class name', () => {

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -193,6 +193,7 @@ export const nestedColumns = {
         {
           position: '1',
           type: 'columns',
+          params: {},
           body: [
             {
               position: '1',