From deba1e438f4032fb8d517298d30c569176e1665d Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 20 Apr 2020 14:54:53 +0200
Subject: [PATCH] Display inputs with padding

[MAILPOET-2809]
---
 .../js/src/form_editor/blocks/custom_select/edit.jsx | 12 +++++++++++-
 .../src/form_editor/blocks/custom_textarea/edit.jsx  |  8 ++++++++
 assets/js/src/form_editor/blocks/submit/edit.jsx     | 10 ++++++++++
 assets/js/src/form_editor/blocks/text_input_edit.jsx |  9 +++++++++
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/assets/js/src/form_editor/blocks/custom_select/edit.jsx b/assets/js/src/form_editor/blocks/custom_select/edit.jsx
index aa7cb42457..4f543cda27 100644
--- a/assets/js/src/form_editor/blocks/custom_select/edit.jsx
+++ b/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}>
diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
index 71bdc89acf..f43733174f 100644
--- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
+++ b/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);
diff --git a/assets/js/src/form_editor/blocks/submit/edit.jsx b/assets/js/src/form_editor/blocks/submit/edit.jsx
index aec18e974e..78cde5aeab 100644
--- a/assets/js/src/form_editor/blocks/submit/edit.jsx
+++ b/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;
   }
diff --git a/assets/js/src/form_editor/blocks/text_input_edit.jsx b/assets/js/src/form_editor/blocks/text_input_edit.jsx
index 9973febfc0..255717537d 100644
--- a/assets/js/src/form_editor/blocks/text_input_edit.jsx
+++ b/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%';
   }