Save and load divider attributes

[MAILPOET-2835]

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

@@ -298,6 +298,12 @@ export const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, c
             name: 'Divider',
             params: {
               class_name: block.attributes.className || null,
+              height: block.attributes.height,
+              type: block.attributes.type,
+              style: block.attributes.style,
+              divider_height: block.attributes.dividerHeight,
+              divider_width: block.attributes.dividerWidth,
+              color: block.attributes.color,
             },
           };
         case 'mailpoet-form/html':

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

@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 import { has } from 'lodash';
+import asNum from './server_value_as_num';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
 
 const generateId = () => (`${Math.random().toString()}-${Date.now()}`);
@@ -123,8 +124,8 @@ const mapColorSlug = (colorDefinitions, colorValue) => {
 const mapFontSizeSlug = (fontSizeDefinitions, fontSizeValue) => {
   let value = 0;
   if (fontSizeValue) {
-    value = parseInt(fontSizeValue, 10);
+    value = asNum(fontSizeValue);
-    if (Number.isNaN(value)) {
+    if (value === undefined) {
       value = 2;
     }
   }
@@ -255,8 +256,8 @@ export const formBodyToBlocksFactory = (
           };
         case 'heading':
           if (item.params && has(item.params, 'level')) {
-            level = parseInt(item.params.level, 10);
+            level = asNum(item.params.level);
-            if (Number.isNaN(level)) {
+            if (level === undefined) {
               level = 2;
             }
           }
@@ -356,6 +357,15 @@ export const formBodyToBlocksFactory = (
           return {
             ...mapped,
             name: 'mailpoet-form/divider',
+            attributes: {
+              className: mapped.attributes.className,
+              height: asNum(item.params?.height),
+              type: item.params?.type,
+              style: item.params?.style,
+              dividerHeight: asNum(item.params?.divider_height),
+              dividerWidth: asNum(item.params?.divider_width),
+              color: item.params?.color,
+            },
           };
         case 'html':
           return {

tests/javascript/form_editor/store/block_to_form_test_data.js

@@ -167,7 +167,15 @@ export const dividerBlock = {
   isValid: true,
   innerBlocks: [],
   name: 'mailpoet-form/divider',
-  attributes: {},
+  attributes: {
+    className: null,
+    height: 23,
+    type: 'divider',
+    style: 'solid',
+    dividerHeight: 34,
+    dividerWidth: 65,
+    color: 'red',
+  },
 };
 
 export const customHtmlBlock = {

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

@@ -233,7 +233,15 @@ describe('Blocks to Form Body', () => {
     expect(divider.id).to.be.equal('divider');
     expect(divider.name).to.be.equal('Divider');
     expect(divider.type).to.be.equal('divider');
-    expect(divider.params).to.deep.equal({ class_name: null });
+    expect(divider.params).to.deep.equal({
+      class_name: null,
+      color: 'red',
+      divider_height: 34,
+      divider_width: 65,
+      height: 23,
+      style: 'solid',
+      type: 'divider',
+    });
   });
 
   it('Should map multiple dividers', () => {

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

@@ -291,6 +291,17 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.label).to.be.equal('Subscribe!');
   });
 
+  it('Should map divider button to block', () => {
+    const [block] = formBodyToBlocks([divider]);
+    checkBlockBasics(block);
+    expect(block.attributes.height).to.be.equal(12);
+    expect(block.attributes.type).to.be.equal('spacer');
+    expect(block.attributes.style).to.be.equal('dotted');
+    expect(block.attributes.dividerHeight).to.be.equal(23);
+    expect(block.attributes.dividerWidth).to.be.equal(34);
+    expect(block.attributes.color).to.be.equal('red');
+  });
+
   it('Should map dividers to blocks', () => {
     const [block1, block2] = formBodyToBlocks([
       { ...divider },

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -169,7 +169,15 @@ export const divider = {
   id: 'divider',
   unique: '0',
   static: '0',
-  params: '',
+  params: {
+    class_name: null,
+    height: '12',
+    type: 'spacer',
+    style: 'dotted',
+    divider_height: '23',
+    divider_width: '34',
+    color: 'red',
+  },
   position: null,
 };