Feat: new stackable admin page (#3633)

* move stackable settings to top level menu

* update settings url, remove script after execution

* update tests

* chore: version bumped to 3.19.2

* move stackable settings to top level menu

* update settings url, remove script after execution

* update tests

* redirect go premium

* update test

---------

Co-authored-by: [email protected] <>

Author: kaeizen

e2e/tests/admin.spec.ts

@@ -18,13 +18,15 @@ test( 'Activating Stackable should redirect to the Getting Started Page', async
 	await activate.click()
 
 	try {
-		await expect( page ).toHaveURL( /stackable-getting-started/ )
+		await expect( page ).toHaveURL( /stackable/ )
+		await expect( page.getByText( 'Welcome to Stackable' ) ).toBeVisible()
 	} catch {
 		await expect( page ).toHaveURL( /page=stackable/ )
 		await expect( page.getByRole( 'link', { name: 'Activate Free Version' } ) ).toBeVisible()
 		await page.getByRole( 'link', { name: 'Activate Free Version' } ).click()
 		await page.getByRole( 'link', { name: 'Skip', exact: true } ).click()
-		await expect( page ).toHaveURL( /stackable-getting-started/ )
+		await expect( page ).toHaveURL( /stackable/ )
+		await expect( page.getByText( 'Welcome to Stackable' ) ).toBeVisible()
 	}
 } )
 
@@ -36,7 +38,7 @@ test( 'Stackable settings should be saved', async ( {
 	// Start waiting for Stackable Settings JSON Response before visiting the page
 	let settings = stackable.waitForSettings()
 
-	await admin.visitAdminPage( 'options-general.php?page=stackable' )
+	await admin.visitAdminPage( 'admin.php?page=stackable-settings' )
 	// Make sure all Stackable settings are loaded
 	await settings
 

freemius.php

@@ -25,7 +25,7 @@ function sugb_fs() {
 			// Do not redirect to the getting started when in network activating
 			// in multisite or in the mainsite because it will redirect to a 404
 			// page.
-			$first_path = 'options-general.php?page=stackable-getting-started';
+			$first_path = 'admin.php?page=stackable';
 			if ( is_multisite() && is_main_site() ) {
 				$first_path = 'plugins.php';
 			}
@@ -34,7 +34,7 @@ function sugb_fs() {
 			// https://github.com/Freemius/wordpress-sdk/issues/674 If the menu
 			// slug is options-general, for a network activated plugin, all
 			// admin URLs will be broken. This is a temporary fix.
-			$menu_slug = 'options-general.php';
+			$menu_slug = 'stackable';
 			if ( is_multisite() && is_main_site() && is_plugin_active_for_network( plugin_basename( STACKABLE_FILE ) ) ) {
 				if ( ! empty( $_SERVER ) && isset( $_SERVER['REQUEST_URI'] ) && stripos( $_SERVER['REQUEST_URI'], '/admin.php' ) !== false ) {
 					$menu_slug = 'admin.php';
@@ -54,8 +54,8 @@ function sugb_fs() {
 				'menu'                => array(
 					'slug'       => 'stackable',
 					'first-path'  => $first_path,
-					'account'    => true,
-					'pricing'    => true,
+					'account'    => false,
+					'pricing'    => false,
 					'contact'    => true,
                     'support'    => false,
                     'affiliation' => false,

src/init.php

@@ -345,7 +345,7 @@ public function register_block_editor_assets() {
 				'devMode' => defined( 'WP_ENV' ) ? WP_ENV === 'development' : false,
 				'cdnUrl' => STACKABLE_DESIGN_LIBRARY_URL,
 				'currentTheme' => esc_html( get_template() ),
-				'settingsUrl' => admin_url( 'options-general.php?page=stackable' ),
+				'settingsUrl' => admin_url( 'admin.php?page=stackable-settings' ),
 				'version' => array_shift( $version_parts ),
 				'wpVersion' => ! empty( $wp_version ) ? preg_replace( '/-.*/', '', $wp_version ) : $wp_version, // Ensure semver, strip out after dash
 				'adminUrl' => admin_url(),

src/welcome/admin.scss

@@ -344,16 +344,16 @@ body[class*="page_stk-"] {
 	margin-bottom: 32px;
 	padding-bottom: 0;
 }
-body.settings_page_stackable {
+body.stackable_page_stackable-settings {
 	#wpwrap {
 		background: #fff;
 	}
 	.s-box {
 		box-shadow: none !important;
 	}
 }
-body.settings_page_stackable,
-body.settings_page_stackable-getting-started {
+body.stackable_page_stackable-settings,
+body.toplevel_page_stackable {
 	// Hide admin notices to not mess up the welcome screen.
 	.s-header > *:not(h1):not(img) {
 		display: none !important;
@@ -369,9 +369,10 @@ body.settings_page_stackable-getting-started {
 		padding-bottom: 0;
 	}
 }
-body.settings_page_stackable,
-body.settings_page_stackable-getting-started,
-body.toplevel_page_stk-custom-fields {
+body.stackable_page_stackable-settings,
+body.toplevel_page_stackable,
+body.stackable_page_stk-custom-fields,
+body.stackable_page_stackable-go-premium {
 	img {
 		max-width: 100%;
 	}
@@ -912,6 +913,29 @@ body.toplevel_page_stk-custom-fields {
 	}
 }
 
+body.stackable_page_stackable-go-premium {
+	.s-side {
+		display: grid;
+		padding: 50px;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		grid-column-gap: 50px;
+		align-items: start;
+	}
+
+	.s-premium-box {
+		grid-row: 1/3;
+		.s-check-list {
+			margin: auto;
+			width: fit-content;
+			text-align: left;
+		}
+	}
+	.s-box {
+		text-align: center;
+	}
+}
+
 @import "news";
 @import "getting-started";
 @import "freemius";

src/welcome/freemius.scss

@@ -128,9 +128,8 @@
  * Contact and pricing/checkout pages have an SSL banner on the top, add more space.
  */
 body.stackable_page_stackable-contact {
-	.s-header {
-		padding-top: 65px !important;
-		padding-bottom: 100px !important;
+	.s-header-wrap {
+		padding-top: 10px !important;
 	}
 }
 body.stackable_page_stackable-pricing {

src/welcome/getting-started.scss

@@ -10,7 +10,7 @@
 	}
 }
 
-.settings_page_stackable-getting-started {
+.toplevel_page_stackable {
 	.s-body {
 		max-width: 1200px;
 		margin: 0 auto;