Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use block editor's color settings for block colors mapping

Browse Source 
[MAILPOET-2754]
This commit is contained in:
Rostislav Wolny
2020-03-11 10:25:01 +01:00
committed by Veljko V
parent 4ec53d2d52
commit 8a66fd1811
7 changed files with 364 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/js/src/form_editor/store/blocks_to_form_body.jsx
View File

@ -60,12 +60,27 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
};
/**
* Transforms blocks to form.body data structure.
* @param blocks - blocks representation taken from @wordpress/block-editor
* @param customFields - list of all custom Fields
* @param parent - parent block of nested block
* @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
* @param {string} colorSlug
* @param {string} colorValue
*/
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,
background_color: block.attributes.backgroundColor || null,
custom_text_color: block.attributes.customTextColor || null,
custom_background_color: block.attributes.customBackgroundColor || null,
text_color: mapColor(
colorDefinitions,
block.attributes.textColor,
block.attributes.customTextColor
),
background_color: mapColor(
colorDefinitions,
block.attributes.backgroundColor,
block.attributes.customBackgroundColor
),
},
};
case 'mailpoet-form/email-input':
@ -194,6 +215,6 @@ const mapBlocks = (blocks, customFields = [], parent = null) => {
return null;
}
}).filter(Boolean);
};
return mapBlocks;
};
export default mapBlocks;

6
assets/js/src/form_editor/store/controls.jsx
View File

@ -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({

56
assets/js/src/form_editor/store/form_body_to_blocks.jsx
View File

@ -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: formBodyToBlocks(data.body ? data.body : [], customFields),
innerBlocks: mapFormBodyToBlocks(data.body ? data.body : []),
};
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;
}
if (has(data.params, 'custom_text_color')) {
mapped.attributes.customTextColor = data.params.custom_text_color;
mapped.attributes.textColor = textColorSlug;
mapped.attributes.customTextColor = !textColorSlug ? data.params.text_color : undefined;
}
if (has(data.params, 'background_color')) {
mapped.attributes.backgroundColor = data.params.background_color;
}
if (has(data.params, 'custom_background_color')) {
mapped.attributes.customBackgroundColor = data.params.custom_background_color;
mapped.attributes.backgroundColor = backgroundColorSlug;
mapped.attributes.customBackgroundColor = !backgroundColorSlug
? data.params.background_color : undefined;
}
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.
* @param {array} data - from form.body property
* @param {array} customFields - list of all custom fields
* Factory for form data to blocks mapper
* @param {Array.<{name: string, slug: string, color: string}>} colorDefinitions
* @param customFields - list of all custom Fields
*/
export const formBodyToBlocks = (data, customFields = []) => {
if (!Array.isArray(data)) {
throw new Error('Mapper expects form body to be an array.');
}
export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) => {
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 = {
@ -188,4 +203,7 @@ export const formBodyToBlocks = (data, customFields = []) => {
return null;
}
}).filter(Boolean);
};
return formBodyToBlocks;
};

10
assets/js/src/form_editor/store/store.jsx
View File

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

47
tests/javascript/form_editor/store/blocks_to_form_body.spec.js
View File

@ -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.background_color).to.be.equal('white');
expect(mapped.params.custom_background_color).to.be.equal('#ffffff');
expect(mapped.params.custom_text_color).to.be.equal('#dd0000');
expect(mapped.params.text_color).to.be.equal('#000000');
expect(mapped.params.background_color).to.be.equal('#ffffff');
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', () => {

61
tests/javascript/form_editor/store/form_body_to_blocks.spec.js
View File

@ -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(() => formBodyToBlocks([], 'hello')).to.throw(error);
expect(() => formBodyToBlocks([], () => {})).to.throw(error);
expect(() => formBodyToBlocks([], 1)).to.throw(error);
expect(() => formBodyToBlocksFactory([], null)).to.throw(error);
expect(() => formBodyToBlocksFactory([], 'hello')).to.throw(error);
expect(() => formBodyToBlocksFactory([], () => {})).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',
background_color: 'white',
custom_text_color: '#dd0000',
custom_background_color: '#ffffff',
text_color: '#ffffff',
background_color: '#000000',
};
const [block] = formBodyToBlocks([nested]);
expect(block.attributes.textColor).to.be.equal('vivid-red');
expect(block.attributes.backgroundColor).to.be.equal('white');
expect(block.attributes.customTextColor).to.be.equal('#dd0000');
expect(block.attributes.customBackgroundColor).to.be.equal('#ffffff');
expect(block.attributes.textColor).to.be.equal('white');
expect(block.attributes.backgroundColor).to.be.equal('black');
expect(block.attributes.customTextColor).to.be.undefined;
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', () => {

1
tests/javascript/form_editor/store/form_to_block_test_data.js
View File

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