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);
   }

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -113,6 +113,54 @@ describe('Blocks to Form Body', () => {
     });
   });
 
+  it('Should map submit block styles', () => {
+    const blockWithThemeStyles = {
+      ...submitBlock,
+      attributes: {
+        ...submitBlock.attributes,
+        styles: {
+          fullWidth: true,
+          inheritFromTheme: true,
+          bold: true,
+        },
+      },
+    };
+    const blockWithCustomStyles = {
+      ...submitBlock,
+      attributes: {
+        ...submitBlock.attributes,
+        styles: {
+          fullWidth: false,
+          inheritFromTheme: false,
+          bold: true,
+          backgroundColor: '#aaaaaa',
+          fontSize: 16,
+          fontColor: '#cccccc',
+          borderRadius: 23,
+          borderSize: 4,
+          borderColor: '#dddddd',
+        },
+      },
+    };
+    const [
+      inputWithThemeStyles,
+      inputWithCustomStyles,
+    ] = formBlocksToBody([blockWithThemeStyles, blockWithCustomStyles]);
+    expect(inputWithThemeStyles.styles).to.deep.equal({
+      full_width: '1',
+    });
+    expect(inputWithCustomStyles.styles).to.deep.equal({
+      full_width: '0',
+      bold: '1',
+      font_color: '#cccccc',
+      font_size: 16,
+      background_color: '#aaaaaa',
+      border_radius: 23,
+      border_size: 4,
+      border_color: '#dddddd',
+    });
+  });
+
   it('Should map last name block to input data', () => {
     const [input] = formBlocksToBody([lastNameBlock]);
     checkBodyInputBasics(input);

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -151,8 +151,8 @@ describe('Form Body To Blocks', () => {
 
     const map = formBodyToBlocksFactory(colorDefinitions, [], [customFieldText]);
     const [email, customText] = map([
-      { ...emailInput, position: '1', styles: emailStyles },
-      { ...customTextInput, position: '2', styles: customTextStyles },
+      { ...emailInput, styles: emailStyles },
+      { ...customTextInput, styles: customTextStyles },
     ]);
     expect(email.attributes.styles).to.eql({
       fullWidth: true,
@@ -169,6 +169,45 @@ describe('Form Body To Blocks', () => {
     });
   });
 
+  it('Should map submit block styles', () => {
+    const defaultSubmitStyles = {
+      full_width: '1',
+    };
+
+    const styledSubmitStyles = {
+      full_width: '0',
+      bold: '1',
+      background_color: '#ffffff',
+      border_size: '4',
+      border_radius: '20',
+      border_color: '#cccccc',
+      font_size: '16',
+      font_color: '#aaaaaa',
+    };
+
+    const map = formBodyToBlocksFactory(colorDefinitions);
+
+    const [defaultSubmit, styledSubmit] = map([
+      { ...submitInput, styles: defaultSubmitStyles },
+      { ...submitInput, styles: styledSubmitStyles },
+    ]);
+    expect(defaultSubmit.attributes.styles).to.deep.equal({
+      fullWidth: true,
+      inheritFromTheme: true,
+    });
+    expect(styledSubmit.attributes.styles).to.deep.equal({
+      fullWidth: false,
+      inheritFromTheme: false,
+      bold: true,
+      backgroundColor: '#ffffff',
+      borderSize: 4,
+      borderRadius: 20,
+      borderColor: '#cccccc',
+      fontSize: 16,
+      fontColor: '#aaaaaa',
+    });
+  });
+
   it('Should map email with label within correctly', () => {
     const email = { ...emailInput };
     email.params.label_within = '1';