Display background colour

[MAILPOET-2600]

assets/js/src/form_editor/components/editor.jsx

@@ -17,6 +17,7 @@ import Notices from './notices.jsx';
 import UnsavedChangesNotice from './unsaved_changes_notice.jsx';
 import FormStyles from './form_styles.jsx';
 import Preview from './preview.jsx';
+import FormBackground from './form_background.jsx';
 
 // Editor settings - see @wordpress/block-editor/src/store/defaults.js
 const editorSettings = {
@@ -68,12 +69,14 @@ export default () => {
                     <BlockEditorKeyboardShortcuts />
                     <BlockEditorKeyboardShortcuts.Register />
                     <div className="mailpoet_form">
-                      <WritingFlow>
+                      <FormBackground>
-                        <ObserveTyping>
+                        <WritingFlow>
-                          <FormTitle />
+                          <ObserveTyping>
-                          <BlockList />
+                            <FormTitle />
-                        </ObserveTyping>
+                            <BlockList />
-                      </WritingFlow>
+                          </ObserveTyping>
+                        </WritingFlow>
+                      </FormBackground>
                     </div>
                   </BlockSelectionClearer>
                 </div>

assets/js/src/form_editor/components/form_background.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelect } from '@wordpress/data';
+
+const FormBackground = ({ children }) => {
+  const backgroundColor = useSelect(
+    (select) => {
+      const settings = select('mailpoet-form-editor').getFormSettings();
+      return settings.backgroundColor;
+    },
+    []
+  );
+  return (
+    <div style={{ backgroundColor }}>
+      {children}
+    </div>
+  );
+};
+
+FormBackground.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default FormBackground;

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   ColorIndicator,
   ColorPalette,
@@ -7,10 +7,20 @@ import {
 } from '@wordpress/components';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 const BasicSettingsPanel = ({ onToggle, isOpened }) => {
-  const [selectedColor, setSelectedColor] = useState(undefined);
+  const { changeFormSettings } = useDispatch('mailpoet-form-editor');
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+  const setBackgroundColor = (color) => {
+    changeFormSettings({
+      ...settings,
+      backgroundColor: color,
+    });
+  };
   const settingsColors = useSelect(
     (select) => {
       const { getSettings } = select('core/block-editor');
@@ -25,17 +35,17 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
           <span className="components-base-control__label">
             {MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
             {
-              selectedColor !== undefined
+              settings.backgroundColor !== undefined
               && (
                 <ColorIndicator
-                  colorValue={selectedColor}
+                  colorValue={settings.backgroundColor}
                 />
               )
             }
           </span>
           <ColorPalette
-            value={selectedColor}
+            value={settings.backgroundColor}
-            onChange={setSelectedColor}
+            onChange={setBackgroundColor}
             colors={settingsColors}
           />
         </div>