Add background color input style to styles settings

[MAILPOET-2599]

assets/js/src/form_editor/blocks/input_styles_settings.jsx

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import {
+  ColorIndicator,
+  ColorPalette,
   Panel,
   PanelBody,
   ToggleControl,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { partial } from 'underscore';
 import PropTypes from 'prop-types';
 
@@ -14,6 +17,16 @@ const InputStylesSettings = ({
 }) => {
   const [localStyles, setStyles] = useState(styles);
 
+  const { settingsColors } = useSelect(
+    (select) => {
+      const { getSettings } = select('core/block-editor');
+      return {
+        settingsColors: getSettings().colors,
+      };
+    },
+    []
+  );
+
   const updateStyles = (property, value) => {
     const updated = { ...localStyles };
     updated[property] = value;
@@ -35,6 +48,24 @@ const InputStylesSettings = ({
         />
         {!localStyles.inheritFromTheme ? (
           <>
+            <div>
+              <h3 className="mailpoet-styles-settings-heading">
+                {MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
+                {
+                  styles.backgroundColor !== undefined
+                  && (
+                    <ColorIndicator
+                      colorValue={styles.backgroundColor}
+                    />
+                  )
+                }
+              </h3>
+              <ColorPalette
+                value={styles.backgroundColor}
+                onChange={partial(updateStyles, 'backgroundColor')}
+                colors={settingsColors}
+              />
+            </div>
             <ToggleControl
               label={MailPoet.I18n.t('formSettingsBold')}
               checked={localStyles.bold || false}

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

@@ -8,6 +8,9 @@ const mapBlockStyles = (styles) => {
     return mappedStyles;
   }
   mappedStyles.bold = styles.bold ? '1' : '0';
+  if (has(styles, 'backgroundColor') && styles.backgroundColor) {
+    mappedStyles.background_color = styles.backgroundColor;
+  }
   return mappedStyles;
 };
 

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

@@ -39,6 +39,9 @@ const mapBlockStyles = (styles) => {
   }
   mappedStyles.inheritFromTheme = false;
   mappedStyles.bold = styles.bold === '1';
+  if (has(styles, 'background_color') && styles.background_color) {
+    mappedStyles.backgroundColor = styles.background_color;
+  }
   return mappedStyles;
 };
 

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

@@ -83,6 +83,7 @@ describe('Blocks to Form Body', () => {
           fullWidth: false,
           inheritFromTheme: false,
           bold: true,
+          backgroundColor: '#aaaaaa',
         },
       },
     };
@@ -96,6 +97,7 @@ describe('Blocks to Form Body', () => {
     expect(inputWithCustomStyles.styles).to.eql({
       full_width: '0',
       bold: '1',
+      background_color: '#aaaaaa',
     });
   });
 

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

@@ -132,6 +132,7 @@ describe('Form Body To Blocks', () => {
     const customTextStyles = {
       full_width: '0',
       bold: '1',
+      background_color: '#ffffff',
     };
 
     const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText]);
@@ -147,6 +148,7 @@ describe('Form Body To Blocks', () => {
       fullWidth: false,
       inheritFromTheme: false,
       bold: true,
+      backgroundColor: '#ffffff',
     });
   });