Skip to content

Onboarding tweaks #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ilicfilip wants to merge 7 commits into
base: develop
Choose a base branch
from
+136 −79
Open

Onboarding tweaks #741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f486b60
onboarding design tweaks
ilicfilip Jan 12, 2026
da0062c
Merge branch 'develop' into filip/onboarding-tweaks
ilicfilip Jan 12, 2026
7eca0af
add description for set timezone & site locale tasks
ilicfilip Jan 12, 2026
644fb83
translatable of course
ilicfilip Jan 12, 2026
8783571
set base font size for popover and replace rem with em unit
ilicfilip Jan 12, 2026
1d41060
better to use px unit
ilicfilip Jan 12, 2026
ec28df7
add extra sentence to the "what's what" step
ilicfilip Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 62 additions & 56 deletions assets/css/onboarding/onboarding.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/onboarding/steps/OnboardingStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ class OnboardingStep {
const dashboardText =
this.wizard.config?.l10n?.dashboard ||
'Take me to the Recommendations dashboard';
this.nextBtn.textContent = dashboardText;
this.nextBtn.innerHTML = dashboardText;
}
}

Expand Down
3 changes: 2 additions & 1 deletion classes/class-onboard-wizard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,8 @@ public function add_popover_scripts() {
'startOnboarding' => \esc_html__( 'Start onboarding', 'progress-planner' ),
/* translators: %s: Progress Planner name. */
'privacyPolicyError' => sprintf( \esc_html__( 'You need to agree with the privacy policy to use the %s plugin.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) ),
'dashboard' => \esc_html__( 'Take me to the dashboard', 'progress-planner' ),
/* translators: %s: arrow icon */
'dashboard' => sprintf( \esc_html__( 'Take me to the dashboard %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' ),
'backToRecommendations' => \esc_html__( 'Back to recommendations', 'progress-planner' ),
],
'errorIcon' => \progress_planner()->get_asset( 'images/icon_exclamation_circle.svg' ),
Expand Down
7 changes: 6 additions & 1 deletion views/onboarding/badges.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,12 @@
</div>
<div class="tour-footer">
<div class="prpl-tour-next-wrapper">
<button class="prpl-tour-next prpl-btn prpl-btn-secondary"><?php \esc_html_e( 'Got it', 'progress-planner' ); ?></button>
<button class="prpl-tour-next prpl-btn prpl-btn-secondary">
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Got it %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
</script>
7 changes: 6 additions & 1 deletion views/onboarding/email-frequency.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,12 @@
</div>
<div class="tour-footer">
<div class="prpl-tour-next-wrapper">
<button class="prpl-tour-next prpl-btn prpl-btn-secondary"><?php \esc_html_e( 'Got it', 'progress-planner' ); ?></button>
<button class="prpl-tour-next prpl-btn prpl-btn-secondary">
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Got it %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
</script>
10 changes: 9 additions & 1 deletion views/onboarding/first-task.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,15 @@
</div>
<div class="prpl-column">
<?php if ( isset( $task ) ) : ?>
<?php \progress_planner()->the_view( 'onboarding/tasks/' . $task['task_id'] . '.php', [ 'task' => $task ] ); ?>
<?php
\progress_planner()->the_view(
'onboarding/tasks/' . $task['task_id'] . '.php',
[
'task' => $task,
'show_chevron' => true,
]
);
?>
<?php endif; ?>
</div>
</div>
Expand Down
7 changes: 6 additions & 1 deletion views/onboarding/more-tasks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,12 @@
</div>
<div class="tour-footer">
<div class="prpl-tour-next-wrapper">
<button class="prpl-tour-next prpl-btn prpl-btn-secondary"><?php \esc_html_e( 'Take me to the dashboard', 'progress-planner' ); ?> &rsaquo;</button>
<button class="prpl-tour-next prpl-btn prpl-btn-secondary">
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Take me to the dashboard %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
</script>
4 changes: 2 additions & 2 deletions views/onboarding/quit-confirmation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
<div class="prpl-quit-confirmation">
<div class="prpl-error-box">
<span class="prpl-error-icon">
<?php \progress_planner()->the_asset( 'images/icon_exclamation_circle.svg' ); ?>
<?php \progress_planner()->the_asset( 'images/icon_exclamation_circle_solid.svg' ); ?>
</span>
<div>
<h3><?php \esc_html_e( 'Are you sure you want to quit?', 'progress-planner' ); ?></h3>
<p>
<?php
/* translators: %s: Progress Planner name. */
\printf( \esc_html__( 'You need to finish the onboarding before you can work with the %s and start improving your site.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) );
\printf( \esc_html__( 'You need to finish the onboarding before you can work with the %s plugin and start improving your site.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) );
?>
</p>
</div>
Expand Down
30 changes: 20 additions & 10 deletions views/onboarding/settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,10 @@
class="prpl-btn prpl-save-setting-btn"
disabled
>
<?php \esc_html_e( 'Save setting', 'progress-planner' ); ?>
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Save setting %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
Expand All @@ -134,7 +137,12 @@ class="prpl-btn prpl-save-setting-btn"
<div class="prpl-columns-wrapper-flex">
<div class="prpl-column">
<div class="prpl-background-content">
<p><?php echo \esc_html( $prpl_page_type['description'] ); ?></p>
<p>
<?php \esc_html_e( 'Choose the post types you actively use for your content.', 'progress-planner' ); ?>
</p>
<p>
<?php \esc_html_e( 'We\'ll track and reward progress only on the ones you select.', 'progress-planner' ); ?>
</p>
</div>
</div>
<div class="prpl-column">
Expand All @@ -143,12 +151,6 @@ class="prpl-btn prpl-save-setting-btn"
<?php \esc_html_e( 'Settings:', 'progress-planner' ); ?> <?php \esc_html_e( 'Valuable post types', 'progress-planner' ); ?>
<span class="prpl-settings-progress"><?php echo \esc_html( $prpl_current_step_number ); ?>/<?php echo \esc_html( $prpl_total_number_of_steps ); ?></span>
</h3>
<p>
<?php \esc_html_e( 'Choose the post types you actively use for your content.', 'progress-planner' ); ?>
</p>
<p>
<?php \esc_html_e( 'We\'ll track and reward progress only on the ones you select.', 'progress-planner' ); ?>
</p>
</div>

<div class="prpl-setting-content">
Expand Down Expand Up @@ -190,7 +192,10 @@ class="prpl-post-type-toggle-input"
class="prpl-btn prpl-save-setting-btn"
disabled
>
<?php \esc_html_e( 'Save setting', 'progress-planner' ); ?>
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Save setting %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
Expand All @@ -200,7 +205,12 @@ class="prpl-btn prpl-save-setting-btn"
</div>
<div class="tour-footer">
<div class="prpl-tour-next-wrapper">
<button class="prpl-tour-next prpl-btn prpl-btn-secondary"><?php \esc_html_e( 'Next', 'progress-planner' ); ?></button>
<button class="prpl-tour-next prpl-btn prpl-btn-secondary">
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Next %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
</script>
3 changes: 3 additions & 0 deletions views/onboarding/tasks/core-blogdescription.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
<?php else : ?>
<?php \esc_html_e( 'Set tagline', 'progress-planner' ); ?>
<?php endif; ?>
<?php if ( ! empty( $show_chevron ) ) : ?>
<span class="dashicons dashicons-arrow-right-alt2"></span>
<?php endif; ?>
</button>
</form>
</div>
3 changes: 3 additions & 0 deletions views/onboarding/tasks/core-siteicon.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@
</div>
<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-secondary">
<?php \esc_html_e( 'Set site icon', 'progress-planner' ); ?>
<?php if ( ! empty( $show_chevron ) ) : ?>
<span class="dashicons dashicons-arrow-right-alt2"></span>
<?php endif; ?>
</button>
</form>
</div>
5 changes: 4 additions & 1 deletion views/onboarding/tasks/select-locale.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<?php echo esc_html( $task['title'] ); ?>
</h3>
<p>
Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
<?php \esc_html_e( 'Your locale determines the language and formatting your visitors see, such as date structures and currency. Setting this helps your audience feel right at home. Choose your preferred language and region.', 'progress-planner' ); ?>
</p>
<form class="prpl-onboarding-task-form" onsubmit="return false;">
<?php
Expand All @@ -55,6 +55,9 @@
?>
<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-secondary">
<?php \esc_html_e( 'Set the locale', 'progress-planner' ); ?>
<?php if ( ! empty( $show_chevron ) ) : ?>
<span class="dashicons dashicons-arrow-right-alt2"></span>
<?php endif; ?>
</button>
</form>
</div>
5 changes: 4 additions & 1 deletion views/onboarding/tasks/select-timezone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,17 @@
<?php echo esc_html( $task['title'] ); ?>
</h3>
<p>
Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
<?php \esc_html_e( 'Setting your timezone ensures that scheduled posts and automated updates happen exactly when you expect them to. It keeps your site\'s clock synced with your local time. Pick your city or offset now!', 'progress-planner' ); ?>
</p>
<form class="prpl-onboarding-task-form" onsubmit="return false;">
<select id="timezone" name="timezone" data-validate="required">
<?php echo \wp_timezone_choice( $prpl_tzstring, \get_user_locale() ); ?>
</select>
<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-secondary">
<?php \esc_html_e( 'Set the timezone', 'progress-planner' ); ?>
<?php if ( ! empty( $show_chevron ) ) : ?>
<span class="dashicons dashicons-arrow-right-alt2"></span>
<?php endif; ?>
</button>
</form>
</div>
2 changes: 1 addition & 1 deletion views/onboarding/welcome.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
\printf( \esc_html__( '%s helps you set clear, focused goals for your website. Let\'s go through a few simple steps to get everything set up.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_admin_menu_name() ) );
?>
</p>
<p>
<p class="prpl-welcome-note">
<?php \esc_html_e( 'This will only take a few minutes.', 'progress-planner' ); ?>
</p>
</div>
Expand Down
9 changes: 7 additions & 2 deletions views/onboarding/whats-what.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
?>
</p>
<p>
<?php \esc_html_e( 'These actions help you improve your site step by step, without having to guess where to start.', 'progress-planner' ); ?>
<?php \esc_html_e( 'These actions help you improve your site step by step, without having to guess where to start. Most recommendations can be completed in under five minutes.', 'progress-planner' ); ?>
</p>
</div>
</div>
Expand All @@ -52,7 +52,12 @@
</div>
<div class="tour-footer">
<div class="prpl-tour-next-wrapper">
<button class="prpl-tour-next prpl-btn prpl-btn-secondary"><?php \esc_html_e( 'Next', 'progress-planner' ); ?></button>
<button class="prpl-tour-next prpl-btn prpl-btn-secondary">
<?php
/* translators: %s: arrow icon */
printf( \esc_html__( 'Got it %s', 'progress-planner' ), '<span class="dashicons dashicons-arrow-right-alt2"></span>' );
?>
</button>
</div>
</div>
</script>
Loading