diff --git a/assets/js/src/form_editor/components/editor.jsx b/assets/js/src/form_editor/components/editor.jsx
index 5c4fb35aef..1bcaa9b7f0 100644
--- a/assets/js/src/form_editor/components/editor.jsx
+++ b/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 () => {
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/assets/js/src/form_editor/components/form_background.jsx b/assets/js/src/form_editor/components/form_background.jsx
index e69de29bb2..681afc904c 100644
--- a/assets/js/src/form_editor/components/form_background.jsx
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+FormBackground.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default FormBackground;
diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index 00b4eefd5c..d1c6d32e5f 100644
--- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/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 }) => {
{MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
{
- selectedColor !== undefined
+ settings.backgroundColor !== undefined
&& (
)
}