feat: getting started onboarding + style guide (#3571)

* created modal tour component

* added arrows

* added call to action

* tweaks on the modal tour

* component renamed and added main component

* added confetti when the tour finishes

* added hasConfetti prop

* added glow

* adjustments

* change name and change timings

* detect size of glow area, added global settings

* moved confetti to step definition, addition conditional showing

* added docs

* added help note, refined tour for the design library

* added prestep and poststep functions

* better positioning

* added close button

* added style guide

* added package changes

* added block rendering

* display global color palette in the style guide

* updated getting started

* added color schemes, adjusted style guide styles

* updated typography

* added getting started

* make sure style guide doesn't overlap with design system popovers

* fixed ui of color schemes

* fix color text alignment

* complete style guide

* display typography styles

* fixed typography sizes

* apply design system to web preview, display block styles

* update guided tour states option in test

* fix error

- settings not showing up

* fix controls not showing up

* Add comment

* update enqueue_script

* add note

* fix block style previews in style guide

* add template for columns

* move guided modal tour trigger plugin

* use homeUrl for style guide preview

* fix styling for block styles in style guide

* fix style guide block styles

- accordion
- icon list, icon list item
- countdown

* fix style guide block styles preview

- table of contents
- posts

* fix inner column block styles preview

* tweaked text

* fix cleanSerializedBlock

* fix post loop preview

* text tweaks

* update profile photo

* Finished design system tour

* finalized design system tour

* refactored tours, added block tour

* make sure patterns is selected

* finalized design library

* tour tweaks

* Update src/components/guided-modal-tour/tours/design-library.js [skip ci]

* QA from Coderabbit comments fixed

* fix color scheme

* fix block style previews

* update workflow

* move register plugin

* remove import

* extend color scheme

* fix style guide preview

- button group
- video popup

* coderabbit's qa fixed

* check if schemes are empty

* fix updated scheme

* remove hardcapping

* ensure alternate scheme is not yet added

* ensure color scheme css is regenerated

* fixes to coderabbit's qa

* update version

* only show the blocks tour when triggered

* do not repeat guided tours, do not show multiple guided tours

* show spinner while inserting designs

* add optional chaining

---------

Co-authored-by: [email protected] <>
Co-authored-by: Mikhaela Tapia <[email protected]>

Author: bfintal

.github/workflows/playwright.yml

@@ -78,6 +78,10 @@ jobs:
         POST_ID=$(wp-env run tests-cli wp post create wp-content/plugins/Stackable/e2e/config/post-content.txt --post_title="Existing Blocks" --post_status=publish --porcelain)
         echo "WP_TEST_POSTID=$POST_ID" >> $GITHUB_ENV
       continue-on-error: true
+    - name: Disable guided tours
+      run: |
+        TOUR_STATES='["design-system", "editor", "design-library", "blocks"]'
+        wp-env run tests-cli wp option update stackable_guided_tour_states "$TOUR_STATES" --format=json
     - name: Run playwright tests
       id: run-playwright-tests
       env: