Skip to content

Commit d1c8ade

Browse files
author
[email protected]
committed
moved confetti to step definition, addition conditional showing
1 parent fe9b376 commit d1c8ade

File tree

3 files changed

+86
-52
lines changed

3 files changed

+86
-52
lines changed

‎src/components/guided-modal-tour/index.js

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,37 @@ const NOOP = () => {}
3232
// The main tour component.
3333
const GuidedModalTour = props => {
3434
const {
35-
hasConfetti = true,
3635
tourId = '', // This is the ID of the tour, this will be used to store the tour state in the database and to get the steps.
3736
} = props
3837

3938
// On mount, check if the tour has been completed, if so, don't show it.
4039
const [ isDone, setIsDone ] = useState( guidedTourStates?.[ tourId ] )
4140

42-
if ( isDone ) {
41+
const {
42+
steps = [],
43+
condition = null,
44+
hasConfetti = true,
45+
} = TOUR_STEPS[ tourId ]
46+
47+
// If there is a condition, check if it's met, if not, don't show the tour.
48+
// condition can be true, false, or null. true will show the tour (even if
49+
// it's already done), false will not show the tour, null will show the tour
50+
// only once (normal behavior).
51+
const conditionResult = condition ? condition() : null
52+
if ( conditionResult === false ) {
53+
return null
54+
} else if ( conditionResult === null ) {
55+
if ( isDone ) {
56+
return null
57+
}
58+
}
59+
60+
if ( ! steps.length ) {
4361
return null
4462
}
4563

4664
return <ModalTour
47-
steps={ TOUR_STEPS[ tourId ] }
65+
steps={ steps }
4866
hasConfetti={ hasConfetti }
4967
onClose={ () => {
5068
// TODO: Save the tour state to the database that we finished it.

‎src/components/guided-modal-tour/tour-steps.js

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,71 @@ import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
33

44
export const TOUR_STEPS = {
5-
'design-system-welcome': [
6-
{
7-
title: '👋 ' + __( 'Welcome to Your Design System', i18n ),
8-
description: __( 'We\'re excited to have you here. Let\'s get you started by opening the Design Library. Click the button above to get started.', i18n ),
9-
size: 'medium',
10-
anchor: '.interface-interface-skeleton__sidebar',
11-
position: 'left',
12-
// nextEventTarget: '.ugb-insert-library-button',
13-
glowTarget: '.interface-interface-skeleton__sidebar',
5+
'design-system-welcome': {
6+
steps: [
7+
{
8+
title: '👋 ' + __( 'Welcome to Your Design System', i18n ),
9+
description: __( 'We\'re excited to have you here. Let\'s get you started by opening the Design Library. Click the button above to get started.', i18n ),
10+
size: 'medium',
11+
anchor: '.interface-interface-skeleton__sidebar',
12+
position: 'left',
13+
// nextEventTarget: '.ugb-insert-library-button',
14+
glowTarget: '.interface-interface-skeleton__sidebar',
1415
// showNext: false,
16+
},
17+
],
18+
},
19+
'editor-welcome': {
20+
hasConfetti: false,
21+
condition: () => { // If provided, true will show the tour (even if it's already done), false will not show the tour, null will show the tour only once.
22+
// Do not show the tour if there is a GET parameter that shows another tour.
23+
return window?.location?.search?.includes( 'tour=' ) ? false : null
1524
},
16-
],
17-
'editor-welcome': [
18-
{
19-
title: '👋 ' + __( 'Welcome to Stackable', i18n ),
20-
description: __( 'We\'re excited to have you here. Let\'s get you started by opening the Design Library. Click the button above to get started.', i18n ),
21-
// size: 'medium',
22-
anchor: '.ugb-insert-library-button',
23-
position: 'bottom',
24-
nextEventTarget: '.ugb-insert-library-button',
25-
glowTarget: '.ugb-insert-library-button',
26-
showNext: false,
25+
steps: [
26+
{
27+
title: '👋 ' + __( 'Welcome to Stackable', i18n ),
28+
description: __( 'We\'re excited to have you here. Let\'s get you started by opening the Design Library. Click the button above to get started.', i18n ),
29+
// size: 'medium',
30+
anchor: '.ugb-insert-library-button',
31+
position: 'bottom',
32+
nextEventTarget: '.ugb-insert-library-button',
33+
glowTarget: '.ugb-insert-library-button',
34+
showNext: false,
35+
},
36+
],
37+
},
38+
'design-library-welcome': {
39+
condition: () => { // If provided, true will show the tour (even if it's already done), false will not show the tour, null will show the tour only once.
40+
// TODO: The new quick button in the getting started area should open the editor with `tour=design-library-welcome`
41+
// Force show the tour if there is a GET parameter tour=design-library-welcome
42+
return window?.location?.search?.includes( 'tour=design-library-welcome' ) ? true : null
2743
},
28-
],
29-
'design-library-welcome': [
30-
{
31-
title: '👋 ' + __( 'Welcome to Your Design Library', i18n ),
32-
description: __( 'These are pre-built designs that are style-matched to your block theme. You can insert one or more patterns to quickly build your page.', i18n ),
33-
size: 'medium',
34-
},
35-
{
36-
title: __( 'Pick Styling Options', i18n ),
37-
description: __( 'Turn on backgrounds, change color schemes, to customize the library. Go ahead and click on "Section Background" and see your changes in real-time.', i18n ),
38-
anchor: '.ugb-modal-design-library__enable-background',
39-
position: 'right',
40-
nextEventTarget: '.ugb-modal-design-library__enable-background',
41-
// ctaLabel: __( 'Enable Background', i18n ),
42-
// ctaOnClick: () => {
43-
// const element = document.querySelector( '.ugb-modal-design-library__enable-background .components-form-toggle__input' )
44-
// element?.click()
45-
// },
46-
glowTarget: '.ugb-modal-design-library__enable-background',
47-
// showNext: false,
48-
},
49-
{
50-
title: __( 'Patterns and Full-Pages', i18n ),
51-
description: __( 'Click here to switch between patterns and full-page layouts.', i18n ),
52-
anchor: '.ugb-modal-design-library .components-modal__header',
53-
position: 'bottom',
54-
},
55-
],
44+
steps: [
45+
{
46+
title: '👋 ' + __( 'Welcome to Your Design Library', i18n ),
47+
description: __( 'These are pre-built designs that are style-matched to your block theme. You can insert one or more patterns to quickly build your page.', i18n ),
48+
size: 'medium',
49+
},
50+
{
51+
title: __( 'Pick Styling Options', i18n ),
52+
description: __( 'Turn on backgrounds, change color schemes, to customize the library. Go ahead and click on "Section Background" and see your changes in real-time.', i18n ),
53+
anchor: '.ugb-modal-design-library__enable-background',
54+
position: 'right',
55+
nextEventTarget: '.ugb-modal-design-library__enable-background',
56+
// ctaLabel: __( 'Enable Background', i18n ),
57+
// ctaOnClick: () => {
58+
// const element = document.querySelector( '.ugb-modal-design-library__enable-background .components-form-toggle__input' )
59+
// element?.click()
60+
// },
61+
glowTarget: '.ugb-modal-design-library__enable-background',
62+
// showNext: false,
63+
},
64+
{
65+
title: __( 'Patterns and Full-Pages', i18n ),
66+
description: __( 'Click here to switch between patterns and full-page layouts.', i18n ),
67+
anchor: '.ugb-modal-design-library .components-modal__header',
68+
position: 'bottom',
69+
},
70+
],
71+
},
5672
}

‎src/plugins/design-library-button/design-library-button.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const DesignLibraryButton = () => {
4444
return ( settings.stackable_enable_design_library &&
4545
<>
4646
{ /* TODO: This will need to only play on first time going to the editor, and if there's no quick button that started another tour */ }
47-
<GuidedModalTour tourId="editor-welcome" hasConfetti={ false } />
47+
<GuidedModalTour tourId="editor-welcome" />
4848
<ToolbarButton
4949
onClick={ onClick }
5050
className="ugb-insert-library-button"

0 commit comments

Comments
 (0)