fix: typos

Author: bfintal@gmail.com

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

@@ -56,7 +56,7 @@ export const advancedHoverStates = {
 	},
 	steps: [
 		{
-			title: __( 'Advnaced Hover State Styling', i18n ),
+			title: __( 'Advanced Hover State Styling', i18n ),
 			description: createInterpolateElement(
 				__( 'Learn how to style containers and their contents together by applying hover effects to multiple blocks at once.', i18n ),
 				{ strong: <strong /> }

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

@@ -93,8 +93,10 @@ export const blockBackgrounds = {
 				}
 			},
 			postStep: () => {
-				// Click the tab
-				document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+				setTimeout( () => {
+					// Click the tab
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+				}, 100 )
 			},
 		},
 		{
@@ -138,12 +140,14 @@ export const blockBackgrounds = {
 			nextEvent: 'mousedown',
 			preStep: () => {
 				// Toggle background on
-				document.querySelector( '.ugb-block-background-panel:not(is-opened) button' )?.click()
-				document.querySelector( '.ugb-block-background-panel .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
+				document.querySelector( '.ugb-block-background-panel:not(.is-opened) button' )?.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()
+				setTimeout( () => {
+					// Click the tab
+					document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown:not(.is-open)' )?.click()
+				}, 100 )
 			},
 		},
 		{
@@ -158,8 +162,10 @@ export const blockBackgrounds = {
 			// 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()
+				setTimeout( () => {
+					// Click the color picker
+					document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+				}, 100 )
 			},
 		},
 		{
@@ -193,8 +199,8 @@ export const blockBackgrounds = {
 			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()
+				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()
 			},
 		},
 		{

src/lazy-components/modal-tour/tours/global-color-schemes.js

@@ -232,7 +232,7 @@ export const globalColorSchemes = {
 		{
 			title: __( 'Color Schemes in Action', i18n ),
 			description: __( 'Color Schemes help maintain consistency. With Block Background enabled, all the inner blocks adjust to have different colors applied automatically.', i18n ),
-			help: createInterpolateElement( __( 'Disable the <strong>Block Background</strong> and see how the block colors changes back to the default color scheme. Click next to continue.', i18n ), {
+			help: createInterpolateElement( __( 'Disable the <strong>Block Background</strong> and see how the block colors change back to the default color scheme. Click next to continue.', i18n ), {
 				strong: <strong />,
 			} ),
 			anchor: '.ugb-block-background-panel .ugb-toggle-panel-form-toggle',

src/welcome/getting-started.js

@@ -345,7 +345,7 @@ export const GettingStarted = () => {
 				>
 					<div
 						className="s-getting-started__progress-bar-fill"
-						style={ { width: `${ ( totalDone / totalGuidedTours ) * 100 }%` } }
+						style={ { width: `${ totalGuidedTours ? ( totalDone / totalGuidedTours ) * 100 : 0 }%` } }
 					></div>
 				</div>
 			</section>
@@ -366,7 +366,7 @@ export const GettingStarted = () => {
 							></iframe>
 						</div>
 						<h3 id="video-tutorial-title">{ __( 'Getting Started with Stackable', i18n ) }</h3>
-						<p id="video-tutorial-desc">{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
+						<p id="video-tutorial-desc">{ __( 'Watch this video to get started with Stackable within 5 minutes.', i18n ) }</p>
 					</div>
 				</div>
 				<div className="s-guided-tours-container" role="list" aria-label={ __( 'Guided Tutorials', i18n ) }>
@@ -434,7 +434,7 @@ export const GettingStarted = () => {
 															// 's-button--disabled': item.premium && ! isPro,
 														} ) }
 														role="button"
-														tabIndex={ item.premium && ! isPro ? -1 : 0 }
+														tabIndex={ 0 }
 														aria-pressed={ !! guidedTourStates?.includes( item.id ) }
 														aria-label={
 															`${ item.title }: ${ item.description }` +