Add different rendering for sidebar widget preview type

[MAILPOET-2743]

assets/css/src/components-public/_public.scss

@@ -171,6 +171,26 @@ $form-columns-space-between: 20px;
   }
 }
 
+.mailpoet_widget_preview {
+  background-color: #ffffff;
+  height: 100%;
+  left: 0;
+  max-width: 100% !important;
+  position: fixed;
+  top: 0;
+  width: 100% !important;
+  z-index: 100000;
+
+  .widget-area {
+    display: block !important;
+    float: none !important;
+    margin: 10px auto;
+    max-height: calc(100vh - 60px);
+    overflow-y: auto !important;
+    width: 340px;
+  }
+}
+
 .mailpoet_form_popup_overlay {
   background-color: black;
   display: none;

assets/js/src/public.jsx

@@ -214,5 +214,13 @@ jQuery(($) => {
     });
 
     $('.mailpoet_captcha_update').on('click', updateCaptcha);
+
+    // Display only form on widget preview page
+    // This should keep element visible and still placed within the content but hide everything else
+    const widgetPreview = $('#mailpoet_widget_preview');
+    if (widgetPreview.length) {
+      $('#mailpoet_widget_preview').siblings().hide();
+      $('#mailpoet_widget_preview').parents().siblings().hide();
+    }
   });
 });

lib/Form/PreviewPage.php

@@ -44,7 +44,14 @@ class PreviewPage {
     if (!is_array($formData)) {
       return '';
     }
-    return $this->getPostContent() . $this->getFormContent($formData, $formId, $formType);
+    return $this->templateRenderer->render(
+      'form/form_preview.html',
+      [
+        'post' => $this->getPostContent(),
+        'form' => $this->getFormContent($formData, $formId, $formType),
+        'formType' => $formType,
+      ]
+    );
   }
 
   public function renderTitle() {

lib/Form/PreviewWidget.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace MailPoet\Form;
+
+class PreviewWidget extends \WP_Widget {
+
+  /** @var string */
+  private $formHtml;
+
+  public function __construct($formHtml) {
+    $this->formHtml = $formHtml;
+    parent::__construct(
+      'mailpoet_form_preview',
+      'Dummy form form preview',
+      []
+    );
+  }
+
+  /**
+   * Output the widget itself.
+   */
+  public function widget($args, $instance = null) {
+    echo $this->formHtml;
+  }
+}

views/form/form_preview.html

@@ -0,0 +1,14 @@
+<% block content %>
+  <% if(formType == 'sidebar') %>
+    <div id="mailpoet_widget_preview" class="mailpoet_widget_preview">
+      <div id="sidebar" class="sidebar widget-area si-sidebar-container">
+        <div class="widget si-widget">
+          <%= form | raw %>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <%= post | raw %>
+    <%= form | raw %>
+  <% endif %>
+<% endblock %>