+
{ props.children }
diff --git a/src/components/guided-modal-tour/tour-conditions.js b/src/components/guided-modal-tour/tour-conditions.js
index 27f2cc0e8b..753ecb7211 100644
--- a/src/components/guided-modal-tour/tour-conditions.js
+++ b/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
+ },
}
diff --git a/src/lazy-components/modal-tour/tours/block-backgrounds.js b/src/lazy-components/modal-tour/tours/block-backgrounds.js
new file mode 100644
index 0000000000..47511dbb07
--- /dev/null
+++ b/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
Style Tab in the sidebar to get started.', i18n ), {
+ 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
Background option to continue.', i18n ), {
+ 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
Background Color panel to select a color.', i18n ), {
+ 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
Color from the palette to apply it.', i18n ), {
+ 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
Container to proceed.', i18n ), {
+ 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
Stackable Design System to manage styles for all Stackable blocks globally. Perfect for a unified look and quick design changes!', i18n ), {
+ strong:
,
+ } ),
+ anchor: '[aria-controls="stackable-global-settings:sidebar"]',
+ position: 'left-top',
+ offsetY: '-30px',
+ offsetX: '-8px',
+ glowTarget: '[aria-controls="stackable-global-settings:sidebar"]',
+ },
+ ],
+}
diff --git a/src/lazy-components/modal-tour/tours/hover-states.js b/src/lazy-components/modal-tour/tours/hover-states.js
new file mode 100644
index 0000000000..c4200b629b
--- /dev/null
+++ b/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
hover toggle next to
Zoom. Click it to show the different hover state options.', i18n ),
+ { 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
hover button. This lets you adjust how the image will look when hovered.', i18n ),
+ { 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
Hover state only. Try adjusting the
Image Zoom value and see how the preview changes when hovered.', i18n ),
+ { 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
new hover zoom effect. No need to hover—this view already reflects the hover state.', i18n ),
+ { strong:
}
+ ),
+ offsetX: '300px',
+ },
+ {
+ title: __( 'Return to Normal State', i18n ),
+ description: createInterpolateElement(
+ __( 'Switch back to the normal state by clicking the
cursor icon to test the hover effect in action.', i18n ),
+ { 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
normal state. Notice the hover toggle is
yellow - that means a custom hover effect has been saved!', i18n ),
+ { 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
won\'t see the hover state toggle. Only certain options support hover states. If you don\'t see the toggle, that control doesn\'t have hover customization!', i18n ),
+ { strong:
}
+ ),
+ offsetX: '300px',
+ },
+ ],
+}
diff --git a/src/lazy-components/modal-tour/tours/responsive-controls.js b/src/lazy-components/modal-tour/tours/responsive-controls.js
new file mode 100644
index 0000000000..1fef43e750
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/responsive-controls.js
@@ -0,0 +1,201 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+
+export const responsiveControls = {
+ initialize: () => {
+ // Add some default content that we will select
+
+ const blockObject = wp.blocks.createBlock(
+ 'stackable/columns',
+ {
+ uniqueId: '1dbe04e',
+ blockMargin: { bottom: '' },
+ align: 'full',
+ },
+ [
+ wp.blocks.createBlock(
+ 'stackable/column',
+ {
+ uniqueId: 'f957abc',
+ hasContainer: true,
+ 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/column',
+ {
+ uniqueId: '3dcffca',
+ },
+ [
+ wp.blocks.createBlock(
+ 'stackable/image',
+ {
+ uniqueId: 'e063798',
+ imageExternalUrl: 'https://picsum.photos/id/177/500/700.jpg',
+ }
+ ),
+ ]
+ ),
+ ]
+ )
+
+ // Delete all blocks
+ // const allBlocks = select( 'core/block-editor' ).getBlocks()
+ // dispatch( 'core/block-editor' ).removeBlocks( allBlocks.map( block => block.clientId ) )
+
+ // 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: __( 'Enable Responsive Controls', i18n ),
+ description: createInterpolateElement(
+ __( 'Click the
responsive toggle beside
Column Arrangement to open the device options.', i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+ position: 'left',
+ glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+ nextEventTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle button',
+ preStep: () => {
+ dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+ // Make sure the Columns block is selected
+ 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( () => {
+ // Open Layout tab if it's not open
+ document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
+ }, 100 )
+ setTimeout( () => {
+ document.querySelector( '.ugb-panel--layout:not(.is-opened)' )?.click()
+ }, 200 )
+ },
+ postStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+ },
+ },
+ {
+ title: __( 'Switch to Mobile', i18n ),
+ description: createInterpolateElement(
+ __( 'Let\'s customize for mobile! Click the
mobile button — this lets you change how your columns are arranged
just for mobile screens.', i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+ position: 'left',
+ glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle .stk-label-unit-toggle__wrapper',
+ nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle.is-open button[aria-label="Mobile"]',
+ nextEvent: 'mousedown',
+ preStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+ },
+ postStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
+ },
+ },
+ {
+ title: __( 'Now Editing Mobile Layout', i18n ),
+ description: createInterpolateElement(
+ __( 'See how the editor preview changed size? The responsive toggle now shows a
mobile icon, meaning you\'re adjusting
only for mobile.', i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+ position: 'left',
+ glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+ preStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
+ },
+ },
+ {
+ title: __( 'Change Column Order for Mobile', i18n ),
+ description: createInterpolateElement(
+ __( 'On mobile, it usually looks better to show the
image before the text. Drag the first column below the second to rearrange them for mobile devices.', i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-content',
+ position: 'left',
+ glowTarget: '.ugb-sort-control .stk-control-content .ugb-sort-control__container',
+ postStep: () => {
+ // Update the order of the columns for mobile by dispatching an attribute update.
+ const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
+ const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+ if ( columnsBlock ) {
+ // Reverse the order of columns for mobile by updating the mobileOrder attribute.
+ // The default order is [0, 1]. Swapping makes it [1, 0].
+ wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.clientId, {
+ columnArrangementMobile: '2,1',
+ } )
+ }
+ },
+ },
+ {
+ title: __( 'Switching back to Desktop', i18n ),
+ description: createInterpolateElement(
+ __( 'Notice the arrangement now reflects
your mobile order. If you want to switch back to desktop, click the responsive toggle and select the desktop icon.', i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+ position: 'left',
+ glowTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+ nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+ nextEvent: 'mousedown',
+ preStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+ },
+ postStep: () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+ setTimeout( () => {
+ document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )?.click()
+ }, 100 )
+ },
+ },
+ {
+ title: __( 'Desktop Settings Are Preserved', i18n ),
+ description: createInterpolateElement(
+ __( "You're now back on the
desktop view and your original column order has been preserved. Notice the responsive toggle is
yellow — that means a custom layout for mobile has been saved!", i18n ),
+ { strong:
}
+ ),
+ anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+ position: 'left',
+ glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+ },
+ {
+ title: __( 'Tip: Preview Responsively!', i18n ),
+ description: createInterpolateElement(
+ __( 'You can use the
preview button at the top of the editor to instantly see how your arrangement looks in desktop, tablet, and mobile. Try it out!', i18n ),
+ { strong:
}
+ ),
+ anchor: '.editor-header__settings .editor-preview-dropdown',
+ position: 'bottom',
+ glowTarget: '.editor-header__settings .editor-preview-dropdown',
+ },
+ ],
+}
diff --git a/src/plugins/guided-modal-tour/editor-block-tour.js b/src/plugins/guided-modal-tour/editor-block-tour.js
index 99afe45251..ac13bf0a59 100644
--- a/src/plugins/guided-modal-tour/editor-block-tour.js
+++ b/src/plugins/guided-modal-tour/editor-block-tour.js
@@ -1,9 +1,23 @@
import { registerPlugin } from '@wordpress/plugins'
+import { useEffect, useState } from '@wordpress/element'
import { GuidedModalTour } from '~stackable/components'
const EditorBlockTour = () => {
- return
+ const [ tourId, setTourId ] = useState( 'blocks' )
+ useEffect( () => {
+ // Check the GET parameter for the tour ID.
+ const params = new URLSearchParams( window?.location?.search || '' )
+ const _tourId = params.get( 'tour' )
+
+ if ( _tourId !== 'blocks' ) {
+ setTourId( _tourId )
+ }
+ }, [] )
+
+ return <>
+
+
}
registerPlugin( 'stackable-editor-block-tour', {
diff --git a/src/welcome/getting-started.js b/src/welcome/getting-started.js
index ff598abd6d..4625371840 100644
--- a/src/welcome/getting-started.js
+++ b/src/welcome/getting-started.js
@@ -112,141 +112,117 @@ const EssentialsCard = ( {