Fix custom fields label saving

[MAILPOET-3926]

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 (
     <>
+      <TextControl
+        label={MailPoet.I18n.t('label')}
+        value={localLabel}
+        data-automation-id="settings_custom_text_label_input"
+        onChange={setLocalLabel}
+      />
       <ToggleControl
         label={MailPoet.I18n.t('blockMandatory')}
         checked={localMandatory}
@@ -89,6 +99,7 @@ const CustomFieldSettings = ({
 };
 
 CustomFieldSettings.propTypes = {
+  label: PropTypes.string,
   mandatory: PropTypes.bool,
   validate: PropTypes.string,
   onSave: PropTypes.func,
@@ -100,6 +111,7 @@ CustomFieldSettings.propTypes = {
 };
 
 CustomFieldSettings.defaultProps = {
+  label: '',
   mandatory: false,
   fieldType: '',
   isSaving: false,

assets/js/src/form_editor/blocks/custom_text/edit.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Panel,
   PanelBody,
-  TextControl,
   ToggleControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -38,6 +37,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
           <CustomFieldSettings
             updateAttributes={(attrs) => (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 }) => {
       </Panel>
       <Panel>
         <PanelBody title={MailPoet.I18n.t('customFieldsFormSettings')} initialOpen>
-          <TextControl
-            label={MailPoet.I18n.t('label')}
-            value={attributes.label}
-            data-automation-id="settings_custom_text_label_input"
-            onChange={(label) => (setAttributes({ label }))}
-          />
           <ToggleControl
             label={MailPoet.I18n.t('displayLabelWithinInput')}
             checked={attributes.labelWithinInput}

assets/js/src/form_editor/blocks/custom_textarea/edit.jsx

@@ -2,7 +2,6 @@ import React, { useRef, useState } from 'react';
 import {
   Panel,
   PanelBody, SelectControl,
-  TextControl,
   ToggleControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -49,6 +48,7 @@ const CustomTextAreaEdit = ({
       <Panel>
         <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
           <CustomFieldSettings
+            label={attributes.label}
             mandatory={attributes.mandatory}
             validate={attributes.validate}
             isSaving={isSaving}
@@ -61,6 +61,7 @@ const CustomTextAreaEdit = ({
                 mandatory: params.mandatory,
                 validate: params.validate,
                 lines: params.lines,
+                label: params.label,
               }),
             })}
             onCustomFieldDelete={() => deleteCustomField(
@@ -74,12 +75,6 @@ const CustomTextAreaEdit = ({
       </Panel>
       <Panel>
         <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
-          <TextControl
-            label={MailPoet.I18n.t('label')}
-            value={attributes.label}
-            data-automation-id="settings_custom_text_label_input"
-            onChange={(label) => (setAttributes({ label }))}
-          />
           <ToggleControl
             label={MailPoet.I18n.t('displayLabelWithinInput')}
             checked={attributes.labelWithinInput}

assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx

@@ -33,12 +33,14 @@ function mapFormDataToParams(fieldType, data) {
       return {
         required: data.mandatory ? '1' : '',
         validate: data.validate,
+        label: data.label,
       };
     case 'textarea':
       return {
         required: data.mandatory ? '1' : '',
         validate: data.validate,
         lines: data.lines ? data.lines : '1',
+        label: data.label,
       };
     default:
       throw new Error(`Invalid custom field type ${fieldType}!`);