added prestep and poststep functions

Author: [email protected]

src/components/guided-modal-tour/editor.scss

@@ -1,5 +1,5 @@
 .ugb-tour-modal--overlay {
-	z-index: 1000001;
+	z-index: 1000002;
 	background-color: transparent !important;
 	pointer-events: none;
 }
@@ -24,10 +24,10 @@
 	// Smoothly transition moving top & left.
 	transition:
 		max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
-		left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
-		top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
-		margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
-		margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+		left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+		margin-top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
 		opacity 0.4s ease-in-out,
 		transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
 		box-shadow 0.2s ease-in-out;
@@ -163,13 +163,18 @@
 
 .ugb-tour-modal__glow {
 	position: absolute;
-	z-index: 999999;
+	z-index: 1000001;
 	box-shadow: 0 0 20px #f00069;
 	border-radius: 8px;
 	pointer-events: none;
 	animation: tour-modal-glow 0.7s infinite alternate;
 	mix-blend-mode: multiply;
 	will-change: transform, box-shadow;
+	transition: opacity 0.2s ease-in-out;
+	opacity: 1;
+	&.ugb-tour-modal__glow--hidden {
+		opacity: 0;
+	}
 }
 
 .ugb-tour-modal__glow--medium,

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

@@ -83,6 +83,7 @@ const ModalTour = props => {
 	const [ isVisibleDelayed, setIsVisibleDelayed ] = useState( false )
 	const [ forceRefresh, setForceRefresh ] = useState( 0 )
 	const modalRef = useRef( null )
+	const glowElementRef = useRef( null )
 
 	const {
 		title,
@@ -99,15 +100,55 @@ const ModalTour = props => {
 		nextEventTarget = null, // If provided, this is a selector for the element to trigger the next event if there is one.
 		nextEvent = 'click', // This is the event to listen for to trigger the next step.
 		glowTarget = null, // If provided, this is a selector for the element to glow when the step is active.
+		// eslint-disable-next-line no-unused-vars
+		preStep = NOOP, // If provided, this is a function to run before the step is shown.
+		// eslint-disable-next-line no-unused-vars
+		postStep = NOOP, // If provided, this is a function to run after the step is shown.
 	} = steps[ currentStep ]
 
+	// While the modal is visible, just keep on force refreshing the modal in an interval to make sure the modal is always in the correct position.
+	useEffect( () => {
+		let interval
+		if ( isVisible ) {
+			interval = setInterval( () => {
+				setForceRefresh( forceRefresh => forceRefresh + 1 )
+			}, 300 )
+		}
+		return () => clearInterval( interval )
+	}, [ isVisible, isVisibleDelayed ] )
+
 	// Create a stable function reference for the event listener
 	const handleNextEvent = useCallback( () => {
-		setCurrentStep( currentStep + 1 )
+		setCurrentStep( currentStep => {
+			setTimeout( () => {
+				steps[ currentStep ]?.postStep?.( currentStep )
+			}, 50 )
+			const nextStep = currentStep + 1
+			steps[ nextStep ]?.preStep?.( nextStep )
+			return nextStep
+		} )
+		setTimeout( () => {
+			setForceRefresh( forceRefresh => forceRefresh + 1 )
+		}, 50 )
 		setTimeout( () => {
-			setForceRefresh( forceRefresh + 1 )
+			setForceRefresh( forceRefresh => forceRefresh + 1 )
+		}, 350 )
+	}, [ currentStep, steps ] )
+
+	const handleBackEvent = useCallback( () => {
+		setCurrentStep( currentStep => {
+			// steps[ currentStep ]?.postStep?.( currentStep )
+			const nextStep = currentStep - 1
+			steps[ nextStep ]?.preStep?.( nextStep )
+			return nextStep
+		} )
+		setTimeout( () => {
+			setForceRefresh( forceRefresh => forceRefresh + 1 )
 		}, 50 )
-	}, [ currentStep ] )
+		setTimeout( () => {
+			setForceRefresh( forceRefresh => forceRefresh + 1 )
+		}, 350 )
+	}, [ currentStep, steps ] )
 
 	// Show modal after 1 second delay
 	useEffect( () => {
@@ -116,7 +157,7 @@ const ModalTour = props => {
 			setTimeout( () => {
 				setIsVisibleDelayed( true )
 			}, 150 )
-		}, 1500 )
+		}, 1050 )
 
 		return () => clearTimeout( timer )
 	}, [] )
@@ -162,6 +203,22 @@ const ModalTour = props => {
 		}
 	}, [ currentStep, nextEventTarget, nextEvent, handleNextEvent ] )
 
+	// Create the glow element while this component is mounted.
+	useEffect( () => {
+		// Create the element.
+		const element = document.createElement( 'div' )
+		element.className = `ugb-tour-modal__glow ugb-tour-modal__glow--hidden`
+		document.body.appendChild( element )
+
+		// Keep track of the element.
+		glowElementRef.current = element
+
+		return () => {
+			glowElementRef.current = null
+			element.remove()
+		}
+	}, [] )
+
 	// These are the X and Y offsets of the modal relative to the anchor. This will be
 	const [ modalOffsetX, modalOffsetY ] = useMemo( () => {
 		if ( ! modalRef.current ) {
@@ -179,6 +236,10 @@ const ModalTour = props => {
 		// We have the modalRef.current which we can use to get the modal's bounding client rect.
 		const anchorRect = document.querySelector( anchor )?.getBoundingClientRect()
 
+		if ( ! anchorRect ) {
+			return defaultOffset
+		}
+
 		switch ( position ) {
 			case 'left':
 				// Left, middle
@@ -216,21 +277,16 @@ const ModalTour = props => {
 						: 'small'
 
 				// Create the element.
-				const element = document.createElement( 'div' )
-				element.className = `ugb-tour-modal__glow ugb-tour-modal__glow--${ glowTargetSize }`
-				element.style.top = `${ targetRect.top - 8 }px`
-				element.style.left = `${ targetRect.left - 8 }px`
-				element.style.width = `${ targetRect.width + 16 }px`
-				element.style.height = `${ targetRect.height + 16 }px`
-				document.body.appendChild( element )
-			}
-		}
-		// Remove the element when the component unmounts or the step changes.
-		return () => {
-			if ( glowTarget ) {
-				const element = document.querySelector( '.ugb-tour-modal__glow' )
-				element?.remove()
+				if ( glowElementRef.current ) {
+					glowElementRef.current.className = `ugb-tour-modal__glow ugb-tour-modal__glow--${ glowTargetSize }`
+					glowElementRef.current.style.top = `${ targetRect.top - 8 }px`
+					glowElementRef.current.style.left = `${ targetRect.left - 8 }px`
+					glowElementRef.current.style.width = `${ targetRect.width + 16 }px`
+					glowElementRef.current.style.height = `${ targetRect.height + 16 }px`
+				}
 			}
+		} else if ( glowElementRef.current ) {
+			glowElementRef.current.className = `ugb-tour-modal__glow ugb-tour-modal__glow--hidden`
 		}
 	}, [ glowTarget, currentStep, isVisible, isVisibleDelayed, forceRefresh ] )
 
@@ -270,10 +326,7 @@ const ModalTour = props => {
 				<Button
 					onClick={ () => {
 						ctaOnClick()
-						setCurrentStep( currentStep + 1 )
-						setTimeout( () => {
-							setForceRefresh( forceRefresh + 1 )
-						}, 50 )
+						handleNextEvent()
 					} }
 					variant="primary"
 					className="ugb-tour-modal__cta"
@@ -285,17 +338,11 @@ const ModalTour = props => {
 				<Steps
 					numSteps={ steps.length }
 					currentStep={ currentStep }
-					onClickStep={ setCurrentStep }
 				/>
 				{ currentStep > 0 && (
 					<Button
 						variant="tertiary"
-						onClick={ () => {
-							setCurrentStep( currentStep - 1 )
-							setTimeout( () => {
-								setForceRefresh( forceRefresh + 1 )
-							}, 50 )
-						} }
+						onClick={ handleBackEvent }
 					>
 						<Icon icon={ arrowLeft } size={ 20 } />
 						&nbsp;
@@ -337,10 +384,7 @@ const ModalTour = props => {
 								}
 								onClose()
 							} else {
-								setCurrentStep( currentStep + 1 )
-								setTimeout( () => {
-									setForceRefresh( forceRefresh + 1 )
-								}, 100 )
+								handleNextEvent()
 							}
 						} }
 					>
@@ -364,7 +408,6 @@ const Steps = props => {
 	const {
 		numSteps = 3,
 		currentStep = 0,
-		// onClickStep = NOOP,
 	} = props
 
 	if ( numSteps === 1 ) {
@@ -382,7 +425,6 @@ const Steps = props => {
 				return (
 					<div
 						className={ classes }
-						// onClick={ () => onClickStep( index ) }
 						key={ index }
 					/>
 				)

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

@@ -51,13 +51,22 @@ export const TOUR_STEPS = {
 		steps: [
 			{
 				title: '👋 ' + __( 'Welcome to Your Design System', i18n ),
-				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 ),
+				description: __( 'Design once, apply everywhere! Set global styles so every block across your site looks and feels unified.', i18n ),
 				size: 'medium',
 				anchor: '.interface-interface-skeleton__sidebar',
 				position: 'left',
-				// nextEventTarget: '.ugb-insert-library-button',
-				glowTarget: '.interface-interface-skeleton__sidebar',
-			// showNext: false,
+				// glowTarget: '.interface-interface-skeleton__sidebar',
+			},
+			{
+				title: __( 'Use The Style Guide', i18n ),
+				description: __( 'You can use the Style Guide to see how your complete design system looks.', i18n ),
+				help: createInterpolateElement( __( 'Click the <strong>Style Guide</strong> button to continue.', i18n ), {
+					strong: <strong />,
+				} ),
+				anchor: '.ugb-modal-design-system__style-guide-button',
+				position: 'left',
+				nextEventTarget: '.ugb-modal-design-system__style-guide-button',
+				glowTarget: '.ugb-modal-design-system__style-guide-button',
 			},
 		],
 	},
@@ -100,33 +109,47 @@ export const TOUR_STEPS = {
 				nextEventTarget: '.ugb-design-library-item',
 				offsetX: '-400px',
 			},
-			{
-				title: __( 'You Can Add More Than One', i18n ),
-				description: __( 'You can add more than one designs to your page. When you\'re done, you can the Add Designs button to insert. But let\'s see what else you can do.', i18n ),
-				size: 'small',
-				offsetX: '-400px',
-			},
 			{
 				title: __( 'Pick Styling Options', i18n ),
-				description: __( 'Turn on backgrounds, change color schemes, to customize the library in real-time.', i18n ),
+				description: __( 'Optionally, you can turn on backgrounds, change color schemes, to customize the library in real-time.', i18n ),
 				help: createInterpolateElement( __( 'Toggle the <strong>Section Background</strong> to continue.', i18n ), {
 					strong: <strong />,
 				} ),
 				anchor: '.ugb-modal-design-library__enable-background',
 				position: 'right',
 				nextEventTarget: '.ugb-modal-design-library__enable-background',
 				glowTarget: '.ugb-modal-design-library__enable-background',
+				postStep: () => {
+					const el = document.querySelector( '.ugb-modal-design-library__enable-background input' )
+					// If the input is not checked, click the button.
+					if ( ! el.checked ) {
+						el.click()
+					}
+				},
 			},
 			{
-				title: __( 'Designs are Styled', i18n ),
-				description: __( 'Great! Your entire library now has a background. You can also change the other styling options next time.', i18n ),
-				anchor: '.ugb-modal-design-library__designs',
-				position: 'left',
-				offsetX: '200px',
+				title: __( 'Change Color Schemes', i18n ),
+				description: __( 'Awesome! Your designs now have a background. Try out the available color schemes below. You can also create your own later!', i18n ),
+				help: createInterpolateElement( __( 'Pick a <strong>Color Scheme</strong> to continue.', i18n ), {
+					strong: <strong />,
+				} ),
+				anchor: '.ugb-design-library__color-scheme-popover',
+				position: 'top',
+				nextEventTarget: '.ugb-design-library__color-scheme-popover .ugb-modal-design-library__stk-color-scheme',
+				glowTarget: '.ugb-design-library__color-scheme-popover .ugb-modal-design-library__stk-color-scheme:last-of-type',
+				preStep: () => {
+					// Let's make sure the background scheme is open.
+					if ( ! document.querySelector( '.ugb-design-library__color-scheme-popover' ) ) {
+						document.querySelector( '.ugb-modal-design-library__background-scheme .ugb-modal-design-library__stk-color-scheme' )?.click()
+					}
+				},
+				postStep: () => {
+					document.querySelector( '.ugb-design-library__color-scheme-popover .ugb-modal-design-library__stk-color-scheme:last-of-type' )?.click()
+				},
 			},
 			{
 				title: __( 'Patterns and Full-Pages', i18n ),
-				description: __( 'Aside from patterns, there are also full-page layouts in the library.', i18n ),
+				description: __( 'Great! Your entire library is now styled. Aside from patterns, there are also full-page layouts in the library.', i18n ),
 				help: createInterpolateElement( __( 'Click the <strong>Pages</strong> tab to continue.', i18n ), {
 					strong: <strong />,
 				} ),

src/components/modal-design-library/modal.js

@@ -253,7 +253,7 @@ export const ModalDesignLibrary = props => {
 						/>
 						<BaseControl
 							label={ __( 'Background Scheme', i18n ) }
-							className="ugb-modal-design-library__color-scheme-label"
+							className="ugb-modal-design-library__color-scheme-label ugb-modal-design-library__background-scheme"
 						>
 							<Dropdown
 								className="ugb-modal-design-library__color-scheme-dropdown"