From 63a972db4a9702a99c3d6bfcb5f82cea7ea09e55 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Wed, 20 May 2020 12:16:17 +0200 Subject: [PATCH] Move inlined form styles to form styles in style element [MAILPOET-2811] --- lib/Form/DisplayFormInWPContent.php | 1 - lib/Form/PreviewPage.php | 1 - lib/Form/Renderer.php | 6 +--- lib/Form/Util/Styles.php | 29 ++++++++--------- lib/Form/Widget.php | 1 - .../unit/Form/DisplayFormInWPContentTest.php | 1 - tests/unit/Form/Util/StylesTest.php | 32 ++++++++----------- views/form/front_end_form.html | 1 - 8 files changed, 28 insertions(+), 44 deletions(-) diff --git a/lib/Form/DisplayFormInWPContent.php b/lib/Form/DisplayFormInWPContent.php index 4ff54ab219..f7769b968d 100644 --- a/lib/Form/DisplayFormInWPContent.php +++ b/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 diff --git a/lib/Form/PreviewPage.php b/lib/Form/PreviewPage.php index 5f628184a5..d2a518febe 100644 --- a/lib/Form/PreviewPage.php +++ b/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, diff --git a/lib/Form/Renderer.php b/lib/Form/Renderer.php index aa404442f5..5ae79c315b 100644 --- a/lib/Form/Renderer.php +++ b/lib/Form/Renderer.php @@ -30,7 +30,7 @@ class Renderer { $html = ''; return $html; @@ -94,8 +94,4 @@ class Renderer { '; } - - public function renderFormElementStyles(array $form): string { - return $this->styleUtils->renderFormElementStyles($form); - } } diff --git a/lib/Form/Util/Styles.php b/lib/Form/Util/Styles.php index 075bb917a0..daaaec4597 100644 --- a/lib/Form/Util/Styles.php +++ b/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; } } diff --git a/lib/Form/Widget.php b/lib/Form/Widget.php index bac812ba22..351be56ec6 100644 --- a/lib/Form/Widget.php +++ b/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 diff --git a/tests/unit/Form/DisplayFormInWPContentTest.php b/tests/unit/Form/DisplayFormInWPContentTest.php index c0cd27189b..34ece0abb1 100644 --- a/tests/unit/Form/DisplayFormInWPContentTest.php +++ b/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(''); $this->renderer->expects($this->any())->method('renderHTML')->willReturn('
'); - $this->renderer->expects($this->any())->method('renderFormElementStyles')->willReturn(''); $this->hook = new DisplayFormInWPContent($this->wp, $this->repository, $this->renderer, $this->assetsController, $this->templateRenderer); } diff --git a/tests/unit/Form/Util/StylesTest.php b/tests/unit/Form/Util/StylesTest.php index 48f2639ea6..f77f79f612 100644 --- a/tests/unit/Form/Util/StylesTest.php +++ b/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->renderFormDivWrapperStyles($form, '#prefix'); + $styles = $this->styles->renderFormSettingsStyles($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); - expect($styles)->equals('color: red'); + $styles = $this->styles->renderFormSettingsStyles($form, '#prefix'); + 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->renderFormDivWrapperStyles($form, '#prefix'); + $styles = $this->styles->renderFormSettingsStyles($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); - expect($styles)->equals('padding: 22px'); + $styles = $this->styles->renderFormSettingsStyles($form, '#prefix'); + 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); - expect($styles)->equals('text-align: right'); + $styles = $this->styles->renderFormSettingsStyles($form, '#prefix'); + 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->renderFormDivWrapperStyles($form, 'prefix'); + $styles = $this->styles->renderFormSettingsStyles($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->renderFormDivWrapperStyles($form, 'prefix'); + $styles = $this->styles->renderFormSettingsStyles($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->renderFormDivWrapperStyles($form, 'prefix'); + $styles = $this->styles->renderFormSettingsStyles($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->renderFormDivWrapperStyles($form, 'prefix'); + $styles = $this->styles->renderFormSettingsStyles($form, '#prefix'); expect($styles)->contains('background-image: url(xxx)'); expect($styles)->contains('background-position: center top'); expect($styles)->contains('background-repeat: no-repeat'); diff --git a/views/form/front_end_form.html b/views/form/front_end_form.html index 90521bef5f..5d820a3b94 100644 --- a/views/form/front_end_form.html +++ b/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 %>"