diff --git a/assets/css/src/components/formEditor/components/_header.scss b/assets/css/src/components/formEditor/components/_header.scss index 6209a86a27..20694fd6a1 100644 --- a/assets/css/src/components/formEditor/components/_header.scss +++ b/assets/css/src/components/formEditor/components/_header.scss @@ -3,7 +3,7 @@ padding-right: 8px; @media (min-width: 600px) { - padding: 0 12px; margin-right: 12px; + padding: 0 12px; } } diff --git a/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/assets/js/src/form_editor/blocks/input_styles_settings.jsx index 288ac19a98..02702a74ec 100644 --- a/assets/js/src/form_editor/blocks/input_styles_settings.jsx +++ b/assets/js/src/form_editor/blocks/input_styles_settings.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useRef } from 'react'; import MailPoet from 'mailpoet'; import { Button, @@ -17,7 +17,8 @@ const InputStylesSettings = ({ styles, onChange, }) => { - const [localStyles, setStyles] = useState(styles); + const localStylesRef = useRef(styles); + const localStyles = localStylesRef.current; const { settingsColors } = useSelect( (select) => { @@ -32,10 +33,10 @@ const InputStylesSettings = ({ const { applyStylesToAllTextInputs } = useDispatch('mailpoet-form-editor'); const updateStyles = (property, value) => { - const updated = { ...localStyles }; + const updated = { ...localStylesRef.current }; updated[property] = value; onChange(updated); - setStyles(updated); + localStylesRef.current = updated; }; return ( 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 7b54684b8a..2672adb990 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 from 'react'; +import React, { useRef } from 'react'; import { ColorIndicator, ColorPalette, @@ -9,6 +9,7 @@ import { import MailPoet from 'mailpoet'; import PropTypes from 'prop-types'; import { useSelect, useDispatch } from '@wordpress/data'; +import { partial } from 'lodash'; const BasicSettingsPanel = ({ onToggle, isOpened }) => { const { changeFormSettings } = useDispatch('mailpoet-form-editor'); @@ -16,24 +17,14 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => { (select) => select('mailpoet-form-editor').getFormSettings(), [] ); - const setBackgroundColor = (color) => { - changeFormSettings({ - ...settings, - backgroundColor: color, - }); - }; - const setFontColor = (color) => { - changeFormSettings({ - ...settings, - fontColor: color, - }); - }; - const setFontSize = (size) => { - changeFormSettings({ - ...settings, - fontSize: size, - }); + const settingsRef = useRef(settings); + const updateStyles = (property, value) => { + const updated = { ...settingsRef.current }; + updated[property] = value; + changeFormSettings(updated); + settingsRef.current = updated; }; + const { settingsColors, fontSizes } = useSelect( (select) => { const { getSettings } = select('core/block-editor'); @@ -66,7 +57,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => { @@ -85,7 +76,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => { @@ -96,7 +87,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {