Add other button style settings to panel

[MAILPOET-2604]

assets/js/src/form_editor/blocks/submit/edit.jsx

@@ -49,6 +49,12 @@ SubmitEdit.propTypes = {
       fullWidth: PropTypes.bool.isRequired,
       inheritFromTheme: PropTypes.bool.isRequired,
       bold: PropTypes.bool,
+      backgroundColor: PropTypes.string,
+      borderSize: PropTypes.number,
+      borderRadius: PropTypes.number,
+      borderColor: PropTypes.string,
+      fontColor: PropTypes.string,
+      fontSize: PropTypes.number,
     }),
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,

assets/js/src/form_editor/blocks/submit/styles_settings.tsx

@@ -3,14 +3,24 @@ import MailPoet from 'mailpoet';
 import {
   Panel,
   PanelBody,
+  RangeControl,
   ToggleControl,
 } from '@wordpress/components';
 import { partial } from 'lodash';
 
+import ColorSettings from 'form_editor/components/color_settings';
+import FontSizeSetting from 'form_editor/components/font_size_settings';
+
 type Styles = {
   fullWidth: boolean,
   inheritFromTheme: boolean,
   bold?: boolean,
+  backgroundColor?: string,
+  fontColor?: string,
+  fontSize?: number,
+  borderSize?: number,
+  borderRadius?: number,
+  borderColor?: string,
 }
 
 type Props = {
@@ -24,12 +34,14 @@ const StylesSettings = ({
 }: Props) => {
   const localStylesRef = useRef(styles);
   const localStyles = localStylesRef.current;
+
   const updateStyles = (property, value) => {
     const updated = { ...localStylesRef.current };
     updated[property] = value;
     onChange(updated);
     localStylesRef.current = updated;
   };
+
   return (
     <Panel className="mailpoet-automation-input-styles-panel">
       <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} initialOpen={false}>
@@ -46,12 +58,51 @@ const StylesSettings = ({
             className="mailpoet-automation-inherit-theme-toggle"
           />
           {!localStyles.inheritFromTheme ? (
-            <ToggleControl
-              label={MailPoet.I18n.t('formSettingsBold')}
-              checked={localStyles.bold || false}
-              onChange={partial(updateStyles, 'bold')}
-              className="mailpoet-automation-styles-bold-toggle"
-            />
+            <>
+              <ColorSettings
+                name={MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
+                value={styles.backgroundColor}
+                onChange={partial(updateStyles, 'backgroundColor')}
+              />
+              <ColorSettings
+                name={MailPoet.I18n.t('formSettingsStylesFontColor')}
+                value={styles.fontColor}
+                onChange={partial(updateStyles, 'fontColor')}
+              />
+              <FontSizeSetting
+                name={MailPoet.I18n.t('formSettingsStylesFontSize')}
+                value={styles.fontSize}
+                onChange={partial(updateStyles, 'fontSize')}
+              />
+              <ToggleControl
+                label={MailPoet.I18n.t('formSettingsBold')}
+                checked={localStyles.bold || false}
+                onChange={partial(updateStyles, 'bold')}
+                className="mailpoet-automation-styles-bold-toggle"
+              />
+              <RangeControl
+                label={MailPoet.I18n.t('formSettingsBorderSize')}
+                value={localStyles.borderSize || 1}
+                min={0}
+                max={10}
+                allowReset
+                onChange={partial(updateStyles, 'borderSize')}
+                className="mailpoet-automation-styles-border-size"
+              />
+              <RangeControl
+                label={MailPoet.I18n.t('formSettingsBorderRadius')}
+                value={localStyles.borderRadius || 1}
+                min={0}
+                max={40}
+                allowReset
+                onChange={partial(updateStyles, 'borderRadius')}
+              />
+              <ColorSettings
+                name={MailPoet.I18n.t('formSettingsBorderColor')}
+                value={localStyles.borderColor}
+                onChange={partial(updateStyles, 'borderColor')}
+              />
+            </>
           ) : null}
         </div>
       </PanelBody>

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -11,6 +11,12 @@ const mapBlockStyles = (styles) => {
   if (has(styles, 'backgroundColor') && styles.backgroundColor) {
     mappedStyles.background_color = styles.backgroundColor;
   }
+  if (has(styles, 'fontSize') && styles.fontSize !== undefined) {
+    mappedStyles.font_size = styles.fontSize;
+  }
+  if (has(styles, 'fontColor') && styles.fontColor) {
+    mappedStyles.font_color = styles.fontColor;
+  }
   if (has(styles, 'borderSize') && styles.borderSize !== undefined) {
     mappedStyles.border_size = styles.borderSize;
   }

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -45,6 +45,12 @@ const mapBlockStyles = (styles) => {
   if (has(styles, 'border_size') && styles.border_size !== undefined) {
     mappedStyles.borderSize = parseInt(styles.border_size, 10);
   }
+  if (has(styles, 'font_size') && styles.font_size !== undefined) {
+    mappedStyles.fontSize = parseInt(styles.font_size, 10);
+  }
+  if (has(styles, 'font_color') && styles.font_color) {
+    mappedStyles.fontColor = styles.font_color;
+  }
   if (has(styles, 'border_radius') && styles.border_radius !== undefined) {
     mappedStyles.borderRadius = parseInt(styles.border_radius, 10);
   }