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

Save paragraph block to server

Browse Source 
[MAILPOET-2614]
This commit is contained in:
Pavel Dohnal
2020-03-18 13:29:29 +01:00
committed by Veljko V
parent b7aa1b9f3d
commit 718bc278f9
6 changed files with 110 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
View File

@@ -35,6 +35,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
},
[]
);
return (
<Panel>
<PanelBody

8
assets/js/src/form_editor/components/preview.jsx
View File

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

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

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

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

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

11
tests/javascript/form_editor/store/block_to_form_test_data.js
View File

@@ -187,6 +187,17 @@ export const headingBlock = {
},
};
export const paragraphBlock = {
clientId: '895d5bfd-9fef-4b58-83be-7259a7375785',
name: 'core/paragraph',
isValid: true,
attributes: {
content: 'content',
dropCap: true,
align: 'center',
},
};
export const nestedColumns = {
clientId: 'columns-1',
name: 'core/columns',

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

@@ -15,6 +15,7 @@ import {
dividerBlock,
nestedColumns,
headingBlock,
paragraphBlock,
} from './block_to_form_test_data.js';
const colorDefinitions = [{
@@ -27,13 +28,18 @@ const colorDefinitions = [{
color: '#ffffff',
}];
const fontSizeDefinitions = [
{ name: 'Small', size: 13, slug: 'small' },
{ name: 'Normal', size: 16, slug: 'normal' },
];
const checkBodyInputBasics = (input) => {
expect(input.id).to.be.a('string');
expect(input.type).to.be.a('string');
expect(input.type).to.be.not.empty;
};
const formBlocksToBody = blocksToFormBodyFactory(colorDefinitions, []);
const formBlocksToBody = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, []);
describe('Blocks to Form Body', () => {
it('Should throw an error for wrong input', () => {
@@ -210,7 +216,7 @@ describe('Blocks to Form Body', () => {
type: 'text',
updated_at: '2019-12-10T15:05:06+00:00',
};
const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]);
const [input] = map([customTextBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('1');
@@ -238,7 +244,7 @@ describe('Blocks to Form Body', () => {
updated_at: '2019-12-10T15:05:06+00:00',
};
const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
const map = blocksToFormBodyFactory(colorDefinitions, fontSizeDefinitions, [customField]);
const [input] = map([customSelectBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('6');
@@ -265,7 +271,7 @@ describe('Blocks to Form Body', () => {
type: 'radio',
updated_at: '2019-12-10T15:05:06+00:00',
};
const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
const [input] = map([customRadioBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('2');
@@ -279,6 +285,40 @@ describe('Blocks to Form Body', () => {
expect(input.params.values[1]).to.have.property('value', 'option 2');
});
it('Should map paragraph block', () => {
const [input] = formBlocksToBody([paragraphBlock]);
expect(input.type).to.be.equal('paragraph');
expect(input.id).to.be.a('string');
expect(input.params.content).to.be.equal('content');
expect(input.params.drop_cap).to.be.equal('1');
expect(input.params.align).to.be.equal('center');
});
it('Should map font size in paragraph block', () => {
const [input] = formBlocksToBody([
{
...paragraphBlock,
attributes: {
fontSize: 'small',
},
},
]);
expect(input.params.font_size).to.be.equal(13);
});
it('Should map custom font size in paragraph block', () => {
const [input] = formBlocksToBody([
{
...paragraphBlock,
attributes: {
fontSize: undefined,
customFontSize: 37,
},
},
]);
expect(input.params.font_size).to.be.equal(37);
});
it('Should map minimal heading block', () => {
const [input] = formBlocksToBody([headingBlock]);
expect(input.type).to.be.equal('heading');
@@ -329,7 +369,7 @@ describe('Blocks to Form Body', () => {
updated_at: '2019-12-13T15:22:07+00:00',
};
const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
const [input] = map([customCheckBox]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('3');
@@ -358,7 +398,7 @@ describe('Blocks to Form Body', () => {
updated_at: '2019-12-13T15:22:07+00:00',
};
const map = blocksToFormBodyFactory(colorDefinitions, [customField]);
const map = blocksToFormBodyFactory(colorDefinitions, blocksToFormBodyFactory, [customField]);
const [input] = map([customDateBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('6');