Move textarea lines field to correct place

[MAILPOET-2592]

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

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import {
-  SelectControl,
-} from '@wordpress/components';
-import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-
-import CustomTextSettings from '../custom_text/custom_field_settings.jsx';
-
-const CustomFieldSettings = ({
-  mandatory,
-  validate,
-  lines,
-  isSaving,
-  onSave,
-}) => {
-  const [localLines, setLocalLines] = useState(lines);
-
-  return (
-    <>
-      <CustomTextSettings
-        validate={validate}
-        mandatory={mandatory}
-        isSaving={isSaving}
-        onSave={(customTextParams) => {
-          onSave({
-            ...customTextParams,
-            lines: localLines,
-          });
-        }}
-      />
-      <SelectControl
-        label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
-        value={localLines}
-        options={[
-          {
-            label: MailPoet.I18n.t('customField1Line'),
-            value: '1',
-          },
-          {
-            label: MailPoet.I18n.t('customField2Lines'),
-            value: '2',
-          },
-          {
-            label: MailPoet.I18n.t('customField3Lines'),
-            value: '3',
-          },
-          {
-            label: MailPoet.I18n.t('customField4Lines'),
-            value: '4',
-          },
-          {
-            label: MailPoet.I18n.t('customField5Lines'),
-            value: '5',
-          },
-        ]}
-        onChange={setLocalLines}
-      />
-    </>
-  );
-};
-
-CustomFieldSettings.propTypes = {
-  mandatory: PropTypes.bool,
-  validate: PropTypes.string,
-  lines: PropTypes.string,
-  onSave: PropTypes.func.isRequired,
-  isSaving: PropTypes.bool,
-};
-
-CustomFieldSettings.defaultProps = {
-  mandatory: false,
-  validate: '',
-  lines: '1',
-  isSaving: false,
-};
-
-export default CustomFieldSettings;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Panel,
-  PanelBody,
+  PanelBody, SelectControl,
   TextControl,
   ToggleControl,
 } from '@wordpress/components';
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import { useDispatch, useSelect } from '@wordpress/data';
 
-import CustomFieldSettings from './custom_field_settings.jsx';
+import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
@@ -58,6 +58,33 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
             checked={attributes.labelWithinInput}
             onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
           />
+          <SelectControl
+            label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
+            value={attributes.lines}
+            options={[
+              {
+                label: MailPoet.I18n.t('customField1Line'),
+                value: '1',
+              },
+              {
+                label: MailPoet.I18n.t('customField2Lines'),
+                value: '2',
+              },
+              {
+                label: MailPoet.I18n.t('customField3Lines'),
+                value: '3',
+              },
+              {
+                label: MailPoet.I18n.t('customField4Lines'),
+                value: '4',
+              },
+              {
+                label: MailPoet.I18n.t('customField5Lines'),
+                value: '5',
+              },
+            ]}
+            onChange={(lines) => (setAttributes({ lines }))}
+          />
         </PanelBody>
       </Panel>
     </InspectorControls>

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -38,6 +38,9 @@ const mapCustomField = (block, customFields, mappedCommonProperties) => {
   if (has(block.attributes, 'dateType')) {
     mapped.params.date_type = block.attributes.dateType;
   }
+  if (has(block.attributes, 'lines')) {
+    mapped.params.lines = block.attributes.lines;
+  }
   if (has(block.attributes, 'dateFormat')) {
     mapped.params.date_format = block.attributes.dateFormat;
   }

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -25,6 +25,9 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
     if (has(item.params, 'hide_label')) {
       mapped.attributes.hideLabel = !!item.params.hide_label;
     }
+    if (has(item.params, 'lines')) {
+      mapped.attributes.lines = item.params.lines;
+    }
     if (has(item.params, 'date_type')) {
       mapped.attributes.dateType = item.params.date_type;
     }