Add divider style settings

[MAILPOET-2835]
This commit is contained in:
Pavel Dohnal
2020-04-28 14:28:04 +02:00
committed by Veljko V
parent d48dd5c185
commit 7fb9bf765e
2 changed files with 26 additions and 5 deletions

View File

@@ -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>
</> </>
); );

View File

@@ -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.'),