diff --git a/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx index 63c3fedb59..43a80a3d70 100644 --- a/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx +++ b/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useMemo } from 'react'; import { Button, - SelectControl, + SelectControl, TextControl, ToggleControl, } from '@wordpress/components'; import PropTypes from 'prop-types'; @@ -10,6 +10,7 @@ import MailPoet from 'mailpoet'; import CustomFieldDelete from '../custom_field_delete.jsx'; const CustomFieldSettings = ({ + label, mandatory, validate, isSaving, @@ -19,16 +20,19 @@ const CustomFieldSettings = ({ onChange, fieldType, }) => { + const [localLabel, setLocalLabel] = useState(label); const [localMandatory, setLocalMandatory] = useState(mandatory); const [localValidate, setLocalValidate] = useState(validate); const localData = useMemo(() => ({ + label: localLabel, mandatory: localMandatory, validate: localValidate, - }), [localMandatory, localValidate]); + }), [localLabel, localMandatory, localValidate]); const hasUnsavedChanges = localMandatory !== mandatory - || localValidate !== validate; + || localValidate !== validate + || localLabel !== label; useEffect(() => { if (onChange) { @@ -38,6 +42,12 @@ const CustomFieldSettings = ({ return ( <> + { (setAttributes(attrs))} customFieldId={attributes.customFieldId} + label={attributes.label} mandatory={attributes.mandatory} validate={attributes.validate} isSaving={isSaving} @@ -50,6 +50,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => { onFinish: () => setAttributes({ mandatory: params.mandatory, validate: params.validate, + label: params.label, }), }); }} @@ -64,12 +65,6 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => { - (setAttributes({ label }))} - /> deleteCustomField( @@ -74,12 +75,6 @@ const CustomTextAreaEdit = ({ - (setAttributes({ label }))} - />