Front end onboard tour

[ilicfilip]

This PR adds Front End Onboard tour, used to introduce plugin and it's features to the new users.

Original idea is to display it when user visits the front end, but by changing a few hooks (to load styles & scripts) it should be working on in the Dashboard as well.

It is still in the WIP state but tour can be opened by using a link in the Admin toolbar. It has several steps, 2 of which include completing tasks (for now only by clicking on the button, no other user input).

Soem of things that needs to be improved:

• Styling and content obviously
• Better check for when Tour should be displayed, this includes user capabilities check
• Do we want to offer users to use Back button? IMO there is no need for that, but currently it is possible (checks for completed tasks should be updated)
• How we want to save Tour progress (so user can continue if he closes the Tour)? Currently there is implementation which will allow to notification to be displayed to that user (progress is saved as user_meta field)
• Templating should be better, ideally we don't use PHP to generate markup.
• Select tasks which user should complete during the onboard process
• After the onboard tasks are completed, do we want to show celebration when he visits the PP Dashaboard page for the first time or not?

[github-actions]

Test on Playground
Test this pull request on the Playground
or download the zip

[github-actions]

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 73.6%, saving 30.2 KB.

Filename	Before	After	Improvement	Visual comparison
assets/front-end-onboarding/images/badge-gauge.png	41.0 KB	10.8 KB	73.6%	View diff

[ilicfilip]

PR has been updated since the last meeting, a few new things:

• Onboard tasks for which it was agreed to be included are now set
• Upload feature, for the "Set site icon" task, is added
• Tasks on the "More tasks" step open up in new popover (which provides more space for the task specific inputs)

cc @tacoverdo

[tacoverdo]

Suggestions for copy.

Step 1 - Introduction

Welcome to Progress Planner!

Progress Planner helps you set clear, focused goals for your website, and actually reach them.

Instead of getting stuck in to-do lists or unfinished ideas, you’ll turn your goals into small, achievable steps. Everything happens inside your WordPress dashboard, with no need for extra tools or complicated setups.

The onboarding takes just 3 to 5 minutes. You’ll go through a few simple steps and complete your first recommendation. After that, you’ll be ready to start making real progress.

Step 2 - Set tagline

Left column

This is an example of a recommendation in Progress Planner. It's a task that helps improve your website. Most recommendations can be completed in under five minutes. Once you've completed a recommendation, we'll celebrate your success together and provide you with a new recommendation.

Let's give it a try!

Right column

Title: Set tagline
In a few words, explain what this site is about. This information is used in your website's schema and RSS feeds, and can be displayed on your site. The tagline typically is your site's mission statement.

[input field showing the current tagline]

Button: Set tagline

We don't need a 'next' button here. Set tagline should automagically advance the user to the next screen. We should throw confetti when they click the button.

Step 3 - Badges

Left column

For every recommendation you complete, you earn points. When you earn at least 10 points each month, you'll unlock the special badge for that month. Can you collect them all?

Right column

[Image showing the monthly points progress paper from the PP dashboard]

Step 4 - Ask if they want to complete more tasks

Left column

You now master the basics of Progress Planner! We've got a few more recommendations lined up for you. Are you ready to take them on now, or should we show you where you can find Ravi's Recommendations from now on?

Right column

[list of recommendations]

The action for each recommendation should be "Start this recommendation." Each of the recommendations should have its regular description in the popup.

Completing the recommendations should not require clicking 'Take me to the dashboard'.

[github-actions]

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 72.7%, saving 49.5 KB.

Filename	Before	After	Improvement	Visual comparison
assets/front-end-onboarding/images/badge-gauge.png	68.1 KB	18.6 KB	72.7%	View diff

[aristath]

@ilicfilip there were merge conflicts with this PR and it took me a while to resolve them, can you please check that everything still works as expected? I tested it on playground and I think it's OK, but it could use a 2nd set of eyes 👍

[ilicfilip]

seems like everything is working fine 👍