diff --git a/assets/js/src/form_editor/blocks/divider/edit.jsx b/assets/js/src/form_editor/blocks/divider/edit.jsx index 96d697bcd0..c97241b585 100644 --- a/assets/js/src/form_editor/blocks/divider/edit.jsx +++ b/assets/js/src/form_editor/blocks/divider/edit.jsx @@ -5,16 +5,33 @@ import { InspectorControls } from '@wordpress/block-editor'; import { Panel, PanelBody, - RangeControl, ToggleControl, + RangeControl, + SelectControl, + ToggleControl, } from '@wordpress/components'; -import { Types } from './divider'; +import { Style, Types } from './divider'; const DividerEdit = ({ attributes, setAttributes }) => { const dividerSettings = ( <> - Divider settings + (setAttributes({ style }))} + options={[ + { value: Style.Solid, label: MailPoet.I18n.t('blockDividerStyleSolid') }, + { value: Style.Dashed, label: MailPoet.I18n.t('blockDividerStyleDashed') }, + { value: Style.Dotted, label: MailPoet.I18n.t('blockDividerStyleDotted') }, + ]} + /> ); + + const dividerStyles = {}; + if (attributes.type === Types.Divider) { + dividerStyles.borderTopStyle = attributes.style; + } + return ( <> @@ -26,7 +43,7 @@ const DividerEdit = ({ attributes, setAttributes }) => { min={1} max={400} allowReset - onChange={(height) => (setAttributes({height}))} + onChange={(height) => (setAttributes({ height }))} /> { height: attributes.height, }} > -
+
); diff --git a/views/form/editor.html b/views/form/editor.html index ae9007cd48..8002c90c73 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -161,6 +161,10 @@ 'formPreview': __('Form Preview'), 'blockSpacerHeight': _x('Height', 'Settings in the spacer block'), 'blockSpacerEnableDivider': _x('Enable Divider', 'Settings in the spacer block'), + 'blockDividerStyle': _x('Divider Style', 'Settings in the divider block (solid, dotted, …)'), + 'blockDividerStyleSolid': _x('Solid', 'Setting in the divider block'), + 'blockDividerStyleDashed': _x('Dashed', 'Setting in the divider block'), + 'blockDividerStyleDotted': _x('Dotted', 'Setting 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.'),