Render form alignment

[MAILPOET-2809]

lib/Form/Block/BlockRendererHelper.php

@@ -130,6 +130,19 @@ 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

@@ -20,11 +20,11 @@ class Date {
   public function render(array $block, array $formSettings): string {
     $html = '';
     $html .= $this->rendererHelper->renderLabel($block, $formSettings);
-    $html .= $this->renderDateSelect($block);
+    $html .= $this->renderDateSelect($block, $formSettings);
     return $this->wrapper->render($block, $html);
   }
 
-  private function renderDateSelect(array $block = []): string {
+  private function renderDateSelect(array $block = [], $formSettings = []): string {
     $html = '';
 
     $fieldName = 'data[' . $this->rendererHelper->getFieldName($block) . ']';
@@ -46,6 +46,7 @@ class Date {
     foreach ($dateSelectors as $dateSelector) {
       if ($dateSelector === 'DD') {
         $html .= '<select class="mailpoet_date_day" ';
+        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a day', 'mailpoet'),
         ]);
@@ -54,6 +55,7 @@ class Date {
         $html .= '</select>';
       } else if ($dateSelector === 'MM') {
         $html .= '<select class="mailpoet_select mailpoet_date_month" ';
+        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a month', 'mailpoet'),
         ]);
@@ -62,6 +64,7 @@ class Date {
         $html .= '</select>';
       } else if ($dateSelector === 'YYYY') {
         $html .= '<select class="mailpoet_date_year" ';
+        $html .= $this->rendererHelper->renderBlockAlignment($formSettings);
         $html .= $this->rendererHelper->getInputValidation($block, [
           'required-message' => __('Please select a year', 'mailpoet'),
         ]);

lib/Form/Block/Select.php

@@ -29,7 +29,12 @@ class Select {
     $automationId = ($block['id'] == 'status') ? 'data-automation-id="form_status"' : '';
 
     $html .= $this->rendererHelper->renderLabel($block, $formSettings);
-    $html .= '<select class="mailpoet_select" name="' . $fieldName . '" ' . $automationId . '>';
+    $html .= '<select
+      class="mailpoet_select"
+      name="' . $fieldName . '" '
+      . $automationId
+      . $this->rendererHelper->renderBlockAlignment($formSettings)
+      . '>';
 
     if (isset($block['params']['label_within']) && $block['params']['label_within']) {
       $label = $this->rendererHelper->getFieldLabel($block);

lib/Form/Renderer.php

@@ -119,6 +119,10 @@ class Renderer {
       $styles[] = 'padding: ' . $formSettings['formPadding'] . 'px';
     }
 
+    if (isset($formSettings['alignment'])) {
+      $styles[] = 'text-align: ' . $formSettings['alignment'];
+    }
+
     return join(';', $styles);
   }
 }

tests/unit/Form/RendererTest.php

@@ -132,6 +132,13 @@ class RendererTest extends \MailPoetUnitTest {
     expect($styles)->equals('padding: 22px');
   }
 
+  public function testItShouldRenderAlignment() {
+    $form = Fixtures::get('simple_form_body');
+    $form['settings'] = ['alignment' => 'right'];
+    $styles = $this->renderer->renderFormElementStyles($form);
+    expect($styles)->equals('text-align: right');
+  }
+
   public function testItShouldRenderBorderWithRadius() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['borderSize' => '22', 'borderColor' => 'red', 'borderRadius' => '11'];