detect size of glow area, added global settings

Author: [email protected]

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

@@ -150,6 +150,11 @@
 	will-change: transform, box-shadow;
 }
 
+.ugb-tour-modal__glow--medium,
+.ugb-tour-modal__glow--large {
+	animation: tour-modal-glow-small 0.7s infinite alternate;
+}
+
 // Animation keyframes to grow the box-shadow like it's glowing
 @keyframes tour-modal-glow {
 	0% {
@@ -161,3 +166,15 @@
 		transform: scaleX(1.05) scaleY(1.12);
 	}
 }
+
+// Animation keyframes for small glow
+@keyframes tour-modal-glow-small {
+	0% {
+		box-shadow: 0 0 20px #ff2283, 0 0 5px #f00069;
+		transform: scaleX(1) scaleY(1);
+	}
+	100% {
+		box-shadow: 0 0 50px #ff2283, 0 0 5px #f00069;
+		transform: scaleX(1.02) scaleY(1.02);
+	}
+}

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

@@ -158,15 +158,20 @@ const ModalTour = props => {
 
 	// If we have a glow target, create a new element in the body, placed on the top of the target, below the modal.
 	useEffect( () => {
-		if ( glowTarget ) {
+		if ( glowTarget && isVisibleDelayed ) {
 			// Get the top, left, width, and height of the target.
 			const target = document.querySelector( glowTarget )
 			if ( target ) {
 				const targetRect = target.getBoundingClientRect()
 
+				// Estimate the size of the glow target based on the size of the target.
+				const glowTargetSize = targetRect.width > 300 || targetRect.height > 200 ? 'large'
+					: targetRect.width > 300 || targetRect.height > 100 ? 'medium'
+						: 'small'
+
 				// Create the element.
 				const element = document.createElement( 'div' )
-				element.className = 'ugb-tour-modal__glow'
+				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`

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

@@ -2,6 +2,18 @@ import { __ } from '@wordpress/i18n'
 import { i18n } from 'stackable'
 
 export const TOUR_STEPS = {
+	'design-system-welcome': [
+		{
+			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 ),
+			size: 'medium',
+			anchor: '.interface-interface-skeleton__sidebar',
+			position: 'left',
+			// nextEventTarget: '.ugb-insert-library-button',
+			glowTarget: '.interface-interface-skeleton__sidebar',
+			// showNext: false,
+		},
+	],
 	'editor-welcome': [
 		{
 			title: '👋 ' + __( 'Welcome to Stackable', i18n ),

src/plugins/global-settings/index.js

@@ -18,6 +18,7 @@ import {
 	isContentOnlyMode,
 	settings,
 } from 'stackable'
+import { GuidedModalTour } from '~stackable/components'
 import { currentUserHasCapability } from '~stackable/util'
 
 /** WordPress dependencies
@@ -78,6 +79,7 @@ const GlobalSettings = () => {
 						</p>
 					</PanelBody>
 					{ globalSettingsInspector }
+					<GuidedModalTour tourId="design-system-welcome" />
 				</PluginSidebar>
 			}
 		</>