Move default settings to block mapper

[MAILPOET-2835]

assets/js/src/form_editor/blocks/divider/edit.tsx

@@ -14,7 +14,6 @@ import {
   Attributes,
   Style,
   Types,
-  defaultAttributes,
 } from './divider';
 
 type Props = {
@@ -23,18 +22,11 @@ type Props = {
 };
 
 const DividerEdit = ({ attributes, setAttributes }: Props) => {
-  const attributeStyle = attributes.style ?? defaultAttributes.style;
-  const attributeDividerHeight = attributes.dividerHeight ?? defaultAttributes.dividerHeight;
-  const attributeDividerWidth = attributes.dividerWidth ?? defaultAttributes.dividerWidth;
-  const attributeHeight = attributes.height ?? defaultAttributes.height;
-  const attributeType = attributes.type ?? defaultAttributes.type;
-  const attributeColor = attributes.color ?? defaultAttributes.color;
-
   const dividerSettings = (
     <>
       <SelectControl
         label={MailPoet.I18n.t('blockDividerStyle')}
-        value={attributeStyle}
+        value={attributes.style}
         onChange={(style) => (setAttributes({ style }))}
         options={[
           { value: Style.Solid, label: MailPoet.I18n.t('blockDividerStyleSolid') },
@@ -44,20 +36,20 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
       />
       <RangeControl
         label={MailPoet.I18n.t('blockDividerDividerHeight')}
-        value={attributeDividerHeight}
+        value={attributes.dividerHeight}
         min={1}
         max={40}
         allowReset
         onChange={(dividerHeight) => {
           setAttributes({
             dividerHeight,
-            height: Math.max(dividerHeight, attributeHeight),
+            height: Math.max(dividerHeight, attributes.height),
           });
         }}
       />
       <RangeControl
         label={MailPoet.I18n.t('blockDividerDividerWidth')}
-        value={attributeDividerWidth}
+        value={attributes.dividerWidth}
         min={1}
         max={100}
         allowReset
@@ -65,19 +57,19 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
       />
       <ColorSettings
         name={MailPoet.I18n.t('blockDividerColor')}
-        value={attributeColor}
+        value={attributes.color}
         onChange={(color) => (setAttributes({ color }))}
       />
     </>
   );
 
   const dividerStyles = {} as React.CSSProperties;
-  if (attributeType === Types.Divider) {
+  if (attributes.type === Types.Divider) {
-    dividerStyles.borderTopStyle = attributeStyle;
+    dividerStyles.borderTopStyle = attributes.style;
-    dividerStyles.borderTopWidth = attributeDividerHeight;
+    dividerStyles.borderTopWidth = attributes.dividerHeight;
-    dividerStyles.borderTopColor = attributeColor;
+    dividerStyles.borderTopColor = attributes.color;
-    dividerStyles.height = attributeDividerHeight;
+    dividerStyles.height = attributes.dividerHeight;
-    dividerStyles.width = `${attributeDividerWidth}%`;
+    dividerStyles.width = `${attributes.dividerWidth}%`;
   }
 
   return (
@@ -87,7 +79,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
           <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} initialOpen>
             <RangeControl
               label={MailPoet.I18n.t('blockSpacerHeight')}
-              value={attributeHeight}
+              value={attributes.height}
               min={1}
               max={400}
               allowReset
@@ -95,13 +87,13 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
             />
             <ToggleControl
               label={MailPoet.I18n.t('blockSpacerEnableDivider')}
-              checked={attributeType === Types.Divider}
+              checked={attributes.type === Types.Divider}
               onChange={(checked) => setAttributes({
                 type: checked ? Types.Divider : Types.Spacer,
               })}
             />
             {(
-              (attributeType === Types.Divider) && (dividerSettings)
+              (attributes.type === Types.Divider) && (dividerSettings)
             )}
           </PanelBody>
         </Panel>
@@ -110,7 +102,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
       <div
         className={classnames('mailpoet_spacer', attributes.className)}
         style={{
-          height: attributeHeight,
+          height: attributes.height,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',

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

@@ -2,6 +2,7 @@
 import { has } from 'lodash';
 import asNum from './server_value_as_num';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
+import { defaultAttributes as dividerDefaultAttributes } from '../blocks/divider/divider';
 
 const generateId = () => (`${Math.random().toString()}-${Date.now()}`);
 
@@ -359,12 +360,16 @@ export const formBodyToBlocksFactory = (
             name: 'mailpoet-form/divider',
             attributes: {
               className: mapped.attributes.className,
-              height: asNum(item.params?.height),
+              height: asNum(item.params?.height ?? dividerDefaultAttributes.height),
-              type: item.params?.type,
+              type: item.params?.type ?? dividerDefaultAttributes.type,
-              style: item.params?.style,
+              style: item.params?.style ?? dividerDefaultAttributes.style,
-              dividerHeight: asNum(item.params?.divider_height),
+              dividerHeight: asNum(
-              dividerWidth: asNum(item.params?.divider_width),
+                item.params?.divider_height ?? dividerDefaultAttributes.dividerHeight
-              color: item.params?.color,
+              ),
+              dividerWidth: asNum(
+                item.params?.divider_width ?? dividerDefaultAttributes.dividerWidth
+              ),
+              color: item.params?.color ?? dividerDefaultAttributes.color,
             },
           };
         case 'html':