Merge pull request #1078 from Codeinwp/feat/live-preview-playground

Add Live Preview button for plugin page

Author: vytisbulkevicius

assets/blueprints/blueprint.json

@@ -0,0 +1,33 @@
+{
+    "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+	"_comment1": "Set the Wizard Setup page as landing page with preview environment (which disable distractions)",
+    "landingPage": "/wp-admin/admin.php?page=visualizer-setup-wizard&env=preview",
+    "_comment2": "Preferred WordPress instance specifications",
+    "preferredVersions": {
+        "php": "8.0",
+        "wp": "latest"
+    },
+    "features": {
+        "_comment3.1": "Allow networking for internet access",
+        "networking": true
+    },
+    "steps": [
+        {
+            "_comment4.1": "Login to the WordPress instance",
+            "step": "login",
+            "username": "admin",
+            "password": "password"
+        },
+        {
+            "_comment4.2": "Install the Visualizer plugin",
+            "step": "installPlugin",
+            "pluginZipFile": {
+                "resource": "wordpress.org/plugins",
+                "slug": "visualizer"
+            },
+            "options": {
+                "activate": true
+            }
+        }
+    ]
+}

classes/Visualizer/Module/Admin.php

@@ -671,14 +671,14 @@ public function registerAdminMenu() {
 			__( 'Chart Library', 'visualizer' ),
 			__( 'Chart Library', 'visualizer' ),
 			'edit_posts',
-			admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME )
+			'admin.php?page=' . Visualizer_Plugin::NAME
 		);
 		add_submenu_page(
 			Visualizer_Plugin::NAME,
 			__( 'Add New Chart', 'visualizer' ),
 			__( 'Add New Chart', 'visualizer' ),
 			'edit_posts',
-			admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew' )
+			'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew'
 		);
 		add_submenu_page(
 			Visualizer_Plugin::NAME,

js/setup-wizard.js

@@ -7,6 +7,48 @@
  */
 /* jshint unused:false */
 jQuery(function ($) {
+
+	/**
+	 * Check if the user is in live preview mode.
+	 * Live Preview is used in WordPress Playground to test the plugin.
+	 * Use this check to deactivate any process that does not showcase the plugin features (e.g. subscription to the newsletter, etc.)
+	 * 
+	 * @type {boolean}
+	 */
+	const isLivePreview = window.location.search.includes('env=preview');
+
+	/**
+	 * Redirect to draft page after subscribe (optional).
+	 * 
+	 * @param {Object} postData - Post data. 
+	 */
+	const goToDraftPage = function ( postData = {} ) {
+		postData ??= {};
+		postData.action ??= 'visualizer_wizard_step_process';
+		postData.security ??= visualizerSetupWizardData.ajax.security;
+		postData.step ??= 'step_subscribe';
+
+		// Subscribe the user using the email if provided. Redirect to the draft page.
+		$.post(visualizerSetupWizardData.ajax.url, postData, function (res) {
+
+			// Toggle the redirect popup.
+			$('.redirect-popup').find('h3.popup-title').html(res.message);
+			$('.redirect-popup').show();
+
+			if (1 === res.status) {
+				setTimeout(function () {
+					window.location.href = res.redirect_to;
+				}, 5000);
+			} else {
+				$('.redirect-popup').hide();
+			}
+			currentStep.find('.spinner').removeClass('is-active');
+		}).fail(function () {
+			$('.redirect-popup').hide();
+			currentStep.find('.spinner').removeClass('is-active');
+		});
+	}
+
 	var provideContent = function(id, stepDirection, stepPosition, selStep, callback) {
 		// Import chart data.
 		if ( 1 == id ) {
@@ -119,17 +161,22 @@ jQuery(function ($) {
 		".btn-primary:not(.next-btn,.vz-create-page,.vz-subscribe)",
 		function (e) {
 			var stepNumber = $(this).data("step_number");
+			
 			switch (stepNumber) {
 				case 1:
 					if ($(".vz-radio-btn").is(":checked")) {
 						$('#smartwizard').smartWizard('next');
 					}
 					break;
 				case 3:
-					var urlParams = new URLSearchParams(window.location.search);
-					urlParams.set('preview_chart', Date.now());
-					window.location.hash = "#step-3";
-					window.location.search = urlParams;
+					if ( isLivePreview ) {
+						$('#smartwizard').smartWizard('next');
+					} else {
+						var urlParams = new URLSearchParams(window.location.search);
+						urlParams.set('preview_chart', Date.now());
+						window.location.hash = "#step-3";
+						window.location.search = urlParams;
+					} 
 					break;
 				case 4:
 					$('#step-4').find('.spinner').addClass('is-active');
@@ -181,7 +228,11 @@ jQuery(function ($) {
 			},
 			function (res) {
 				if (res.status > 0) {
-					$("#smartwizard").smartWizard("next");
+					if ( isLivePreview ) {
+						goToDraftPage();
+					} else {
+						$("#smartwizard").smartWizard("next");
+					}
 				}
 				_this.next(".spinner").removeClass("is-active");
 			}
@@ -235,21 +286,7 @@ jQuery(function ($) {
 		var currentStep = $( '.vz-wizard-wrap .tab-pane:last-child' );
 		currentStep.find(".spinner").addClass("is-active");
 
-		$.post(visualizerSetupWizardData.ajax.url, postData, function (res) {
-			$('.redirect-popup').find('h3.popup-title').html(res.message);
-			$('.redirect-popup').show();
-			if (1 === res.status) {
-				setTimeout(function () {
-					window.location.href = res.redirect_to;
-				}, 5000);
-			} else {
-				$('.redirect-popup').hide();
-			}
-			currentStep.find('.spinner').removeClass('is-active');
-		}).fail(function () {
-			$('.redirect-popup').hide();
-			currentStep.find('.spinner').removeClass('is-active');
-		});
+		goToDraftPage( postData );
 		e.preventDefault();
 	});