Add divider style settings
[MAILPOET-2835]
This commit is contained in:
@@ -5,16 +5,33 @@ import { InspectorControls } from '@wordpress/block-editor';
|
|||||||
import {
|
import {
|
||||||
Panel,
|
Panel,
|
||||||
PanelBody,
|
PanelBody,
|
||||||
RangeControl, ToggleControl,
|
RangeControl,
|
||||||
|
SelectControl,
|
||||||
|
ToggleControl,
|
||||||
} from '@wordpress/components';
|
} from '@wordpress/components';
|
||||||
import { Types } from './divider';
|
import { Style, Types } from './divider';
|
||||||
|
|
||||||
const DividerEdit = ({ attributes, setAttributes }) => {
|
const DividerEdit = ({ attributes, setAttributes }) => {
|
||||||
const dividerSettings = (
|
const dividerSettings = (
|
||||||
<>
|
<>
|
||||||
Divider settings
|
<SelectControl
|
||||||
|
label={MailPoet.I18n.t('blockDividerStyle')}
|
||||||
|
value={attributes.style}
|
||||||
|
onChange={(style) => (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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<InspectorControls>
|
<InspectorControls>
|
||||||
@@ -26,7 +43,7 @@ const DividerEdit = ({ attributes, setAttributes }) => {
|
|||||||
min={1}
|
min={1}
|
||||||
max={400}
|
max={400}
|
||||||
allowReset
|
allowReset
|
||||||
onChange={(height) => (setAttributes({height}))}
|
onChange={(height) => (setAttributes({ height }))}
|
||||||
/>
|
/>
|
||||||
<ToggleControl
|
<ToggleControl
|
||||||
label={MailPoet.I18n.t('blockSpacerEnableDivider')}
|
label={MailPoet.I18n.t('blockSpacerEnableDivider')}
|
||||||
@@ -48,7 +65,7 @@ const DividerEdit = ({ attributes, setAttributes }) => {
|
|||||||
height: attributes.height,
|
height: attributes.height,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="mailpoet_divider" />
|
<div className="mailpoet_divider" style={dividerStyles} />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@@ -161,6 +161,10 @@
|
|||||||
'formPreview': __('Form Preview'),
|
'formPreview': __('Form Preview'),
|
||||||
'blockSpacerHeight': _x('Height', 'Settings in the spacer block'),
|
'blockSpacerHeight': _x('Height', 'Settings in the spacer block'),
|
||||||
'blockSpacerEnableDivider': _x('Enable Divider', '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'),
|
'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
|
||||||
'formPreviewMobile': _x('Mobile', 'Mobile 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.'),
|
'formPreviewOthersDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),
|
||||||
|
Reference in New Issue
Block a user