diff --git a/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/assets/js/src/form_editor/blocks/input_styles_settings.jsx
index f70d720b15..15cfbd1ca2 100644
--- a/assets/js/src/form_editor/blocks/input_styles_settings.jsx
+++ b/assets/js/src/form_editor/blocks/input_styles_settings.jsx
@@ -5,6 +5,7 @@ import {
ColorPalette,
Panel,
PanelBody,
+ RangeControl,
ToggleControl,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
@@ -71,6 +72,40 @@ const InputStylesSettings = ({
checked={localStyles.bold || false}
onChange={partial(updateStyles, 'bold')}
/>
+
+
+
+
+ {MailPoet.I18n.t('formSettingsBorderColor')}
+ {
+ localStyles.borderColor !== undefined
+ && (
+
+ )
+ }
+
+
+
>
) : null}
diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx
index 5d5938e96c..113fdb5ec2 100644
--- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx
+++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx
@@ -11,6 +11,15 @@ const mapBlockStyles = (styles) => {
if (has(styles, 'backgroundColor') && styles.backgroundColor) {
mappedStyles.background_color = styles.backgroundColor;
}
+ if (has(styles, 'borderSize') && styles.borderSize !== undefined) {
+ mappedStyles.border_size = styles.borderSize;
+ }
+ if (has(styles, 'borderRadius') && styles.borderRadius !== undefined) {
+ mappedStyles.border_radius = styles.borderRadius;
+ }
+ if (has(styles, 'borderColor') && styles.borderColor) {
+ mappedStyles.border_color = styles.borderColor;
+ }
return mappedStyles;
};
diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index 62d8cc10b4..39dad09950 100644
--- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -42,6 +42,15 @@ const mapBlockStyles = (styles) => {
if (has(styles, 'background_color') && styles.background_color) {
mappedStyles.backgroundColor = styles.background_color;
}
+ if (has(styles, 'border_size') && styles.border_size !== undefined) {
+ mappedStyles.borderSize = parseInt(styles.border_size, 10);
+ }
+ if (has(styles, 'border_radius') && styles.border_radius !== undefined) {
+ mappedStyles.borderRadius = parseInt(styles.border_radius, 10);
+ }
+ if (has(styles, 'border_color') && styles.border_color) {
+ mappedStyles.borderColor = styles.border_color;
+ }
return mappedStyles;
};
diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
index ca1957fd0d..5cbd1ef952 100644
--- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
+++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js
@@ -84,6 +84,9 @@ describe('Blocks to Form Body', () => {
inheritFromTheme: false,
bold: true,
backgroundColor: '#aaaaaa',
+ borderRadius: 23,
+ borderSize: 4,
+ borderColor: '#dddddd',
},
},
};
@@ -98,6 +101,9 @@ describe('Blocks to Form Body', () => {
full_width: '0',
bold: '1',
background_color: '#aaaaaa',
+ border_radius: 23,
+ border_size: 4,
+ border_color: '#dddddd',
});
});
diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
index 99d6f29e93..c47ebcd356 100644
--- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
+++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
@@ -133,6 +133,9 @@ describe('Form Body To Blocks', () => {
full_width: '0',
bold: '1',
background_color: '#ffffff',
+ border_size: '4',
+ border_radius: '20',
+ border_color: '#cccccc',
};
const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText]);
@@ -149,6 +152,9 @@ describe('Form Body To Blocks', () => {
inheritFromTheme: false,
bold: true,
backgroundColor: '#ffffff',
+ borderSize: 4,
+ borderRadius: 20,
+ borderColor: '#cccccc',
});
});
diff --git a/views/form/editor.html b/views/form/editor.html
index 3e667189ac..a7b90cec8a 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -49,6 +49,9 @@
'formSettingsInheritStyleFromTheme': __('Inherit style from theme'),
'formSettingsDisplayFullWidth': _x('Display Fullwidth', 'A label for checkbox in form style settings'),
'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'),
+ 'formSettingsBorderSize': _x('Border Size', 'A label for checkbox in form style settings'),
+ 'formSettingsBorderRadius': _x('Border Radius', 'A label for checkbox in form style settings'),
+ 'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
'formPlacement': _x('Form Placement', 'A settings section heading'),