Add spacer settings

[MAILPOET-2835]

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

@@ -1,10 +1,56 @@
 import React from 'react';
 import classnames from 'classnames';
+import MailPoet from 'mailpoet';
+import { InspectorControls } from '@wordpress/block-editor';
 import {
-  HorizontalRule,
+  Panel,
+  PanelBody,
+  RangeControl, ToggleControl,
 } from '@wordpress/components';
+import { Types } from './divider';
 
-const DividerEdit = (attributes) => (
-  <HorizontalRule className={classnames('mailpoet_divider', attributes.className)} />
-);
+const DividerEdit = ({ attributes, setAttributes }) => {
+  const dividerSettings = (
+    <>
+      Divider settings
+    </>
+  );
+  return (
+    <>
+      <InspectorControls>
+        <Panel>
+          <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} initialOpen>
+            <RangeControl
+              label={MailPoet.I18n.t('blockSpacerHeight')}
+              value={attributes.height}
+              min={1}
+              max={400}
+              allowReset
+              onChange={(height) => (setAttributes({height}))}
+            />
+            <ToggleControl
+              label={MailPoet.I18n.t('blockSpacerEnableDivider')}
+              checked={attributes.type === Types.Divider}
+              onChange={(checked) => setAttributes({
+                type: checked ? Types.Divider : Types.Spacer,
+              })}
+            />
+            {(
+              (attributes.type === Types.Divider) && (dividerSettings)
+            )}
+          </PanelBody>
+        </Panel>
+      </InspectorControls>
+
+      <div
+        className={classnames('mailpoet_spacer', attributes.className)}
+        style={{
+          height: attributes.height,
+        }}
+      >
+        <div className="mailpoet_divider" />
+      </div>
+    </>
+  );
+};
 export default DividerEdit;

views/form/editor.html

@@ -159,6 +159,8 @@
   'successMessage': __('This is what the success message looks like.'),
   'errorMessage': __('This is what the error message looks like.'),
   'formPreview': __('Form Preview'),
+  'blockSpacerHeight': _x('Height', 'Settings in the spacer block'),
+  'blockSpacerEnableDivider': _x('Enable Divider', 'Settings in the spacer 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.'),