Display inputs with padding

[MAILPOET-2809]

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

@@ -16,6 +16,10 @@ import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 
 const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
   const isSaving = useSelect(
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
@@ -92,8 +96,14 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
       });
     }
 
+    const inputStyles = {};
+
+    if (settings.inputPadding !== undefined) {
+      inputStyles.padding = settings.inputPadding;
+    }
+
     return (
-      <select className="mailpoet_select" id={clientId} value={defaultValue} readOnly>
+      <select style={inputStyles} className="mailpoet_select" id={clientId} value={defaultValue} readOnly>
         {
           options.map((option, index) => (
             <option key={option.label} value={option.label} disabled={index === 0}>

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

@@ -17,6 +17,10 @@ import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
   const isSaving = useSelect(
     (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
     []
@@ -126,6 +130,10 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
     inputStyles.backgroundColor = attributes.styles.backgroundColor;
   }
 
+  if (settings.inputPadding !== undefined) {
+    inputStyles.padding = settings.inputPadding;
+  }
+
   inputStyles.resize = 'none';
 
   const textarea = useRef(null);

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

@@ -8,11 +8,17 @@ import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import classnames from 'classnames';
+import { useSelect } from '@wordpress/data';
 
 import ParagraphEdit from '../paragraph_edit.jsx';
 import StylesSettings from './styles_settings';
 
 const SubmitEdit = ({ attributes, setAttributes }) => {
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+
   const inspectorControls = (
     <InspectorControls>
       <Panel>
@@ -43,6 +49,10 @@ const SubmitEdit = ({ attributes, setAttributes }) => {
     styles.width = '100%';
   }
 
+  if (settings.inputPadding !== undefined) {
+    styles.padding = settings.inputPadding;
+  }
+
   if (attributes.styles.backgroundColor && !attributes.styles.inheritFromTheme) {
     styles.backgroundColor = attributes.styles.backgroundColor;
   }

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

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
+import { useSelect } from '@wordpress/data';
 import ParagraphEdit from './paragraph_edit.jsx';
 import formatLabel from './label_formatter.jsx';
 import { inputStylesPropTypes } from './input_styles_settings.jsx';
@@ -12,6 +13,10 @@ const TextInputEdit = ({
   styles,
   className,
 }) => {
+  const settings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
   const input = useRef(null);
   const id = `${name}_${Math.random().toString(36).substring(2, 15)}`;
 
@@ -26,6 +31,10 @@ const TextInputEdit = ({
     borderStyle: 'solid',
   } : {};
 
+  if (settings.inputPadding !== undefined) {
+    inputStyles.padding = settings.inputPadding;
+  }
+
   if (styles.fullWidth) {
     inputStyles.width = '100%';
   }