updated tours

Author: bfintal@gmail.com

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

@@ -56,9 +56,9 @@ export const advancedHoverStates = {
 	},
 	steps: [
 		{
-			title: __( 'Styling Containers with Hover Styles', i18n ),
+			title: __( 'Advnaced Hover State Styling', i18n ),
 			description: createInterpolateElement(
-				__( 'Styling the container with hover styles is a great way to add interactivity to your designs. Click the <strong>hover toggle</strong> next to <strong>Background Color</strong> to start.', i18n ),
+				__( 'Learn how to style containers and their contents together by applying hover effects to multiple blocks at once.', i18n ),
 				{ strong: <strong /> }
 			),
 			help: createInterpolateElement( __( 'Click the <strong>hover toggle</strong> next to <strong>Background Color</strong> to start.', i18n ), {
@@ -82,12 +82,12 @@ export const advancedHoverStates = {
 		{
 			title: __( 'Selecting the Hover State', i18n ),
 			description: createInterpolateElement(
-				__( 'Now select the <strong>hover button</strong>. This lets you adjust how the container will look when hovered.', i18n ),
+				__( 'Now select the <strong>Hovered State</strong> button. This lets you adjust how the container will look when hovered.', i18n ),
 				{ strong: <strong /> }
 			),
-			anchor: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper',
+			anchor: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button[data-value="hover"]',
 			position: 'left',
-			glowTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper',
+			glowTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button[data-value="hover"]',
 			nextEventTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]',
 			nextEvent: 'mousedown',
 			preStep: () => {
@@ -98,9 +98,9 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Adjusting the Background Color on Hover', i18n ),
+			title: __( 'Hover Background Color', i18n ),
 			description: createInterpolateElement(
-				__( 'The controls now affect the <strong>Hover</strong> state only. Try adjusting the <strong>Background Color</strong> value and see how the preview changes when hovered.', i18n ),
+				__( 'The controls now affect the <strong>Hover</strong> state only. Let\'s try adjusting the <strong>Background Color</strong> to black.', i18n ),
 				{ strong: <strong /> }
 			),
 			help: createInterpolateElement( __( 'Click on <strong>Background Color</strong> to open the color picker and select a color.', i18n ), {
@@ -118,13 +118,14 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Pick a Color', i18n ),
-			description: __( 'Select a color from the palette to apply it.', i18n ),
+			title: __( 'Pick a Dark Color', i18n ),
+			description: __( 'Select a black or another dark color from the palette to apply it to the hovered state of this container.', i18n ),
 			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
 			position: 'left',
+			help: createInterpolateElement( __( 'Click next to continue.', i18n ), {
+				strong: <strong />,
+			} ),
 			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
-			nextEvent: 'mousedown',
-			nextEventTarget: '.stk-color-palette-control__popover-content *',
 			postStep: () => {
 				const allBlocks = select( 'core/block-editor' ).getBlocks()
 				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
@@ -138,9 +139,9 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Preview Your Hover Effect', i18n ),
-			description: __( 'Now the background will turn dark when your mouse hovers over the container, however the text is now hard to read, let\'s change it.', i18n ),
-			help: createInterpolateElement( __( 'Select the <strong>Heading Block</strong> to continue.', i18n ), {
+			title: __( 'Text is Now Unreadable', i18n ),
+			description: __( 'On hover, the background will now be black, but now we cannot read the Heading text properly! Let\'s change it!', i18n ),
+			help: createInterpolateElement( __( 'Select the <strong>Heading Block</strong> and click next to continue.', i18n ), {
 				strong: <strong />,
 			} ),
 			offsetX: '300px',
@@ -153,8 +154,8 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Selecting the Parent Container Hover State', i18n ),
-			description: createInterpolateElement( __( 'Now select the <strong>parent container hover state</strong>. This lets you adjust how the heading text will look when the parent container is hovered.', i18n ), {
+			title: __( 'Parent Hovered State', i18n ),
+			description: createInterpolateElement( __( 'Now select the <strong>Parent Container Hover State</strong>. This lets you adjust how the heading text will look when the parent container is hovered.', i18n ), {
 				strong: <strong />,
 			} ),
 			help: createInterpolateElement( __( 'Select the <strong>parent container hover state</strong> to continue.', i18n ), {
@@ -164,6 +165,7 @@ export const advancedHoverStates = {
 			position: 'left',
 			glowTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="parent-hover"]',
 			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="parent-hover"]',
+			nextEvent: 'mousedown',
 			modalDelay: 150,
 			preStep: () => {
 				setTimeout( () => {
@@ -187,7 +189,7 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Selecting the Heading Color', i18n ),
+			title: __( 'Heading Color', i18n ),
 			description: createInterpolateElement( __( 'Now select the <strong>heading color</strong> to open the color picker.', i18n ), {
 				strong: <strong />,
 			} ),
@@ -210,13 +212,14 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Pick a Text Color', i18n ),
-			description: __( 'Select a text color from the palette to apply it.', i18n ),
+			title: __( 'Make the Heading White', i18n ),
+			description: __( 'Select white from the palette to apply it to the hovered state of the heading text.', i18n ),
+			help: createInterpolateElement( __( 'Click next to continue.', i18n ), {
+				strong: <strong />,
+			} ),
 			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
 			position: 'left',
 			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
-			nextEvent: 'mousedown',
-			nextEventTarget: '.stk-color-palette-control__popover-content *',
 			postStep: () => {
 				const allBlocks = select( 'core/block-editor' ).getBlocks()
 				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
@@ -230,23 +233,11 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Heading Block is Now Readable', i18n ),
-			description: __( 'Now the heading block is readable when your mouse hovers over the container. Let\'s do the same for the text color in the text block.', i18n ),
-			offsetX: '300px',
-			postStep: () => {
-				const allBlocks = select( 'core/block-editor' ).getBlocks()
-				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
-				if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] ) {
-					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId )
-				}
-			},
-		},
-		{
-			title: __( 'Selecting the Text Color for Parent Hover State', i18n ),
-			description: createInterpolateElement( __( 'Now select the <strong>parent container hover state</strong>. This lets you adjust how the text block will look when the parent container is hovered.', i18n ), {
+			title: __( 'Text Color', i18n ),
+			description: createInterpolateElement( __( 'Now that\'s better! Let\'s do the same for the text block.', i18n ), {
 				strong: <strong />,
 			} ),
-			help: createInterpolateElement( __( 'Select the <strong>parent container hover state</strong> to continue.', i18n ), {
+			help: createInterpolateElement( __( 'Select the <strong>text color</strong> to open the color picker.', i18n ), {
 				strong: <strong />,
 			} ),
 			anchor: '.stk-control:has([data-attribute="textColor1"])',
@@ -256,6 +247,12 @@ export const advancedHoverStates = {
 			modalDelay: 150,
 			preStep: () => {
 				setTimeout( () => {
+					const allBlocks = select( 'core/block-editor' ).getBlocks()
+					const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+					if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] ) {
+						dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId )
+					}
+
 					const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
 					const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
 
@@ -272,13 +269,14 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Pick a Text Color', i18n ),
-			description: __( 'Select a text color from the palette to apply it.', i18n ),
+			title: __( 'Make the Text White', i18n ),
+			description: __( 'With the Text block now selected, pick white from the palette to apply it to the hovered state of the text block.', i18n ),
+			help: createInterpolateElement( __( 'Click next to continue.', i18n ), {
+				strong: <strong />,
+			} ),
 			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
 			position: 'left',
 			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
-			nextEvent: 'mousedown',
-			nextEventTarget: '.stk-color-palette-control__popover-content *',
 			postStep: () => {
 				const allBlocks = select( 'core/block-editor' ).getBlocks()
 				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
@@ -292,16 +290,14 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Text Block is also now readable', i18n ),
-			description: __( 'Now the text block is also readable when your mouse hovers over the container.', i18n ),
-			offsetX: '300px',
-		},
-		{
-			title: __( 'Return to Normal State', i18n ),
+			title: __( 'Back to Normal State', i18n ),
 			description: createInterpolateElement(
-				__( 'Switch back to the normal state by clicking the <strong>cursor icon</strong> to test the hover states in action.', i18n ),
+				__( 'Our block looks good! Now let\'s switch back to the normal state by clicking the <strong>Normal State</strong> button.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: createInterpolateElement( __( 'You can also de-select the block to return to the normal state.', i18n ), {
+				strong: <strong />,
+			} ),
 			anchor: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
 			position: 'left',
 			glowTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
@@ -318,22 +314,24 @@ export const advancedHoverStates = {
 			},
 		},
 		{
-			title: __( 'Back on Normal State', i18n ),
+			title: __( 'We\'re Done!', i18n ),
 			description: createInterpolateElement(
-				__( 'You are now back on the <strong>normal</strong> state. You can now test the hover states in action.', i18n ),
+				__( 'You are now seeing the block in its <strong>normal</strong> state. Hover over the block to see the hover states in action.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: createInterpolateElement( __( 'Hover your mouse over the block and see it switch live.', i18n ), {
+				strong: <strong />,
+			} ),
 			offsetX: '300px',
 		},
 		{
-			title: __( 'Prop Tip: The Levels of Hover States', i18n ),
+			title: __( 'Pro Tip: Different Hover States', i18n ),
 			description: createInterpolateElement(
-				__( 'There are <strong>three levels of hover states</strong> you can style: <ul><li><strong>Normal State</strong>: when the mouse is not over any block</li><li><strong>Container Hover</strong>: when the mouse is hovering over a container</li><li><strong>Block Hover</strong>: when the mouse is directly over a block</li></ul>With Stackable, you can customize the appearance for all these states, making your designs more interactive and visually appealing.', i18n ),
+				__( 'There are <strong>three levels of hover states</strong> you can style: <ul><li><strong>Normal State</strong>: when the mouse is not over any block</li><li><strong>Block Hover</strong>: when the mouse is directly over a block</li><li><strong>Container Hover</strong>: when the mouse is hovering over a container</li></ul>You can customize the appearance for all these states, making your designs more interactive and visually appealing.', i18n ),
 				{
 					strong: <strong />, ul: <ul />, li: <li />,
 				}
 			),
-			offsetX: '300px',
 		},
 	],
 }

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

@@ -149,14 +149,14 @@ export const blockBackgrounds = {
 		{
 			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 ), {
+			help: createInterpolateElement( __( 'Choose a <strong>Color</strong> from the palette to apply it, click next when done.', i18n ), {
 				strong: <strong />,
 			} ),
 			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
 			position: 'left',
 			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
-			nextEvent: 'mousedown',
-			nextEventTarget: '.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()

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

@@ -35,9 +35,12 @@ export const hoverStates = {
 		{
 			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 ),
+				__( 'Block options with a <strong>hover toggle</strong> on them can be adjusted for different hover states.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: createInterpolateElement( __( 'Click the <strong>hover toggle</strong> beside <strong> Zoom</strong> to open the 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"]',
@@ -52,12 +55,15 @@ export const hoverStates = {
 		{
 			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 ),
+				__( 'Now select the <strong>Hovered State button</strong>. This lets you adjust how the image will look when hovered.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: createInterpolateElement( __( 'Click the <strong>Second button from the list</strong> to toggle this hover state.', 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',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="hover"]',
 			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]',
 			nextEvent: 'mousedown',
 			preStep: () => {
@@ -73,6 +79,9 @@ export const hoverStates = {
 				__( '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 /> }
 			),
+			help: createInterpolateElement( __( 'Pick a zoom value of <strong>1.2</strong> to see the hover effect then click on next.', i18n ), {
+				strong: <strong />,
+			} ),
 			anchor: '.stk-control:has([data-attribute="imageZoom"])',
 			position: 'left',
 			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-content',
@@ -85,17 +94,18 @@ export const hoverStates = {
 				const imageBlock = allBlocks.find( block => block.name === 'stackable/image' )
 				if ( imageBlock && ! imageBlock.attributes?.imageZoomHover ) {
 					dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
-						imageZoomHover: 1.5,
+						imageZoomHover: 1.2,
 					} )
 				}
 			},
 		},
 		{
-			title: __( 'Preview Your Hover Effect', i18n ),
+			title: __( 'Hover State Preview', 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 ),
+				__( 'Notice that the image block is now zoomed in. Any changes you make to the block will be reflected in the hover state only.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: __( 'Click next to continue.', i18n ),
 			offsetX: '300px',
 		},
 		{
@@ -122,20 +132,31 @@ export const hoverStates = {
 		{
 			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 ),
+				__( 'You are now back on the <strong>normal</strong> state. Notice the hover toggle is <strong>yellow</strong>, this means there is a value set for the hover state!', i18n ),
 				{ strong: <strong /> }
 			),
-			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle',
 			position: 'left',
-			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle',
 		},
 		{
-			title: __( 'Pro Tip: Only Some Controls Feature Hover Toggle', i18n ),
+			title: __( 'Hover Over the Image', 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 ),
+				__( 'Hover over the image block to see the hover effect in action.', i18n ),
 				{ strong: <strong /> }
 			),
+			help: __( 'Click next to continue.', i18n ),
 			offsetX: '300px',
 		},
+		{
+			title: __( 'Tip: Not All Controls Have Hover States', i18n ),
+			description: createInterpolateElement(
+				__( 'Only certain options support hover states. If you see the toggle on another option (like <strong>Image Shadow</strong>), that means the control has hover states!', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageShadow"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageShadow"])',
+		},
 	],
 }