From 98faa210e45f6f4cb2cb7411926eb73bd69f26cf Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Fri, 5 Dec 2025 09:40:25 +0100 Subject: [PATCH 01/10] WIP --- assets/onboarding/css/onboarding.css | 42 ++++++++++++++++++++++++++++ assets/onboarding/js/onboarding.js | 36 ++++++++++++++++++++++-- classes/class-onboard-wizard.php | 15 ++++++++++ 3 files changed, 91 insertions(+), 2 deletions(-) diff --git a/assets/onboarding/css/onboarding.css b/assets/onboarding/css/onboarding.css index 3e01c6898..f06a69f72 100644 --- a/assets/onboarding/css/onboarding.css +++ b/assets/onboarding/css/onboarding.css @@ -1,3 +1,45 @@ +/* Full-screen takeover mode */ +.prpl-onboarding-fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #f9fafb; + z-index: 999999; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + box-sizing: border-box; +} + +/* Hide WordPress admin elements when in fullscreen onboarding */ +body.prpl-onboarding-active #adminmenumain, +body.prpl-onboarding-active #wpadminbar, +body.prpl-onboarding-active #wpfooter, +body.prpl-onboarding-active #wpcontent { + display: none !important; +} + +body.prpl-onboarding-active { + margin: 0 !important; + padding: 0 !important; + overflow: hidden; +} + +/* When in fullscreen mode, the popover becomes the centered card */ + +/* Override the popover attribute's default hidden state */ +.prpl-onboarding-fullscreen .prpl-popover-onboarding.prpl-popover-visible { + display: block; + position: relative; + inset: auto; + margin: 0; + max-height: 90vh; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +} + .prpl-popover-onboarding { font-family: system-ui, Arial,sans-serif; diff --git a/assets/onboarding/js/onboarding.js b/assets/onboarding/js/onboarding.js index 63802a1e8..ef7baf579 100644 --- a/assets/onboarding/js/onboarding.js +++ b/assets/onboarding/js/onboarding.js @@ -21,6 +21,9 @@ class ProgressPlannerOnboardWizard { // Store previously focused element for accessibility this.previouslyFocusedElement = null; + // Fullscreen mode flag + this.isFullscreenMode = config.fullscreenMode || false; + // Restore saved progress if available this.restoreSavedProgress(); @@ -29,6 +32,7 @@ class ProgressPlannerOnboardWizard { // Set DOM related properties FIRST. this.popover = document.getElementById( this.config.popoverId ); + this.fullscreenWrapper = document.getElementById( 'prpl-onboarding-fullscreen' ); this.contentWrapper = this.popover.querySelector( '.tour-content-wrapper' ); @@ -41,6 +45,17 @@ class ProgressPlannerOnboardWizard { // Setup event listeners after DOM is ready this.setupEventListeners(); + + // Auto-start onboarding in fullscreen mode if on dashboard page and not completed + const shouldAutoStart = + this.isFullscreenMode && + this.config.isDashboardPage && + ! this.config.onboardingCompleted && + ! this.state.data.finished; + + if ( shouldAutoStart ) { + this.startOnboarding(); + } } /** @@ -223,10 +238,12 @@ class ProgressPlannerOnboardWizard { this.closeTour(); // Redirect to the Progress Planner dashboard + // Wait for save to complete before redirecting to prevent re-triggering if ( this.config.lastStepRedirectUrl && this.config.lastStepRedirectUrl.length > 0 ) { + await this.saveProgressToServer(); window.location.href = this.config.lastStepRedirectUrl; } } @@ -246,9 +263,15 @@ class ProgressPlannerOnboardWizard { * Close the tour */ closeTour() { - if ( this.popover ) { + // If fullscreen mode, hide the wrapper and remove body class + if ( this.isFullscreenMode && this.fullscreenWrapper ) { + this.fullscreenWrapper.style.display = 'none'; + document.body.classList.remove( 'prpl-onboarding-active' ); + this.popover.classList.remove( 'prpl-popover-visible' ); + } else if ( this.popover ) { this.popover.hidePopover(); } + this.saveProgressToServer(); // Cleanup active step @@ -278,7 +301,16 @@ class ProgressPlannerOnboardWizard { this.previouslyFocusedElement = this.popover.ownerDocument.activeElement; - this.popover.showPopover(); + // If fullscreen mode, show the wrapper and add body class + // Don't use popover API in fullscreen mode - it moves to top layer and breaks positioning + if ( this.isFullscreenMode && this.fullscreenWrapper ) { + this.fullscreenWrapper.style.display = 'flex'; + document.body.classList.add( 'prpl-onboarding-active' ); + this.popover.classList.add( 'prpl-popover-visible' ); + } else { + this.popover.showPopover(); + } + this.updateStepNavigation(); this.renderStep(); diff --git a/classes/class-onboard-wizard.php b/classes/class-onboard-wizard.php index 5788df50a..5b006bc67 100644 --- a/classes/class-onboard-wizard.php +++ b/classes/class-onboard-wizard.php @@ -337,6 +337,16 @@ public function add_popover_scripts() { // Get saved progress from user meta. $saved_progress = $this->get_saved_progress(); + // Check if we're on the Progress Planner dashboard page. + $is_dashboard_page = false; + if ( \is_admin() ) { + $screen = \function_exists( 'get_current_screen' ) ? \get_current_screen() : null; + $is_dashboard_page = $screen && 'toplevel_page_progress-planner' === $screen->id; + } + + // Check if onboarding was already completed. + $onboarding_completed = \get_option( 'prpl_onboarding_completed', false ); + \wp_localize_script( 'prpl-popover-onboarding', 'ProgressPlannerOnboardData', @@ -351,6 +361,9 @@ public function add_popover_scripts() { 'timezone_offset' => (float) ( \wp_timezone()->getOffset( new \DateTime( 'midnight' ) ) / 3600 ), 'savedProgress' => $saved_progress, 'lastStepRedirectUrl' => \esc_url_raw( admin_url( 'admin.php?page=progress-planner' ) ), + 'isDashboardPage' => $is_dashboard_page, + 'onboardingCompleted' => (bool) $onboarding_completed, + 'fullscreenMode' => true, // Enable fullscreen takeover mode. 'l10n' => [ 'next' => \esc_html__( 'Next', 'progress-planner' ), 'startOnboarding' => \esc_html__( 'Start onboarding', 'progress-planner' ), @@ -605,6 +618,7 @@ public function ajax_save_all_onboarding_settings() { */ public function add_popover() { ?> + diff --git a/views/onboarding/tasks/core-siteicon.php b/views/onboarding/tasks/core-siteicon.php index 7aa45ad98..a15b5ba1d 100644 --- a/views/onboarding/tasks/core-siteicon.php +++ b/views/onboarding/tasks/core-siteicon.php @@ -23,7 +23,7 @@
- the_file( 'assets/onboarding/images/icon_image.svg' ); ?> + the_file( 'assets/images/onboarding/icon_image.svg' ); ?>

- the_file( 'assets/onboarding/images/thumbs_up_ravi_rtl.svg' ); ?> + the_file( 'assets/images/onboarding/thumbs_up_ravi_rtl.svg' ); ?>
From 4b0ad25f8c37166161d6ba4817e32b8d42649074 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Fri, 5 Dec 2025 11:00:31 +0100 Subject: [PATCH 05/10] cmd + s --- views/onboarding/settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/onboarding/settings.php b/views/onboarding/settings.php index 9a5d93808..66c07790e 100644 --- a/views/onboarding/settings.php +++ b/views/onboarding/settings.php @@ -110,7 +110,7 @@
- the_file( 'assets/onboarding/images/icon_info_solid.svg' ); ?> + the_file( 'assets/images/onboarding/icon_info_solid.svg' ); ?>

From 81dc10a8a84adf919e5862267ec13b3a6a6400cf Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Fri, 5 Dec 2025 11:28:20 +0100 Subject: [PATCH 06/10] new page for onboarding --- assets/js/onboarding/onboarding.js | 10 +-- classes/class-onboard-wizard.php | 100 ++++++++++++++++++++--------- classes/utils/class-onboard.php | 2 +- views/admin-page.php | 4 +- views/onboarding-page.php | 18 ++++++ 5 files changed, 93 insertions(+), 41 deletions(-) create mode 100644 views/onboarding-page.php diff --git a/assets/js/onboarding/onboarding.js b/assets/js/onboarding/onboarding.js index 24e0c03a7..3d6c450f0 100644 --- a/assets/js/onboarding/onboarding.js +++ b/assets/js/onboarding/onboarding.js @@ -50,14 +50,8 @@ class ProgressPlannerOnboardWizard { // Setup event listeners after DOM is ready this.setupEventListeners(); - // Auto-start onboarding in fullscreen mode if on dashboard page and not completed - const shouldAutoStart = - this.isFullscreenMode && - this.config.isDashboardPage && - ! this.config.onboardingCompleted && - ! this.state.data.finished; - - if ( shouldAutoStart ) { + // Auto-start onboarding if on the dedicated onboarding page + if ( this.config.isOnboardingPage ) { this.startOnboarding(); } } diff --git a/classes/class-onboard-wizard.php b/classes/class-onboard-wizard.php index e76e638cd..18d2d09e4 100644 --- a/classes/class-onboard-wizard.php +++ b/classes/class-onboard-wizard.php @@ -12,6 +12,13 @@ */ class Onboard_Wizard { + /** + * The onboarding page slug. + * + * @var string + */ + const PAGE_SLUG = 'progress-planner-onboarding'; + /** * Steps and their order. * @@ -25,14 +32,31 @@ class Onboard_Wizard { * @return void */ public function __construct() { + // Register onboarding admin page (always, so it's accessible). + \add_action( 'admin_menu', [ $this, 'add_onboarding_page' ] ); // Add admin toolbar items. // TODO: Remove after testing. \add_action( 'admin_bar_menu', [ $this, 'add_admin_toolbar_items' ] ); \add_action( 'admin_init', [ $this, 'check_delete_onboarding_progress' ] ); - // If the onboarding is finished, do not add the popover. - if ( $this->is_onboarding_finished() ) { + // Define steps and their order (always needed for the onboarding page). + \add_action( 'init', [ $this, 'define_steps_and_order' ], 101 ); + + // AJAX actions need to be registered early. + \add_action( 'wp_ajax_progress_planner_onboarding_complete_task', [ $this, 'ajax_complete_task' ] ); + \add_action( 'wp_ajax_progress_planner_onboarding_save_progress', [ $this, 'ajax_save_onboarding_progress' ] ); + \add_action( 'wp_ajax_prpl_save_all_onboarding_settings', [ $this, 'ajax_save_all_onboarding_settings' ] ); + + // Allow only images for the front-end upload. + \add_filter( 'rest_pre_insert_attachment', [ $this, 'rest_pre_insert_attachment' ], 10, 2 ); + + // Check if we're on the onboarding page (always load scripts there). + // phpcs:ignore WordPress.Security.NonceVerification.Recommended + $is_onboarding_page = isset( $_GET['page'] ) && self::PAGE_SLUG === $_GET['page']; + + // If onboarding is finished and we're not on the onboarding page, skip loading popover. + if ( $this->is_onboarding_finished() && ! $is_onboarding_page ) { return; } @@ -46,17 +70,6 @@ public function __construct() { \add_action( 'admin_footer', [ $this, 'add_popover_step_templates' ] ); \add_action( 'admin_enqueue_scripts', [ $this, 'add_popover_scripts' ] ); - // Define steps and their order. - \add_action( 'init', [ $this, 'define_steps_and_order' ], 101 ); - - // Note: AJAX action needs to be registered early (ie wrapping init in is_admin() check will be to late). - \add_action( 'wp_ajax_progress_planner_onboarding_complete_task', [ $this, 'ajax_complete_task' ] ); - \add_action( 'wp_ajax_progress_planner_onboarding_save_progress', [ $this, 'ajax_save_onboarding_progress' ] ); - \add_action( 'wp_ajax_prpl_save_all_onboarding_settings', [ $this, 'ajax_save_all_onboarding_settings' ] ); - - // Allow only images for the front-end upload. - \add_filter( 'rest_pre_insert_attachment', [ $this, 'rest_pre_insert_attachment' ], 10, 2 ); - // Maybe show user notification that tour is not finished. \add_action( 'admin_notices', [ $this, 'maybe_show_user_notification' ] ); } @@ -239,10 +252,8 @@ public function maybe_show_user_notification() { return; } - // If the user is on the Progress Planner dashboard do not display the notification. - // This is a 'safety net' since we currently prevent all admin notices on the Progress Planner dashboard screen. - if ( 'toplevel_page_progress-planner' === $screen->id ) { - // Do not show the notification. + // If the user is on the Progress Planner dashboard or onboarding page, do not display the notification. + if ( 'toplevel_page_progress-planner' === $screen->id || 'settings_page_' . self::PAGE_SLUG === $screen->id ) { return; } @@ -252,8 +263,8 @@ public function maybe_show_user_notification() { ', + \esc_html__( 'You haven\'t completed the onboarding yet. %1$s Complete the setup wizard %2$s to get started.', 'progress-planner' ), + '', '' ); ?> @@ -295,12 +306,9 @@ public function add_popover_scripts() { // Get saved progress from user meta. $saved_progress = $this->get_saved_progress(); - // Check if we're on the Progress Planner dashboard page. - $is_dashboard_page = false; - if ( \is_admin() ) { - $screen = \function_exists( 'get_current_screen' ) ? \get_current_screen() : null; - $is_dashboard_page = $screen && 'toplevel_page_progress-planner' === $screen->id; - } + // Check if we're on the onboarding page. + // phpcs:ignore WordPress.Security.NonceVerification.Recommended + $is_onboarding_page = \is_admin() && isset( $_GET['page'] ) && self::PAGE_SLUG === $_GET['page']; // Check if onboarding was already completed. $onboarding_completed = \get_option( 'prpl_onboarding_completed', false ); @@ -321,7 +329,7 @@ public function add_popover_scripts() { 'timezone_offset' => (float) ( \wp_timezone()->getOffset( new \DateTime( 'midnight' ) ) / 3600 ), 'savedProgress' => $saved_progress, 'lastStepRedirectUrl' => \esc_url_raw( admin_url( 'admin.php?page=progress-planner' ) ), - 'isDashboardPage' => $is_dashboard_page, + 'isOnboardingPage' => $is_onboarding_page, 'onboardingCompleted' => (bool) $onboarding_completed, 'fullscreenMode' => true, // Enable fullscreen takeover mode. 'l10n' => [ @@ -385,6 +393,41 @@ public function is_onboarding_finished() { return isset( $onboarding_progress['data'] ) && isset( $onboarding_progress['data']['finished'] ) && $onboarding_progress['data']['finished']; } + /** + * Add the onboarding admin page. + * + * @return void + */ + public function add_onboarding_page() { + // Use 'options.php' as parent to create a hidden page (common WordPress pattern). + \add_submenu_page( + 'options.php', + \esc_html__( 'Setup Wizard', 'progress-planner' ), + \esc_html__( 'Setup Wizard', 'progress-planner' ), + 'manage_options', + self::PAGE_SLUG, + [ $this, 'render_onboarding_page' ] + ); + } + + /** + * Render the onboarding admin page. + * + * @return void + */ + public function render_onboarding_page() { + \progress_planner()->the_view( 'onboarding-page.php' ); + } + + /** + * Get the onboarding page URL. + * + * @return string + */ + public static function get_onboarding_page_url() { + return \admin_url( 'options.php?page=' . self::PAGE_SLUG ); + } + /** * Add admin toolbar item. * @@ -405,10 +448,7 @@ public function add_admin_toolbar_items_callback( $admin_bar ) { [ 'id' => 'progress-planner-onboarding', 'title' => 'Progress Planner Onboarding', - 'href' => '#', - 'meta' => [ - 'onclick' => 'window.prplOnboardWizard.startOnboarding(); return false;', - ], + 'href' => self::get_onboarding_page_url(), ] ); diff --git a/classes/utils/class-onboard.php b/classes/utils/class-onboard.php index 25ab71890..825bb2eb2 100644 --- a/classes/utils/class-onboard.php +++ b/classes/utils/class-onboard.php @@ -50,7 +50,7 @@ public function on_activate_plugin( $plugin ) { } if ( ! \defined( 'WP_CLI' ) || ! \WP_CLI ) { - \wp_safe_redirect( \admin_url( 'admin.php?page=progress-planner' ) ); + \wp_safe_redirect( \Progress_Planner\Onboard_Wizard::get_onboarding_page_url() ); exit; } } diff --git a/views/admin-page.php b/views/admin-page.php index c6b535c69..bb1f1d407 100644 --- a/views/admin-page.php +++ b/views/admin-page.php @@ -46,9 +46,9 @@

the_file( 'assets/images/onboarding/thumbs_up_ravi_rtl.svg' ); ?>
- +
diff --git a/views/onboarding-page.php b/views/onboarding-page.php new file mode 100644 index 000000000..d8ae8216c --- /dev/null +++ b/views/onboarding-page.php @@ -0,0 +1,18 @@ + +
+ +
From 6143996e72bdcfd54cad4594375744843ea5dce7 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Fri, 5 Dec 2025 11:31:25 +0100 Subject: [PATCH 07/10] redirect user back to the origin page --- assets/js/onboarding/onboarding.js | 6 ++++++ classes/class-onboard-wizard.php | 1 + 2 files changed, 7 insertions(+) diff --git a/assets/js/onboarding/onboarding.js b/assets/js/onboarding/onboarding.js index 3d6c450f0..c32232d30 100644 --- a/assets/js/onboarding/onboarding.js +++ b/assets/js/onboarding/onboarding.js @@ -277,6 +277,12 @@ class ProgressPlannerOnboardWizard { this.state.cleanup(); } + // If on the onboarding page and not finishing, redirect back + if ( this.config.isOnboardingPage && this.config.cancelUrl && ! this.state.data.finished ) { + window.location.href = this.config.cancelUrl; + return; + } + // Reset cleanup this.state.cleanup = null; diff --git a/classes/class-onboard-wizard.php b/classes/class-onboard-wizard.php index 18d2d09e4..d3572f0a4 100644 --- a/classes/class-onboard-wizard.php +++ b/classes/class-onboard-wizard.php @@ -329,6 +329,7 @@ public function add_popover_scripts() { 'timezone_offset' => (float) ( \wp_timezone()->getOffset( new \DateTime( 'midnight' ) ) / 3600 ), 'savedProgress' => $saved_progress, 'lastStepRedirectUrl' => \esc_url_raw( admin_url( 'admin.php?page=progress-planner' ) ), + 'cancelUrl' => $is_onboarding_page ? \esc_url_raw( \wp_get_referer() ? \wp_get_referer() : admin_url( 'admin.php?page=progress-planner' ) ) : '', 'isOnboardingPage' => $is_onboarding_page, 'onboardingCompleted' => (bool) $onboarding_completed, 'fullscreenMode' => true, // Enable fullscreen takeover mode. From 958844bc63775169dcfc38f4e97065913ea4fd85 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Tue, 9 Dec 2025 12:01:33 +0100 Subject: [PATCH 08/10] hide X button --- assets/css/onboarding/onboarding.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css index be9e7e4b0..b99f9178e 100644 --- a/assets/css/onboarding/onboarding.css +++ b/assets/css/onboarding/onboarding.css @@ -12,6 +12,10 @@ justify-content: center; padding: 20px; box-sizing: border-box; + + #prpl-tour-close-btn { + display: none; + } } /* Hide WordPress admin elements when in fullscreen onboarding */ From eeb78815f538c1763ebb10a1574c8fe1df1c3940 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Tue, 9 Dec 2025 12:04:07 +0100 Subject: [PATCH 09/10] Revert "hide X button" This reverts commit 958844bc63775169dcfc38f4e97065913ea4fd85. --- assets/css/onboarding/onboarding.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/css/onboarding/onboarding.css b/assets/css/onboarding/onboarding.css index b99f9178e..be9e7e4b0 100644 --- a/assets/css/onboarding/onboarding.css +++ b/assets/css/onboarding/onboarding.css @@ -12,10 +12,6 @@ justify-content: center; padding: 20px; box-sizing: border-box; - - #prpl-tour-close-btn { - display: none; - } } /* Hide WordPress admin elements when in fullscreen onboarding */ From 8f812639642439f69e0a98dd35e88d924acdd903 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Tue, 9 Dec 2025 12:08:56 +0100 Subject: [PATCH 10/10] replace X with "close tour" --- classes/class-onboard-wizard.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/classes/class-onboard-wizard.php b/classes/class-onboard-wizard.php index d3572f0a4..5812f63a7 100644 --- a/classes/class-onboard-wizard.php +++ b/classes/class-onboard-wizard.php @@ -682,7 +682,7 @@ public function add_popover() {