Feat: new stackable admin page

e2e/tests/admin.spec.ts

@@ -36,7 +36,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';

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;

src/welcome/index.php

@@ -16,34 +16,70 @@ function __construct() {
 			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_dashboard_script' ) );
 
 			add_action( 'admin_init', array( $this, 'redirect_to_welcome_page' ) );
+			add_action('admin_init', array( $this, 'redirect_to_docs' ) );
+
+			add_action('admin_head', array( $this, 'redirect_to_docs_newtab' ) );
 
 			$plugin = plugin_basename( STACKABLE_FILE );
 			add_filter( 'plugin_action_links_' . $plugin, array( $this, 'add_settings_link' ) );
 		}
 
 		public function add_dashboard_page() {
 
-			// Our settings page.
-			add_submenu_page(
-				'options-general.php', // Parent slug.
+			$icon = 'data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMTc2LjIgMjQuMmMtLjUtMS44LTIuMi0zLTQtMi44aC0xMDBsLTM5LjEgNDEuMmMtMi43IDIuNy0uOSA2LjQgMyA2LjRoODQuMWw1NC42LTQwLjZjMS4yLTEgMS44LTIuNiAxLjQtNC4yeiIvPjxwYXRoIGQ9Im0xNjcuMiAxMTUuNy0zOC40LTM3LjkuMS0uMWgtOTMuOGMtMS44IDAtMy4zIDEuNS0zLjMgMy4zIDAgLjkuNCAxLjcgMSAyLjNsMzguMiAzNy45LS4xLjFoOTQuMWMxLjgtLjEgMy4yLTEuNiAzLjItMy40IDAtLjgtLjQtMS42LTEtMi4yeiIvPjxwYXRoIGQ9Im0xNjcuMiAxMzEuMWMtLjctLjYtMS42LTEtMi41LTFoLTg0LjhsLTU0LjYgNDAuN2MtMS43IDEuMi0yLjEgMy42LS44IDUuNC44IDEuMSAyLjEgMS43IDMuNCAxLjZoMTAwbDM5LjUtNDEuNWMxLjItMS42IDEuMi0zLjktLjItNS4yeiIvPjwvZz48L3N2Zz4=';
+
+			add_menu_page(
 				__( 'Stackable', STACKABLE_I18N ), // Page title.
 				__( 'Stackable', STACKABLE_I18N ) . ' ' . stackable_notification_count(), // Menu title.
 				'manage_options', // Capability.
 				'stackable', // Menu slug.
-				array( $this, 'stackable_settings_content' ), // Callback function.
-				null // Position
+				array( $this, 'stackable_getting_started_content' ), // Callback function.
+				$icon,
+				25
 			);
 
 			// Our getting started page.
 			add_submenu_page(
-				isset( $_GET['page'] ) && $_GET['page'] === 'stackable-getting-started' ? 'options-general.php' : '', // Parent slug. Only show when in the page.
-				__( 'Get Started', STACKABLE_I18N ), // Page title.
-				'<span class="fs-submenu-item fs-sub"></span>' . __( 'Get Started', STACKABLE_I18N ), // Menu title.
+				'stackable', // Parent slug.
+				__( 'Getting Started', STACKABLE_I18N ), // Page title.
+				__( 'Getting Started', STACKABLE_I18N ), // Menu title.
 				'manage_options', // Capability.
-				'stackable-getting-started', // Menu slug.
+				'stackable', // Menu slug.
 				array( $this, 'stackable_getting_started_content' ), // Callback function.
-				null // Position
 			);
+
+			// Our settings page.
+			add_submenu_page(
+				'stackable', // Parent slug.
+				__( 'Stackable', STACKABLE_I18N ), // Page title.
+				__( 'Settings', STACKABLE_I18N ) . ' ' . stackable_notification_count(), // Menu title.
+				'manage_options', // Capability.
+				'stackable-settings', // Menu slug.
+				array( $this, 'stackable_settings_content' ), // Callback function.
+			);
+
+			do_action( 'stackable_submenu_register' );
+
+			// Documentation
+			add_submenu_page(
+				'stackable', // Parent slug.
+				__( 'Documentation', STACKABLE_I18N ), // Page title.
+				__( 'Documentation', STACKABLE_I18N ), // Menu title.
+				'manage_options', // Capability.
+				'stackable-documentation', // Menu slug.
+				'__return_null',
+			);
+
+			if ( STACKABLE_BUILD === 'free' || ! sugb_fs()->can_use_premium_code() ) {
+				add_submenu_page(
+					'stackable', // Parent slug.
+					__( 'Go Premium', STACKABLE_I18N ), // Page title.
+					__( 'Go Premium', STACKABLE_I18N ), // Menu title.
+					'manage_options', // Capability.
+					'stackable-go-premium', // Menu slug.
+					array( $this, 'stackable_go_premium_content' ),
+				);
+			}
 		}
 
 		public function enqueue_dashboard_script( $hook ) {
@@ -55,7 +91,7 @@ public function enqueue_dashboard_script( $hook ) {
 			}
 
 			// For the options page, load our options script.
-			if ( 'settings_page_stackable' === $hook || stripos( $hook, 'page_stackable-settings' ) !== false || 'settings_page_stackable-getting-started' === $hook ) {
+			if ( 'settings_page_stackable' === $hook || stripos( $hook, 'page_stackable-settings' ) !== false || 'toplevel_page_stackable' === $hook ) {
 
 				wp_enqueue_script( 'wp-i18n' );
 				wp_enqueue_script( 'wp-element' );
@@ -95,7 +131,7 @@ public static function print_tabs() {
 			$display_account_tab = true;
 			$display_contact_tab = true;
 			$account_url = STACKABLE_BUILD === 'free' ? '' : sugb_fs()->get_account_url();
-			$contact_url = admin_url( 'options-general.php?page=stackable-contact' );
+			$contact_url = admin_url( 'admin.php?page=stackable-contact' );
 
 			// If network activated and in multisite, the accounts page is in a different URL.
 			if ( STACKABLE_BUILD === 'free' ) {
@@ -117,47 +153,54 @@ public static function print_tabs() {
 
 			?>
 			<div class="s-body s-tabs">
-				<a class="s-tab <?php echo $screen->base === 'settings_page_stackable-getting-started' ? 's-active' : '' ?>"
-					href="<?php echo admin_url( 'options-general.php?page=stackable-getting-started' ) ?>">
+				<a class="s-tab <?php echo $screen->base === 'toplevel_page_stackable' ? 's-active' : '' ?>"
+					href="<?php echo admin_url( 'admin.php?page=stackable' ) ?>">
 					<span><?php _e( 'Getting Started', STACKABLE_I18N ) ?></span>
 				</a>
 
-				<a class="s-tab <?php echo $screen->base === 'settings_page_stackable' ? 's-active' : '' ?>"
-					href="<?php echo admin_url( 'options-general.php?page=stackable' ) ?>">
+				<a class="s-tab <?php echo $screen->base === 'stackable_page_stackable-settings' ? 's-active' : '' ?>"
+					href="<?php echo admin_url( 'admin.php?page=stackable-settings' ) ?>">
 					<span><?php _e( 'Settings', STACKABLE_I18N ) ?></span>
 				</a>
 
 				<?php if ( $display_account_tab && STACKABLE_BUILD !== 'free' && sugb_fs()->get_user() ) { ?>
-					<a class="s-tab <?php echo $screen->base === 'settings_page_stackable-account' ? 's-active' : '' ?>"
+					<a class="s-tab <?php echo $screen->base === 'stackable_page_stackable-account' ? 's-active' : '' ?>"
 						href="<?php echo $account_url ?>">
 						<span><?php _e( 'Account', STACKABLE_I18N ) ?></span>
 					</a>
 				<?php } ?>
 
 				<?php if ( STACKABLE_BUILD !== 'free' && sugb_fs()->has_affiliate_program() ) { ?>
-					<a class="s-tab <?php echo $screen->base === 'settings_page_stackable-affiliation' ? 's-active' : '' ?>"
+					<a class="s-tab <?php echo $screen->base === 'stackable_page_stackable-affiliation' ? 's-active' : '' ?>"
 						href="<?php echo admin_url( 'options-general.php?page=stackable-affiliation' ) ?>">
 						<span><?php _e( 'Affiliation', STACKABLE_I18N ) ?></span>
 					</a>
 				<?php } ?>
 
+				<?php if ( function_exists( 'stackable_is_custom_fields_enabled' ) ) { ?>
+					<?php if ( stackable_is_custom_fields_enabled() && current_user_can( 'manage_stackable_custom_fields' ) ) { ?>
+						<a class="s-tab <?php echo $screen->base === 'stackable_page_stk-custom-fields' ? 's-active' : '' ?>"
+							href="<?php echo admin_url( 'admin.php?page=stk-custom-fields' ) ?>">
+							<span><?php _e( 'Custom Fields', STACKABLE_I18N ) ?></span>
+						</a>
+					<?php } ?>
+				<?php } ?>
+
 				<a class="s-tab" href="https://docs.wpstackable.com" target="_docs">
 				<span><?php _e( 'Documentation', STACKABLE_I18N ) ?></span></a>
 
 				<?php if ( $display_contact_tab && STACKABLE_BUILD !== 'free' ) { ?>
-					<a class="s-tab <?php echo $screen->base === 'settings_page_stackable-contact' ? 's-active' : '' ?>"
+					<a class="s-tab <?php echo $screen->base === 'stackable_page_stackable-contact' ? 's-active' : '' ?>"
 						href="<?php echo $contact_url ?>">
 						<span><?php _e( 'Contact Us', STACKABLE_I18N ) ?></span>
 					</a>
 				<?php } ?>
 
-				<?php if ( function_exists( 'stackable_is_custom_fields_enabled' ) ) { ?>
-					<?php if ( stackable_is_custom_fields_enabled() && current_user_can( 'manage_stackable_custom_fields' ) ) { ?>
-						<a class="s-tab <?php echo $screen->base === 'toplevel_page_stk-custom-fields' ? 's-active' : '' ?>"
-							href="<?php echo admin_url( 'admin.php?page=stk-custom-fields' ) ?>">
-							<span><?php _e( 'Custom Fields', STACKABLE_I18N ) ?></span>
-						</a>
-					<?php } ?>
+				<?php if ( STACKABLE_BUILD === 'free' || ! sugb_fs()->can_use_premium_code() ) { ?>
+					<a class="s-tab <?php echo $screen->base === 'stackable_page_stackable-go-premium' ? 's-active' : '' ?>"
+						href="<?php echo admin_url( 'admin.php?page=stackable-go-premium' )?>">
+						<span><?php _e( 'Go Premium', STACKABLE_I18N ) ?></span>
+					</a>
 				<?php } ?>
 			</div>
 			<?php
@@ -203,7 +246,27 @@ public function stackable_settings_content() {
 						<div class="s-content" id="settings-content"></div>
 						<?php do_action( 'stackable_settings_page_mid' ); ?>
 					</div>
-					<!-- <div class="s-side">
+				</section>
+			</div>
+			<?php
+		}
+
+		public function stackable_go_premium_content() {
+			?>
+			<div class="wrap wrap-settings">
+				<div class="s-header-wrap s-header-settings">
+					<?php $this->print_header() ?>
+					<?php echo $this->print_premium_button() ?>
+					<?php echo $this->print_tabs() ?>
+				</div>
+				<h1 aria-hidden="true" class="s-admin-notice-marker"></h1>
+				<section id="settings-notice">
+					<div class="s-rest-settings-notice"></div>
+					<div class="s-save-settings-notice"></div>
+				</section>
+				<?php stackable_welcome_notification() ?>
+				<section class="s-body-container s-body-container-with-sidenav">
+					<div class="s-side">
 						<?php if ( STACKABLE_BUILD === 'free' || ! sugb_fs()->can_use_premium_code() ) : ?>
 						<aside class="s-box s-premium-box">
 							<h3><?php _e( '🚀 Stackable Premium', STACKABLE_I18N ) ?></h3>
@@ -241,10 +304,7 @@ public function stackable_settings_content() {
 							<p><?php _e( 'Keep up to date by subscribing to our newsletter.', STACKABLE_I18N ) ?></p>
 							<p><a href="http://eepurl.com/dJY9xI" class="s-button" target="_new" title="<?php esc_attr_e( 'Subscribe', STACKABLE_I18N ) ?>"><?php _e( 'Subscribe', STACKABLE_I18N ) ?></a></p>
 						</aside>
-					</div> -->
-
-
-
+					</div>
 				</section>
 			</div>
 			<?php
@@ -279,6 +339,37 @@ public function stackable_getting_started_content() {
 			<?php
 		}
 
+		/**
+		 * Redirect to the Stackable Documentation page.
+		*/
+		public function redirect_to_docs() {
+			if ( empty( $_GET['page'] ) ) {
+				return;
+			}
+
+			if ( 'stackable-documentation' === $_GET['page'] ) {
+				wp_redirect('https://docs.wpstackable.com');
+				exit;
+			}
+		}
+
+		public function redirect_to_docs_newtab() {
+			?>
+			<script id='stk-documentation-set-target'>
+			document.addEventListener('DOMContentLoaded', function() {
+				const link = document.querySelector('a[href="admin.php?page=stackable-documentation"]');
+				if (link) link.setAttribute('target', '_blank');
+			});
+
+			// Remove this script from the DOM after execution to clean up
+			const currentScript = document.getElementById('stk-documentation-set-target');
+				if (currentScript) {
+					currentScript.parentNode.removeChild(currentScript);
+				}
+			</script>
+			<?php
+		}
+
 		/**
 		 * Adds links to the plugins page entry.
 		 *
@@ -290,7 +381,7 @@ public function add_settings_link( $links ) {
 			// Settings link.
 			if ( current_user_can( 'manage_options' ) ) {
 				$settings_link = sprintf( '<a href="%s">%s</a>',
-					admin_url( 'options-general.php?page=stackable' ),
+					admin_url( 'admin.php?page=stackable-settings' ),
 					__( 'Settings', STACKABLE_I18N )
 				);
 
@@ -342,7 +433,7 @@ public function redirect_to_welcome_page() {
 				}
 
 				// Or go to the getting started page.
-				wp_redirect( esc_url( admin_url( 'options-general.php?page=stackable-getting-started' ) ) );
+				wp_redirect( esc_url( admin_url( 'admin.php?page=stackable' ) ) );
 
 				die();
 			}