Add divider height and width
[MAILPOET-2835]
This commit is contained in:
@@ -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 (
|
||||
|
@@ -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.'),
|
||||
|
Reference in New Issue
Block a user