From fd65928c96679f8d9caf45a4d10f827ece6de5e2 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 28 Apr 2020 15:19:52 +0200
Subject: [PATCH] Add divider height and width

[MAILPOET-2835]
---
 .../src/form_editor/blocks/divider/edit.tsx   | 26 +++++++++++++++++--
 views/form/editor.html                        |  2 ++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form_editor/blocks/divider/edit.tsx b/assets/js/src/form_editor/blocks/divider/edit.tsx
index 8e1b8ae978..93bd34e0ec 100644
--- a/assets/js/src/form_editor/blocks/divider/edit.tsx
+++ b/assets/js/src/form_editor/blocks/divider/edit.tsx
@@ -29,14 +29,36 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
           { value: Style.Dotted, label: MailPoet.I18n.t('blockDividerStyleDotted') },
         ]}
       />
+      <RangeControl
+        label={MailPoet.I18n.t('blockDividerDividerHeight')}
+        value={attributes.dividerHeight}
+        min={1}
+        max={40}
+        allowReset
+        onChange={(dividerHeight) => {
+          setAttributes({
+            dividerHeight,
+            height: Math.max(dividerHeight, attributes.height),
+          });
+        }}
+      />
+      <RangeControl
+        label={MailPoet.I18n.t('blockDividerDividerWidth')}
+        value={attributes.dividerWidth}
+        min={1}
+        max={100}
+        allowReset
+        onChange={(dividerWidth) => (setAttributes({ dividerWidth }))}
+      />
     </>
   );
 
   const dividerStyles = {} as React.CSSProperties;
   if (attributes.type === Types.Divider) {
     dividerStyles.borderTopStyle = attributes.style;
-    dividerStyles.height = 1;
-    dividerStyles.width = '100%';
+    dividerStyles.borderTopWidth = attributes.dividerHeight;
+    dividerStyles.height = attributes.dividerHeight;
+    dividerStyles.width = `${attributes.dividerWidth}%`;
   }
 
   return (
diff --git a/views/form/editor.html b/views/form/editor.html
index 8002c90c73..a665493e1d 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -165,6 +165,8 @@
   'blockDividerStyleSolid': _x('Solid', 'Setting in the divider block'),
   'blockDividerStyleDashed': _x('Dashed', 'Setting in the divider block'),
   'blockDividerStyleDotted': _x('Dotted', 'Setting in the divider block'),
+  'blockDividerDividerHeight': _x(' Divider Height', 'Settings in the divider block'),
+  'blockDividerDividerWidth': _x(' Divider Width', 'Settings in the divider block'),
   'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
   'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
   'formPreviewOthersDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),