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 }))}
- />