Add input padding form settings

[MAILPOET-2809]

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import {
   Panel,
   PanelBody,
+  RangeControl,
 } from '@wordpress/components';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
@@ -48,6 +49,14 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
             value={settings.fontSize}
             onChange={partial(updateStyles, 'fontSize')}
           />
+          <RangeControl
+            label={MailPoet.I18n.t('formSettingsInputPadding')}
+            value={settings.inputPadding !== undefined ? settings.inputPadding : 5}
+            min={0}
+            max={30}
+            allowReset
+            onChange={partial(updateStyles, 'inputPadding')}
+          />
         </div>
       </PanelBody>
     </Panel>

views/form/editor.html

@@ -52,6 +52,7 @@
   'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'),
   'formSettingsBorderSize': _x('Border Size', 'A label for checkbox in form style settings'),
   'formSettingsBorderRadius': _x('Border Radius', 'A label for checkbox in form style settings'),
+  'formSettingsInputPadding': _x('Input Padding', 'A label for form style settings'),
   'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
   'formSettingsApplyToAll': __('Apply styles to all inputs'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),