Render input padding

[MAILPOET-2809]

lib/Form/Block/BlockRendererHelper.php

@@ -130,19 +130,6 @@ class BlockRendererHelper {
     return $rules ? 'style="' . implode("", $rules) . '"' : '';
   }
 
-  public function renderBlockAlignment(array $formSettings) {
-    $rules = [];
-    if (isset($formSettings['alignment'])) {
-      if ($formSettings['alignment'] === 'right') {
-        $rules[] = 'margin: 0 0 0 auto';
-      }
-      if ($formSettings['alignment'] === 'center') {
-        $rules[] = 'margin: 0 auto';
-      }
-    }
-    return $rules ? 'style="' . implode("", $rules) . '"' : '';
-  }
-
   public function renderInputPlaceholder(array $block): string {
     $html = '';
     // if the label is displayed as a placeholder,

lib/Form/Block/Date.php

@@ -2,6 +2,7 @@
 
 namespace MailPoet\Form\Block;
 
+use MailPoet\Form\BlockStylesRenderer;
 use MailPoet\Form\BlockWrapperRenderer;
 
 class Date {
@@ -12,9 +13,17 @@ class Date {
   /** @var BlockWrapperRenderer */
   private $wrapper;
 
-  public function __construct(BlockRendererHelper $rendererHelper, BlockWrapperRenderer $wrapper) {
+  /** @var BlockStylesRenderer */
+  private $blockStylesRenderer;
+
+  public function __construct(
+    BlockRendererHelper $rendererHelper,
+    BlockStylesRenderer $blockStylesRenderer,
+    BlockWrapperRenderer $wrapper
+  ) {
     $this->rendererHelper = $rendererHelper;
     $this->wrapper = $wrapper;
+    $this->blockStylesRenderer = $blockStylesRenderer;
   }
 
   public function render(array $block, array $formSettings): string {
@@ -46,7 +55,7 @@ class Date {
     foreach ($dateSelectors as $dateSelector) {
       if ($dateSelector === 'DD') {
         $html .= '<select class="mailpoet_date_day" ';
-        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
+        $html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a day', 'mailpoet'),
         ]);
@@ -55,7 +64,7 @@ class Date {
         $html .= '</select>';
       } else if ($dateSelector === 'MM') {
         $html .= '<select class="mailpoet_select mailpoet_date_month" ';
-        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
+        $html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a month', 'mailpoet'),
         ]);
@@ -64,7 +73,7 @@ class Date {
         $html .= '</select>';
       } else if ($dateSelector === 'YYYY') {
         $html .= '<select class="mailpoet_date_year" ';
-        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
+        $html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a year', 'mailpoet'),
         ]);

lib/Form/Block/Select.php

@@ -2,6 +2,7 @@
 
 namespace MailPoet\Form\Block;
 
+use MailPoet\Form\BlockStylesRenderer;
 use MailPoet\Form\BlockWrapperRenderer;
 use MailPoet\WP\Functions as WPFunctions;
 
@@ -16,10 +17,19 @@ class Select {
   /** @var BlockWrapperRenderer */
   private $wrapper;
 
-  public function __construct(BlockRendererHelper $rendererHelper, BlockWrapperRenderer $wrapper, WPFunctions $wp) {
+  /** @var BlockStylesRenderer */
+  private $blockStylesRenderer;
+
+  public function __construct(
+    BlockRendererHelper $rendererHelper,
+    BlockWrapperRenderer $wrapper,
+    BlockStylesRenderer $blockStylesRenderer,
+    WPFunctions $wp
+  ) {
     $this->rendererHelper = $rendererHelper;
     $this->wrapper = $wrapper;
     $this->wp = $wp;
+    $this->blockStylesRenderer = $blockStylesRenderer;
   }
 
   public function render(array $block, array $formSettings): string {
@@ -33,7 +43,7 @@ class Select {
       class="mailpoet_select"
       name="' . $fieldName . '" '
       . $automationId
-      . $this->rendererHelper->renderBlockAlignment($formSettings)
+      . 'style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"'
       . '>';
 
     if (isset($block['params']['label_within']) && $block['params']['label_within']) {

lib/Form/Block/Submit.php

@@ -22,7 +22,7 @@ class Submit {
     $this->stylesRenderer = $stylesRenderer;
   }
 
-  public function render(array $block): string {
+  public function render(array $block, array $formSettings): string {
     $html = '';
 
     $html .= '<input type="submit" class="mailpoet_submit" ';
@@ -31,7 +31,7 @@ class Submit {
 
     $html .= 'data-automation-id="subscribe-submit-button" ';
 
-    $styles = $this->stylesRenderer->renderForButton($block['styles'] ?? []);
+    $styles = $this->stylesRenderer->renderForButton($block['styles'] ?? [], $formSettings);
 
     if ($styles) {
       $html .= 'style="' . $styles . '" ';

lib/Form/Block/Text.php

@@ -36,7 +36,7 @@ class Text {
       $automationId = 'data-automation-id="form_' . $block['id'] . '" ';
     }
 
-    $styles = $this->inputStylesRenderer->renderForTextInput($block['styles'] ?? []);
+    $styles = $this->inputStylesRenderer->renderForTextInput($block['styles'] ?? [], $formSettings);
 
     if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {
       $automationId = 'data-automation-id="form_' . $block['id'] . '" ';

lib/Form/BlockStylesRenderer.php

@@ -3,7 +3,7 @@
 namespace MailPoet\Form;
 
 class BlockStylesRenderer {
-  public function renderForTextInput(array $styles): string {
+  public function renderForTextInput(array $styles, array $formSettings = []): string {
     $rules = [];
     if (isset($styles['full_width']) && intval($styles['full_width'])) {
       $rules[] = 'width:100%;';
@@ -23,10 +23,13 @@ class BlockStylesRenderer {
     if (isset($styles['border_color'])) {
       $rules[] = "border-color:{$styles['border_color']};";
     }
+    if (isset($formSettings['inputPadding'])) {
+      $rules[] = "padding:{$formSettings['inputPadding']}px;";
+    }
     return implode('', $rules);
   }
 
-  public function renderForButton(array $styles): string {
+  public function renderForButton(array $styles, array $formSettings = []): string {
     $rules = [];
     if (isset($styles['font_color'])) {
       $rules[] = "color:{$styles['font_color']};";
@@ -37,6 +40,25 @@ class BlockStylesRenderer {
     if (isset($styles['bold']) && $styles['bold'] === '1') {
       $rules[] = "font-weight:bold;";
     }
+    if (isset($formSettings['inputPadding'])) {
+      $rules[] = "padding:{$formSettings['inputPadding']}px;";
+    }
     return $this->renderForTextInput($styles) . implode('', $rules);
   }
+
+  public function renderForSelect(array $styles, array $formSettings = []): string {
+    $rules = [];
+    if (isset($formSettings['inputPadding'])) {
+      $rules[] = "padding:{$formSettings['inputPadding']}px;";
+    }
+    if (isset($formSettings['alignment'])) {
+      if ($formSettings['alignment'] === 'right') {
+        $rules[] = 'margin: 0 0 0 auto;';
+      }
+      if ($formSettings['alignment'] === 'center') {
+        $rules[] = 'margin: 0 auto;';
+      }
+    }
+    return implode('', $rules);
+  }
 }

lib/Form/BlocksRenderer.php

@@ -150,7 +150,7 @@ class BlocksRenderer {
         break;
 
       case 'submit':
-        $html .= $this->submit->render($block);
+        $html .= $this->submit->render($block, $formSettings);
         break;
     }
     return $html;

tests/unit/Form/Block/DateTest.php

@@ -4,6 +4,7 @@ namespace MailPoet\Test\Form\Block;
 
 use MailPoet\Form\Block\BlockRendererHelper;
 use MailPoet\Form\Block\Date;
+use MailPoet\Form\BlockStylesRenderer;
 use MailPoet\Form\BlockWrapperRenderer;
 use MailPoet\Test\Form\HtmlParser;
 use MailPoetVendor\Carbon\Carbon;
@@ -21,6 +22,9 @@ class DateTest extends \MailPoetUnitTest {
   /** @var MockObject & BlockWrapperRenderer */
   private $wrapperMock;
 
+  /** @var MockObject & BlockStylesRenderer */
+  private $blockStylesRenderer;
+
   /** @var HtmlParser */
   private $htmlParser;
 
@@ -42,10 +46,12 @@ class DateTest extends \MailPoetUnitTest {
 
   public function _before() {
     parent::_before();
+    $this->blockStylesRenderer = $this->createMock(BlockStylesRenderer::class);
+    $this->blockStylesRenderer->method('renderForSelect')->willReturn('');
     $this->baseMock = $this->createMock(BlockRendererHelper::class);
     $this->wrapperMock = $this->createMock(BlockWrapperRenderer::class);
     $this->wrapperMock->method('render')->will($this->returnArgument(1));
-    $this->date = new Date($this->baseMock, $this->wrapperMock);
+    $this->date = new Date($this->baseMock, $this->blockStylesRenderer, $this->wrapperMock);
     $this->htmlParser = new HtmlParser();
   }
 

tests/unit/Form/Block/SelectTest.php

@@ -4,6 +4,7 @@ namespace MailPoet\Test\Form\Block;
 
 use MailPoet\Form\Block\BlockRendererHelper;
 use MailPoet\Form\Block\Select;
+use MailPoet\Form\BlockStylesRenderer;
 use MailPoet\Form\BlockWrapperRenderer;
 use MailPoet\Models\Subscriber;
 use MailPoet\WP\Functions;
@@ -22,6 +23,9 @@ class SelectTest extends \MailPoetUnitTest {
   /** @var MockObject & BlockRendererHelper */
   private $rendererHelperMock;
 
+  /** @var MockObject & BlockStylesRenderer */
+  private $blockStylesRenderer;
+
   /** @var MockObject & BlockWrapperRenderer */
   private $wrapperMock;
 
@@ -36,7 +40,9 @@ class SelectTest extends \MailPoetUnitTest {
     $this->rendererHelperMock->method('renderLabel')->will($this->returnValue('<label></label>'));
     $this->rendererHelperMock->method('getFieldLabel')->will($this->returnValue('Field label'));
     $this->rendererHelperMock->method('getFieldValue')->will($this->returnValue('1'));
-    $this->selectBlock = new Select($this->rendererHelperMock, $this->wrapperMock, $this->wpMock);
+    $this->blockStylesRenderer = $this->createMock(BlockStylesRenderer::class);
+    $this->blockStylesRenderer->method('renderForSelect')->willReturn('');
+    $this->selectBlock = new Select($this->rendererHelperMock, $this->wrapperMock, $this->blockStylesRenderer, $this->wpMock);
     $this->block = [
       'id' => 'status',
       'type' => 'select',

tests/unit/Form/Block/SubmitTest.php

@@ -52,7 +52,7 @@ class SubmitTest extends \MailPoetUnitTest {
   public function testItShouldRenderSubmit() {
     $this->rendererHelperMock->expects($this->once())->method('getFieldLabel')->willReturn('Submit label');
     $this->stylesRendererMock->expects($this->once())->method('renderForButton')->willReturn('border-radius: 10px;');
-    $html = $this->submit->render($this->block);
+    $html = $this->submit->render($this->block, []);
     $input = $this->htmlParser->getElementByXpath($html, '//input');
     $type = $this->htmlParser->getAttribute($input, 'type');
     $value = $this->htmlParser->getAttribute($input, 'value');

tests/unit/Form/BlockStylesRendererTest.php

@@ -35,11 +35,15 @@ class BlockStylesRendererTest extends \MailPoetUnitTest {
       'background_color' => '#dddddd',
       'bold' => '1',
     ];
-    $result = $this->renderer->renderForTextInput($styles);
+    $settings = [
+      'inputPadding' => '40',
+    ];
+    $result = $this->renderer->renderForTextInput($styles, $settings);
     expect($result)->contains('border-radius:10px;');
     expect($result)->contains('border-color:#fff;');
     expect($result)->contains('border-width:10px;');
     expect($result)->contains('background-color:#dddddd;');
+    expect($result)->contains('padding:40px;');
     expect($result)->notContains('font-weight:bold;');
   }
 
@@ -62,7 +66,10 @@ class BlockStylesRendererTest extends \MailPoetUnitTest {
       'font_size' => 8,
       'bold' => '1',
     ];
-    $result = $this->renderer->renderForButton($styles);
+    $settings = [
+      'inputPadding' => '40',
+    ];
+    $result = $this->renderer->renderForButton($styles, $settings);
     expect($result)->contains('border-radius:10px;');
     expect($result)->contains('border-color:#fff;');
     expect($result)->contains('border-width:10px;');
@@ -70,5 +77,12 @@ class BlockStylesRendererTest extends \MailPoetUnitTest {
     expect($result)->contains('color:#eeeeee;');
     expect($result)->contains('font-size:8px;');
     expect($result)->contains('font-weight:bold;');
+    expect($result)->contains('padding:40px;');
+  }
+
+  public function testItShouldRenderSegmentInputStyles() {
+    expect($this->renderer->renderForSelect([], ['inputPadding' => 10]))->equals('padding:10px;');
+    expect($this->renderer->renderForSelect([], ['alignment' => 'right']))->equals('margin: 0 0 0 auto;');
+    expect($this->renderer->renderForSelect([], ['alignment' => 'center']))->equals('margin: 0 auto;');
   }
 }