Render form block custom classes on frontend

[MAILPOET-2746]

lib/Form/Block/Divider.php

@@ -3,7 +3,8 @@
 namespace MailPoet\Form\Block;
 
 class Divider {
-  public function render(): string {
+  public function render($block): string {
-    return '<hr class="mailpoet_divider" />';
+    $classes = isset($block['params']['class_name']) ? " " . $block['params']['class_name'] : '';
+    return '<hr class="mailpoet_divider' . $classes . '" />';
   }
 }

lib/Form/Block/Html.php

@@ -22,7 +22,8 @@ class Html {
       $text = nl2br($text);
     }
 
-    $html .= '<div class="mailpoet_paragraph" ' . $this->rendererHelper->renderFontStyle($formSettings) . '>';
+    $classes = isset($block['params']['class_name']) ? " " . $block['params']['class_name'] : '';
+    $html .= '<div class="mailpoet_paragraph' . $classes . '" ' . $this->rendererHelper->renderFontStyle($formSettings) . '>';
     $html .= $text;
     $html .= '</div>';
 

lib/Form/BlockWrapperRenderer.php

@@ -2,10 +2,9 @@
 
 namespace MailPoet\Form;
 
-use MailPoet\Models\Form;
-
 class BlockWrapperRenderer {
   public function render(array $block, string $blockContent): string {
-    return '<div class="mailpoet_paragraph">' . $blockContent . '</div>';
+    $classes = isset($block['params']['class_name']) ? " " . $block['params']['class_name'] : '';
+    return '<div class="mailpoet_paragraph' . $classes . '">' . $blockContent . '</div>';
   }
 }

lib/Form/BlocksRenderer.php

@@ -98,7 +98,7 @@ class BlocksRenderer {
         break;
 
       case 'divider':
-        $html .= $this->divider->render();
+        $html .= $this->divider->render($block);
         break;
 
       case 'checkbox':

tests/unit/Form/Block/DividerTest.php

@@ -8,13 +8,29 @@ class DividerTest extends \MailPoetUnitTest {
   /** @var Divider */
   private $divider;
 
+  private $block = [
+    'type' => 'divider',
+    'name' => 'Divider',
+    'id' => 'divider',
+    'unique' => '1',
+    'static' => '0',
+    'params' => [],
+    'position' => '1',
+  ];
+
   public function _before() {
     parent::_before();
     $this->divider = new Divider();
   }
 
   public function testItShouldRenderDivider() {
-    $html = $this->divider->render();
+    $html = $this->divider->render($this->block);
     expect($html)->equals('<hr class="mailpoet_divider" />');
   }
+
+  public function testItShouldRenderCustomClass() {
+    $this->block['params']['class_name'] = 'my_class';
+    $html = $this->divider->render($this->block);
+    expect($html)->equals('<hr class="mailpoet_divider my_class" />');
+  }
 }

tests/unit/Form/Block/HtmlTest.php

@@ -10,9 +10,9 @@ class HtmlTest extends \MailPoetUnitTest {
   private $html;
 
   private $block = [
-    'type' => 'divider',
+    'type' => 'html',
-    'name' => 'Divider',
+    'name' => 'Html',
-    'id' => 'divider',
+    'id' => 'html',
     'unique' => '1',
     'static' => '0',
     'params' => [
@@ -32,6 +32,13 @@ class HtmlTest extends \MailPoetUnitTest {
     expect($html)->equals("<div class=\"mailpoet_paragraph\" >line1<br />\nline2</div>");
   }
 
+  public function testItShouldRenderCustomClass() {
+    $block = $this->block;
+    $block['params']['class_name'] = 'my_class';
+    $html = $this->html->render($block, []);
+    expect($html)->equals("<div class=\"mailpoet_paragraph my_class\" >line1<br />\nline2</div>");
+  }
+
   public function testItShouldRenderCustomHtmlWithoutAutomaticBrs() {
     $block = $this->block;
     $block['params']['nl2br'] = '';

tests/unit/Form/BlockWrapperRendererTest.php

@@ -12,4 +12,12 @@ class BlockWrapperRendererTest extends \MailPoetUnitTest {
     $result = $renderer->render($block, 'content');
     expect($result)->equals('<div class="mailpoet_paragraph">content</div>');
   }
+
+  public function testItShouldWrapRenderCustomClasses() {
+    $renderer = new BlockWrapperRenderer();
+    $block = Fixtures::get('simple_form_body')[0];
+    $block['params']['class_name'] = 'class1 class2';
+    $result = $renderer->render($block, 'content');
+    expect($result)->equals('<div class="mailpoet_paragraph class1 class2">content</div>');
+  }
 }