Feat: More Guided Tours

src/components/base-control2/index.js

@@ -109,7 +109,7 @@ export const BaseControl = props => {
 						{ props.after }
 					</div>
 				</div>
-				<div className="stk-control-content">
+				<div className="stk-control-content" data-attribute={ props.attribute }>
 					{ props.children }
 				</div>
 			</VisualGuide>

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

@@ -27,4 +27,16 @@ export const TOUR_CONDITIONS = {
 		// Force show the tour if there is a GET parameter tour=site-kit
 		return window?.location?.search?.includes( 'tour=site-kit' ) ? true : null
 	},
+	'block-backgrounds': () => {
+		// Force show the tour if there is a GET parameter tour=block-backgrounds
+		return window?.location?.search?.includes( 'tour=block-backgrounds' ) ? true : null
+	},
+	'responsive-controls': () => {
+		// Force show the tour if there is a GET parameter tour=responsive-controls
+		return window?.location?.search?.includes( 'tour=responsive-controls' ) ? true : null
+	},
+	'hover-states': () => {
+		// Force show the tour if there is a GET parameter tour=hover-states
+		return window?.location?.search?.includes( 'tour=hover-states' ) ? true : null
+	},
 }

src/lazy-components/modal-tour/tours/block-backgrounds.js

@@ -0,0 +1,211 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+
+export const blockBackgrounds = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/columns',
+			{
+				uniqueId: '1dbe04e',
+				blockMargin: { bottom: '' },
+				align: 'full',
+				containerWidth: 50,
+				containerHorizontalAlign: 'flex-start',
+				containerWidthUnit: '%',
+			},
+			[
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: 'f957abc',
+						columnSpacing: {
+							top: '', right: '', bottom: '', left: '',
+						},
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/heading',
+							{
+								uniqueId: 'a8ebea7',
+								// Retain our text
+								text: 'Explore the World with Us',
+								textTag: 'h2',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/text',
+							{
+								uniqueId: '57e76a1',
+								// Retain our text
+								text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/button-group',
+							{ uniqueId: 'e063798' },
+							[
+								wp.blocks.createBlock(
+									'stackable/button',
+									{
+										uniqueId: '5d04ca8',
+										// Retain our text
+										text: 'Start your journey',
+										url: '',
+									}
+								),
+							]
+						),
+					]
+				),
+			]
+		)
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
+	},
+	steps: [
+		{
+			title: __( 'Discover Stackable Block Backgrounds & Containers', i18n ),
+			description: __( 'Welcome! Let\'s enhance your page by first adding a background to the Columns block. The Style Tab lets you tweak backgrounds, colors, borders, and typography for a custom look.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Style Tab</strong> in the sidebar to get started.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			position: 'left',
+			glowTarget: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			nextEventTarget: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			preStep: () => {
+				// Open the inspector sidebar
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+
+				// Look for the first "stackable/columns" block
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+				}
+			},
+			postStep: () => {
+				// Click the tab
+				document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+			},
+		},
+		{
+			title: __( 'Enable a Block Background', i18n ),
+			description: __( 'Turn on the background option to instantly add a background layer to your section. Watch as your design transforms with a single toggle.', i18n ),
+			help: createInterpolateElement( __( 'Toggle ON the <strong>Background</strong> option to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-block-background-panel .components-panel__body-title',
+			position: 'left',
+			glowTarget: '.ugb-block-background-panel .components-panel__body-title',
+			nextEventTarget: '.ugb-block-background-panel .components-panel__body-title input[type="checkbox"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Open the inspector sidebar
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+
+				// Look for the first "stackable/columns" block
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+				}
+
+				setTimeout( () => {
+					// Click the tab
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+				}, 100 )
+			},
+		},
+		{
+			title: __( 'Customize the Background Color', i18n ),
+			description: __( 'Now let\'s personalize your section. Choose a background color to help your content stand out or integrate it seamlessly into your page design.', i18n ),
+			help: createInterpolateElement( __( 'Open the <strong>Background Color</strong> panel to select a color.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-color-palette-control',
+			position: 'left',
+			glowTarget: '.ugb-block-background-panel .block-editor-panel-color-gradient-settings__dropdown',
+			nextEventTarget: '.ugb-block-background-panel .block-editor-panel-color-gradient-settings__dropdown',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Toggle background on
+				document.querySelector( '.ugb-block-background-panel:not(is-opened)' )?.click()
+				document.querySelector( '.ugb-block-background-panel .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
+			},
+			postStep: () => {
+				// Click the tab
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown:not(is-open)' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick Your Brand Color', i18n ),
+			description: __( 'Select a color that matches your brand or mood. Try out different colors and instantly see the changes on your block.', i18n ),
+			help: createInterpolateElement( __( 'Choose a <strong>Color</strong> from the palette to apply it.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-color-palette-control__popover-content',
+			position: 'left',
+			glowTarget: '.stk-color-palette-control__popover-content',
+			nextEvent: 'mousedown',
+			nextEventTarget: '.stk-color-palette-control__popover-content *',
+			postStep: () => {
+				// Click the color picker
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+			},
+		},
+		{
+			title: __( 'Add a Container for Better Layout', i18n ),
+			description: __( 'Turn on the Container option to give your columns content a background, padding, and improved alignment for a polished look.', i18n ),
+			help: createInterpolateElement( __( 'Toggle ON the <strong>Container</strong> to proceed.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-panel--container-size .components-panel__body-title',
+			position: 'left',
+			glowTarget: '.ugb-panel--container-size .components-panel__body-title',
+			nextEventTarget: '.ugb-panel--container-size .components-panel__body-title input[type="checkbox"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Click the tab
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock && columnsBlock.innerBlocks[ 0 ] ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].clientId )
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
+					setTimeout( () => {
+						document.querySelector( '.ugb-panel--layout.is-opened .components-panel__body-title button' )?.click()
+					}, 100 )
+				}
+			},
+		},
+		{
+			title: __( 'Block Backgrounds & Containers Recap', i18n ),
+			description: __( 'Great job! You\'ve learned how to add and customize block backgrounds and containers. These features are available in most Stackable blocks, helping you create beautiful, consistent layouts with ease.', i18n ),
+			preStep: () => {
+				// Toggle background on
+				document.querySelector( '.ugb-panel--container-size:not(is-opened)' )?.click()
+				document.querySelector( '.ugb-panel--container-size .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
+			},
+		},
+		{
+			title: __( 'Tip: Style All Blocks Efficiently', i18n ),
+			description: createInterpolateElement( __( 'Use the <strong>Stackable Design System</strong> to manage styles for all Stackable blocks globally. Perfect for a unified look and quick design changes!', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '[aria-controls="stackable-global-settings:sidebar"]',
+			position: 'left-top',
+			offsetY: '-30px',
+			offsetX: '-8px',
+			glowTarget: '[aria-controls="stackable-global-settings:sidebar"]',
+		},
+	],
+}

src/lazy-components/modal-tour/tours/hover-states.js

@@ -0,0 +1,134 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+
+export const hoverStates = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/image',
+			{
+				uniqueId: 'e063798',
+				imageExternalUrl: 'https://picsum.photos/id/177/500/700.jpg',
+			}
+		)
+
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
+
+		setTimeout( () => {
+			document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+			setTimeout( () => {
+				document.querySelector( '.ugb-panel--image:not(.is-opened)' )?.click()
+				const target = document.querySelector( '.stk-control:has([data-attribute="imageZoom"])' )
+				target?.scrollIntoView( { behavior: 'auto', block: 'center' } )
+			}, 100 )
+		}, 200 )
+	},
+	steps: [
+		{
+			title: __( 'Using the Hover Effect Controls', i18n ),
+			description: createInterpolateElement(
+				__( 'Locate the <strong>hover toggle</strong> next to <strong> Zoom</strong>. Click it to show the different hover state options.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+		},
+		{
+			title: __( 'Different Hover States', i18n ),
+			description: createInterpolateElement(
+				__( 'Now select the <strong>hover button</strong>. This lets you adjust how the image will look when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Adjusting Zoom on Hover', i18n ),
+			description: createInterpolateElement(
+				__( 'The controls now affect the <strong>Hover</strong> state only. Try adjusting the <strong>Image Zoom</strong> value and see how the preview changes when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-content',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+			postStep: () => {
+				// Update the order of the columns for mobile by dispatching an attribute update.
+				const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
+				const imageBlock = allBlocks.find( block => block.name === 'stackable/image' )
+				if ( imageBlock && ! imageBlock.attributes?.imageZoomHover ) {
+					wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
+						imageZoomHover: 1.5,
+					} )
+				}
+			},
+		},
+		{
+			title: __( 'Preview Your Hover Effect', i18n ),
+			description: createInterpolateElement(
+				__( 'The image on the canvas is now showing your <strong>new hover zoom effect</strong>. No need to hover—this view already reflects the hover state.', i18n ),
+				{ strong: <strong /> }
+			),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Return to Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'Switch back to the normal state by clicking the <strong>cursor icon</strong> to test the hover effect in action.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+				setTimeout( () => {
+					document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' )?.click()
+				}, 100 )
+			},
+		},
+		{
+			title: __( 'Back on Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'You are now back on the <strong>normal</strong> state. Notice the hover toggle is <strong>yellow</strong> - that means a custom hover effect has been saved!', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+		},
+		{
+			title: __( 'Pro Tip: Only Some Controls Feature Hover Toggle', i18n ),
+			description: createInterpolateElement(
+				__( 'Tip: Watch out—for some controls you <strong>won\'t see the hover state toggle</strong>. Only certain options support hover states. If you don\'t see the toggle, that control doesn\'t have hover customization!', i18n ),
+				{ strong: <strong /> }
+			),
+			offsetX: '300px',
+		},
+	],
+}