diff --git a/assets/js/src/form_editor/blocks/divider/edit.tsx b/assets/js/src/form_editor/blocks/divider/edit.tsx index fcc8a9e610..2701efc834 100644 --- a/assets/js/src/form_editor/blocks/divider/edit.tsx +++ b/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 = ( <> (setAttributes({ style }))} options={[ { value: Style.Solid, label: MailPoet.I18n.t('blockDividerStyleSolid') }, @@ -44,20 +36,20 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => { /> { setAttributes({ dividerHeight, - height: Math.max(dividerHeight, attributeHeight), + height: Math.max(dividerHeight, attributes.height), }); }} /> { /> (setAttributes({ color }))} /> ); const dividerStyles = {} as React.CSSProperties; - if (attributeType === Types.Divider) { - dividerStyles.borderTopStyle = attributeStyle; - dividerStyles.borderTopWidth = attributeDividerHeight; - dividerStyles.borderTopColor = attributeColor; - dividerStyles.height = attributeDividerHeight; - dividerStyles.width = `${attributeDividerWidth}%`; + if (attributes.type === Types.Divider) { + dividerStyles.borderTopStyle = attributes.style; + dividerStyles.borderTopWidth = attributes.dividerHeight; + dividerStyles.borderTopColor = attributes.color; + dividerStyles.height = attributes.dividerHeight; + dividerStyles.width = `${attributes.dividerWidth}%`; } return ( @@ -87,7 +79,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => { { /> setAttributes({ type: checked ? Types.Divider : Types.Spacer, })} /> {( - (attributeType === Types.Divider) && (dividerSettings) + (attributes.type === Types.Divider) && (dividerSettings) )} @@ -110,7 +102,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
(`${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), - type: item.params?.type, - style: item.params?.style, - dividerHeight: asNum(item.params?.divider_height), - dividerWidth: asNum(item.params?.divider_width), - color: item.params?.color, + height: asNum(item.params?.height ?? dividerDefaultAttributes.height), + type: item.params?.type ?? dividerDefaultAttributes.type, + style: item.params?.style ?? dividerDefaultAttributes.style, + dividerHeight: asNum( + item.params?.divider_height ?? dividerDefaultAttributes.dividerHeight + ), + dividerWidth: asNum( + item.params?.divider_width ?? dividerDefaultAttributes.dividerWidth + ), + color: item.params?.color ?? dividerDefaultAttributes.color, }, }; case 'html':