Move inlined form styles to form styles in style element

[MAILPOET-2811]

lib/Form/DisplayFormInWPContent.php

@@ -140,7 +140,6 @@ class DisplayFormInWPContent {
       'form_type' => $displayType,
       'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
       'html' => $this->formRenderer->renderHTML($formData),
-      'form_element_styles' => $this->formRenderer->renderFormElementStyles($formData),
     ];
 
     // (POST) non ajax success/error variables

lib/Form/PreviewPage.php

@@ -90,7 +90,6 @@ class PreviewPage {
       'form_type' => $formType,
       'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
       'html' => $this->formRenderer->renderHTML($formData),
-      'form_element_styles' => $this->formRenderer->renderFormElementStyles($formData),
       'success' => $formType === 'others',
       'error' => $formType === 'others',
       'delay' => 1,

lib/Form/Renderer.php

@@ -30,7 +30,7 @@ class Renderer {
     $html = '<style type="text/css">';
     $html .= '.mailpoet_hp_email_label{display:none!important;}'; // move honeypot field out of sight
     $html .= $this->styleUtils->prefixStyles($this->getCustomStyles($form), $prefix);
-    $html .= $this->styleUtils->renderFormDivWrapperStyles($form, $prefix);
+    $html .= $this->styleUtils->renderFormSettingsStyles($form, $prefix);
     $html .= '</style>';
 
     return $html;
@@ -94,8 +94,4 @@ class Renderer {
       <input class="mailpoet_recaptcha_field" type="hidden" name="recaptcha">
     </div>';
   }
-
-  public function renderFormElementStyles(array $form): string {
-    return $this->styleUtils->renderFormElementStyles($form);
-  }
 }

lib/Form/Util/Styles.php

@@ -111,10 +111,11 @@ EOL;
     return implode(PHP_EOL, $formattedStyles);
   }
 
-  public function renderFormDivWrapperStyles(array $form, string $selector = null): string {
+  public function renderFormSettingsStyles(array $form, string $selector = null): string {
     if (is_null($selector)) return '';
     if (!isset($form['settings'])) return '';
     $formSettings = $form['settings'];
+    // Wrapper styles
     $styles = [];
 
     if (isset($formSettings['backgroundColor'])) {
@@ -146,28 +147,26 @@ EOL;
       $styles[] = 'background-repeat: ' . $backgroundRepeat;
       $styles[] = 'background-size: ' . $backgroundSize;
     }
-    $media = "@media (max-width: 500px) {{$selector} {background-image: none;}}";
-
-    return $selector . '{' . join(';', $styles) . '}' . $media;
-  }
-
-  public function renderFormElementStyles(array $form): string {
-    if (!isset($form['settings'])) return '';
-    $formSettings = $form['settings'];
-    $styles = [];
 
     if (isset($formSettings['fontColor'])) {
       $styles[] = 'color: ' . trim($formSettings['fontColor']);
     }
 
-    if (isset($formSettings['form_padding'])) {
-      $styles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
-    }
-
     if (isset($formSettings['alignment'])) {
       $styles[] = 'text-align: ' . $formSettings['alignment'];
     }
+    $formWrapperStyles = $selector . '{' . join(';', $styles) . ';}';
 
-    return join(';', $styles);
+    // Media styles
+    $media = "@media (max-width: 500px) {{$selector} {background-image: none;}}";
+
+    // Form element styles
+    $formStyles = [];
+    if (isset($formSettings['form_padding'])) {
+      $formStyles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
+    }
+    $formElementStyles = $selector . ' form.mailpoet_form {' . join(';', $formStyles) . ';}';
+
+    return $formWrapperStyles . $formElementStyles . $media;
   }
 }

lib/Form/Widget.php

@@ -226,7 +226,6 @@ class Widget extends \WP_Widget {
         'after_widget' => $afterWidget,
         'before_title' => $beforeTitle,
         'after_title' => $afterTitle,
-        'form_element_styles' => $this->formRenderer->renderFormElementStyles($form),
       ];
 
       // (POST) non ajax success/error variables

tests/unit/Form/DisplayFormInWPContentTest.php

@@ -38,7 +38,6 @@ class DisplayFormInWPContentTest extends \MailPoetUnitTest {
     $this->renderer = $this->createMock(Renderer::class);
     $this->renderer->expects($this->any())->method('renderStyles')->willReturn('<style></style>');
     $this->renderer->expects($this->any())->method('renderHTML')->willReturn('<form></form>');
-    $this->renderer->expects($this->any())->method('renderFormElementStyles')->willReturn('');
     $this->hook = new DisplayFormInWPContent($this->wp, $this->repository, $this->renderer, $this->assetsController, $this->templateRenderer);
   }
 

tests/unit/Form/Util/StylesTest.php

@@ -35,60 +35,56 @@ class StylesTest extends \MailPoetUnitTest {
 
   public function testItShouldNotRenderStylesForFormWithoutSettings() {
     $form = Fixtures::get('simple_form_body');
-    $styles = $this->styles->renderFormElementStyles($form);
+    $styles = $this->styles->renderFormSettingsStyles($form);
     expect($styles)->equals('');
   }
 
   public function testItShouldRenderBackgroundColour() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['backgroundColor' => 'red'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, '#prefix');
     expect($styles)->contains('background-color: red');
   }
 
   public function testItShouldRenderFontColour() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['fontColor' => 'red'];
-    $styles = $this->styles->renderFormElementStyles($form);
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    expect($styles)->equals('color: red');
+    expect($styles)->contains('color: red');
   }
 
   public function testItShouldRenderBorder() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['border_size' => '22', 'border_color' => 'red'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, '#prefix');
     expect($styles)->contains('border: 22px solid red');
   }
 
   public function testItShouldRenderPadding() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['form_padding' => '22'];
-    $styles = $this->styles->renderFormElementStyles($form);
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    expect($styles)->equals('padding: 22px');
+    expect($styles)->contains('form.mailpoet_form {padding: 22px');
   }
 
   public function testItShouldRenderAlignment() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['alignment' => 'right'];
-    $styles = $this->styles->renderFormElementStyles($form);
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    expect($styles)->equals('text-align: right');
+    expect($styles)->contains('text-align: right');
   }
 
   public function testItShouldRenderBorderWithRadius() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['border_size' => '22', 'border_color' => 'red', 'border_radius' => '11'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
     expect($styles)->contains('border: 22px solid red;border-radius: 11px');
   }
 
   public function testItShouldRenderImageBackground() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['background_image_url' => 'xxx'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
     expect($styles)->contains('background-image: url(xxx)');
     expect($styles)->contains('background-position: center');
     expect($styles)->contains('background-repeat: no-repeat');
@@ -98,8 +94,7 @@ class StylesTest extends \MailPoetUnitTest {
   public function testItShouldRenderImageBackgroundTile() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'tile'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
     expect($styles)->contains('background-image: url(xxx)');
     expect($styles)->contains('background-position: center');
     expect($styles)->contains('background-repeat: repeat');
@@ -109,8 +104,7 @@ class StylesTest extends \MailPoetUnitTest {
   public function testItShouldRenderImageBackgroundFit() {
     $form = Fixtures::get('simple_form_body');
     $form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'fit'];
-    $form['styles'] = '.mailpoet_paragraph {}';
+    $styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
-    $styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
     expect($styles)->contains('background-image: url(xxx)');
     expect($styles)->contains('background-position: center top');
     expect($styles)->contains('background-repeat: no-repeat');

views/form/front_end_form.html

@@ -31,7 +31,6 @@
       action="<%= admin_url('admin-post.php?action=mailpoet_subscription_form') | raw %>"
       class="mailpoet_form mailpoet_form_form mailpoet_form_<%= form_type %>"
       novalidate
-      style="<%= form_element_styles %>"
       data-delay="<%= delay %>"
       data-position="<%= position %>"
       data-background-color="<%= backgroundColor %>"