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 && ( ) }