Add interactivity to course steps

[Imran92]

Resolves #7446

Proposed Changes

• Added interactivity for each of the steps of the Course tour
• Also adds the necessary structure and helpers to be reused by other tours

I have added tests for the functions and components. For the interactivity, this looks like a candidate for e2e testing. Otherwise, it doesn't look like it's possible to test the interactions reliably.

I'll create an issue for writing the e2e tests.
Also, ATM if someone clicks on a pagination step, we can't show the interactivity because tour-kit sends a wrong index to the callback. We're creating a PR in tour-kit library to fix it.

Testing Instructions

1. Make sure your local env is set to development (to enable the feature flag)
2. Create a new Course or open an existing one in the editor (You'll need a new user in case you've closed the tour before, or you can remove the value of the usermeta sensei_tours)
3. Now go through each of the tour steps
4. Go both forward and backwards in the tour
5. Make sure the interactivity works as expected

Untitled.mov

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Legacy courses (course without blocks) are tested
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit bf81ebd and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
blocks/single-course.js			29.1 kB	+3 B ( +0.02% 🔼 )
admin/tour/course-tour/index.js			36 kB	+2.4 kB ( +7.16% 🔼 )
admin/tour/lesson-tour/index.js			34.2 kB	+359 B ( +1.07% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[codecov]

Codecov Report

Attention: Patch coverage is 19.72789% with 118 lines in your changes are missing coverage. Please review.

Project coverage is 51.84%. Comparing base (46c9479) to head (be0505b).
Report is 1 commits behind head on trunk.

❗ Current head be0505b differs from pull request most recent head bf81ebd. Consider uploading reports for the commit bf81ebd to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk    #7535      +/-   ##
============================================
- Coverage     51.92%   51.84%   -0.09%     
- Complexity    11265    11268       +3     
============================================
  Files           630      631       +1     
  Lines         47683    47817     +134     
  Branches        421      446      +25     
============================================
+ Hits          24759    24790      +31     
- Misses        22587    22668      +81     
- Partials        337      359      +22     

Files	Coverage Δ
assets/admin/tour/helper.js	86.20% <86.20%> (ø)
...ets/admin/tour/components/sensei-tour-kit/index.js	52.00% <27.27%> (-21.34%)	⬇️
assets/admin/tour/course-tour/steps.js	1.85% <0.93%> (-98.15%)	⬇️

... and 8 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3e1c326...bf81ebd. Read the comment docs.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[renatho]

Thank you for the PR, Imran! I added a few small suggestions. 😉

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[renatho]

Thank you for the tweaks @Imran92!

I just added a last comment: #7535 (comment). If it's something more complex than I'm thinking, maybe we could ignore it.

[github-actions]

Test the previous changes of this PR with WordPress Playground.

[github-actions]

Test the previous changes of this PR with WordPress Playground.