Refactor labels rendering in form block editor

[MAILPOET-2592]

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

@@ -14,7 +14,7 @@ import CustomFieldSettings from './custom_field_settings.jsx';
 import FormFieldDate from '../../../form/fields/date.jsx';
 import formatLabel from '../label_formatter.jsx';
 
-const CustomDateEdit = ({ attributes, setAttributes }) => {
+const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
@@ -70,14 +70,14 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
   );
 
   return (
-    <>
+    <div className="mailpoet_custom_date">
       {inspectorControls}
-      <label className="mailpoet_date_label mailpoet_custom_date" data-automation-id="editor_custom_date_label" htmlFor="custom_text">
+      <label className="mailpoet_date_label" data-automation-id="editor_custom_date_label" htmlFor={clientId}>
         {formatLabel(attributes)}
-        <br />
+      </label>
       <FormFieldDate
         field={{
-            name: 'field',
+          name: clientId,
           day_placeholder: MailPoet.I18n.t('customFieldDay'),
           month_placeholder: MailPoet.I18n.t('customFieldMonth'),
           year_placeholder: MailPoet.I18n.t('customFieldYear'),
@@ -91,8 +91,7 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
         }}
         onValueChange={() => {}}
       />
-      </label>
+    </div>
-    </>
   );
 };
 
@@ -104,6 +103,7 @@ CustomDateEdit.propTypes = {
     defaultToday: PropTypes.bool,
     mandatory: PropTypes.bool.isRequired,
   }).isRequired,
+  clientId: PropTypes.string.isRequired,
   setAttributes: PropTypes.func.isRequired,
 };
 

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

@@ -13,7 +13,7 @@ import formatLabel from '../label_formatter.jsx';
 
 import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
 
-const CustomSelectEdit = ({ attributes, setAttributes }) => {
+const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
@@ -68,16 +68,19 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
   const getInput = () => {
     const options = [{
       label: attributes.labelWithinInput ? formatLabel(attributes) : '-',
-      value: null,
     }];
     if (Array.isArray(attributes.values) || !attributes.values.length) {
-      attributes.values.forEach((value) => options.push({ label: value.name }));
+      attributes.values.forEach((value) => options.push({
+        label: value.name,
+      }));
     }
     return (
-      <select className="mailpoet_select">
+      <select className="mailpoet_select" id={clientId}>
         {
           options.map((option) => (
-            <option key={option.label} value={option.label}>{option.label}</option>
+            <option key={option.label} value={option.label}>
+              {option.label}
+            </option>
           ))
         }
       </select>
@@ -88,14 +91,12 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
     <>
       {inspectorControls}
       <div className="mailpoet_custom_select">
-        {attributes.labelWithinInput ? (getInput()
+        {!attributes.labelWithinInput ? (
-        ) : (
+          <label className="mailpoet_select_label" htmlFor={clientId}>
-          <label className="mailpoet_select_label" htmlFor="mailpoet_custom_select">
             {formatLabel(attributes)}
-            <br />
-            {getInput()}
           </label>
-        )}
+        ) : null}
+        {getInput()}
       </div>
     </>
   );
@@ -112,6 +113,7 @@ CustomSelectEdit.propTypes = {
     mandatory: PropTypes.bool.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
+  clientId: PropTypes.string.isRequired,
 };
 
 export default CustomSelectEdit;

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

@@ -13,7 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import CustomFieldSettings from './custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
 
-const CustomTextEdit = ({ attributes, setAttributes }) => {
+const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
@@ -68,7 +68,7 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
 
   const getTextInput = (placeholder) => (
     <input
-      id="custom_text"
+      id={clientId}
       className="mailpoet_text"
       type="text"
       name="custom_text"
@@ -81,14 +81,12 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      {attributes.labelWithinInput ? (getTextInput(formatLabel(attributes))
+      {!attributes.labelWithinInput ? (
-      ) : (
+        <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor={clientId}>
-        <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
           {formatLabel(attributes)}
-          <br />
-          {getTextInput('')}
         </label>
-      )}
+      ) : null}
+      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
     </>
   );
 };
@@ -101,6 +99,7 @@ CustomTextEdit.propTypes = {
     customFieldId: PropTypes.number.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
+  clientId: PropTypes.string.isRequired,
 };
 
 export default CustomTextEdit;

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

@@ -107,11 +107,12 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
       {inspectorControls}
       {attributes.labelWithinInput ? (getTextArea(formatLabel(attributes))
       ) : (
+        <>
           <label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
             {formatLabel(attributes)}
-          <br />
-          {getTextArea('')}
           </label>
+          {getTextArea('')}
+        </>
       )}
     </>
   );

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

@@ -46,14 +46,12 @@ const EmailEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      {attributes.labelWithinInput ? (getTextInput(`${attributes.label} *`)
+      {!attributes.labelWithinInput ? (
-      ) : (
         <label className="mailpoet_text_label" data-automation-id="editor_email_label" htmlFor="email">
           {`${attributes.label} *`}
-          <br />
-          {getTextInput('')}
         </label>
-      )}
+      ) : null}
+      {getTextInput(attributes.labelWithinInput ? `${attributes.label} *` : '')}
     </>
   );
 };

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

@@ -53,14 +53,12 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      {attributes.labelWithinInput ? (getTextInput(formatLabel(attributes))
+      {!attributes.labelWithinInput ? (
-      ) : (
         <label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name">
           {formatLabel(attributes)}
-          <br />
-          {getTextInput('')}
         </label>
-      )}
+      ) : null}
+      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
     </>
   );
 };

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

@@ -53,14 +53,12 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      {attributes.labelWithinInput ? (getTextInput(formatLabel(attributes))
+      {!attributes.labelWithinInput ? (
-      ) : (
         <label className="mailpoet_text_label" data-automation-id="editor_last_name_label" htmlFor="last_name">
           {formatLabel(attributes)}
-          <br />
-          {getTextInput('')}
         </label>
-      )}
+      ) : null}
+      {getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
     </>
   );
 };