refactored tours, added block tour

Author: [email protected]

src/block-components/alignment/edit.js

@@ -201,6 +201,7 @@ export const Edit = memo( props => {
 							selector: ', .stk-block-columns:has( > .stk-inner-blocks > * > * > [data-type="stackable/column"] > * > .stk-%s)',
 							highlight: 'outline-second-offset',
 						} }
+						className="ugb-column-align-control"
 					/>
 				}
 				{ props.hasRowAlignment &&

src/block-components/block-div/edit.js

@@ -90,6 +90,7 @@ export const Edit = memo( props => {
 					checked={ hasBackground }
 					onChange={ hasBackground => setAttributes( { hasBackground } ) }
 					initialOpen={ initialOpen === 'background' }
+					className="ugb-block-background-panel"
 				>
 					<AdvancedSelectControl
 						label={ __( 'Color Scheme', i18n ) }

src/components/guided-modal-tour/editor-block-tour.js

@@ -0,0 +1,11 @@
+
+import { registerPlugin } from '@wordpress/plugins'
+import GuidedModalTour from './index'
+
+const EditorBlockTour = () => {
+	return <GuidedModalTour tourId="blocks" />
+}
+
+registerPlugin( 'stackable-editor-block-tour', {
+	render: EditorBlockTour,
+} )

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

@@ -45,6 +45,10 @@
 		transform: scale(1);
 	}
 
+	.components-modal__header-heading {
+		line-height: 1.2;
+	}
+
 	.components-button {
 		border-radius: 4px;
 	}
@@ -123,6 +127,13 @@
 			}
 		}
 	}
+	&.ugb-tour-modal--left-top {
+		.components-modal__content {
+			&::after {
+				top: 30px;
+			}
+		}
+	}
 	&.ugb-tour-modal--top {
 		.components-modal__content {
 			box-shadow: rgba(0, 0, 0, 0.2) 0px 22px 60px -4px;

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

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { TOUR_STEPS } from './tour-steps'
+import './editor-block-tour'
 
 /**
  * External dependencies
@@ -46,6 +47,7 @@ const GuidedModalTour = props => {
 		steps = [],
 		condition = null,
 		hasConfetti = true,
+		initialize = NOOP,
 	} = TOUR_STEPS[ tourId ]
 
 	if ( justCompleted ) {
@@ -72,6 +74,7 @@ const GuidedModalTour = props => {
 	return <ModalTour
 		steps={ steps }
 		hasConfetti={ hasConfetti }
+		initialize={ initialize }
 		onClose={ () => {
 			setIsDone( true )
 			setJustCompleted( true )
@@ -99,6 +102,7 @@ const ModalTour = props => {
 		steps,
 		onClose = NOOP,
 		hasConfetti = true,
+		initialize = NOOP,
 	} = props
 
 	const [ currentStep, setCurrentStep ] = useState( 0 )
@@ -132,6 +136,12 @@ const ModalTour = props => {
 		skipIf = NOOP, // If provided, this is a function to check if the step should be skipped.
 	} = steps[ currentStep ]
 
+	useEffect( () => {
+		setTimeout( () => {
+			initialize()
+		}, 50 )
+	}, [ initialize ] )
+
 	// 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
@@ -418,10 +428,14 @@ const ModalTour = props => {
 			shouldCloseOnClickOutside={ false }
 			size={ size }
 			// onRequestClose={ onClose } // Do not use onRequestClose, it will cause the tour finish
-			className={ classNames( 'ugb-tour-modal', `ugb-tour-modal--${ position.replace( /-.*$/, '' ) }`, {
-				'ugb-tour-modal--visible': isVisible,
-				'ugb-tour-modal--visible-delayed': isVisibleDelayed,
-			} ) }
+			className={ classNames(
+				'ugb-tour-modal',
+				`ugb-tour-modal--${ position.replace( /-.*$/, '' ) }`,
+				`ugb-tour-modal--${ position }`,
+				{
+					'ugb-tour-modal--visible': isVisible,
+					'ugb-tour-modal--visible-delayed': isVisibleDelayed,
+				} ) }
 			ref={ modalRef }
 		>
 			<style>