Skip to content

Commit 44e5774

Browse files
kaeizenkaeizen
committed
fix code rabbit's qa
1 parent 7b3693d commit 44e5774

File tree

8 files changed

+86
-54
lines changed

8 files changed

+86
-54
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const TOUR_CONDITIONS = {
4040
return window?.location?.search?.includes( 'tour=hover-states' ) ? true : null
4141
},
4242
'advanced-hover-states': () => {
43-
// Force show the tour if there is a GET parameter tour=hover-states
43+
// Force show the tour if there is a GET parameter tour=advanced-hover-states
4444
return window?.location?.search?.includes( 'tour=advanced-hover-states' ) ? true : null
4545
},
4646
'global-color-schemes': () => {

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
3-
import { dispatch } from '@wordpress/data'
3+
import { dispatch, select } from '@wordpress/data'
44
import { createInterpolateElement } from '@wordpress/element'
55

66
export const advancedHoverStates = {
@@ -126,10 +126,10 @@ export const advancedHoverStates = {
126126
nextEvent: 'mousedown',
127127
nextEventTarget: '.stk-color-palette-control__popover-content *',
128128
postStep: () => {
129-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
129+
const allBlocks = select( 'core/block-editor' ).getBlocks()
130130
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
131131
if ( columnsBlock?.innerBlocks?.[ 0 ] && ! columnsBlock.innerBlocks[ 0 ].attributes?.containerBackgroundColorHover ) {
132-
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].clientId, {
132+
dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].clientId, {
133133
containerBackgroundColorHover: '#2b2b2b',
134134
} )
135135
}
@@ -145,10 +145,10 @@ export const advancedHoverStates = {
145145
} ),
146146
offsetX: '300px',
147147
postStep: () => {
148-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
148+
const allBlocks = select( 'core/block-editor' ).getBlocks()
149149
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
150150
if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 0 ] ) {
151-
wp.data.dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId )
151+
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId )
152152
}
153153
},
154154
},
@@ -215,10 +215,10 @@ export const advancedHoverStates = {
215215
nextEvent: 'mousedown',
216216
nextEventTarget: '.stk-color-palette-control__popover-content *',
217217
postStep: () => {
218-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
218+
const allBlocks = select( 'core/block-editor' ).getBlocks()
219219
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
220220
if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 0 ] && ! columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].attributes?.textColor1ParentHover ) {
221-
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId, {
221+
dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId, {
222222
textColor1ParentHover: '#ffffff',
223223
} )
224224
}
@@ -231,10 +231,10 @@ export const advancedHoverStates = {
231231
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 ),
232232
offsetX: '300px',
233233
postStep: () => {
234-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
234+
const allBlocks = select( 'core/block-editor' ).getBlocks()
235235
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
236236
if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] ) {
237-
wp.data.dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId )
237+
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId )
238238
}
239239
},
240240
},
@@ -250,14 +250,18 @@ export const advancedHoverStates = {
250250
position: 'left',
251251
glowTarget: '.stk-control:has([data-attribute="textColor1"])',
252252
nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-control-content button',
253+
modalDelay: 150,
253254
preStep: () => {
254255
setTimeout( () => {
255256
const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
256257
const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
257-
editorSidebar.scrollTo( {
258-
top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
259-
behavior: 'smooth',
260-
} )
258+
259+
if ( editorSidebar && typeof targetElTop === 'number' ) {
260+
editorSidebar.scrollTo( {
261+
top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
262+
behavior: 'smooth',
263+
} )
264+
}
261265
}, 100 )
262266
},
263267
postStep: () => {
@@ -273,10 +277,10 @@ export const advancedHoverStates = {
273277
nextEvent: 'mousedown',
274278
nextEventTarget: '.stk-color-palette-control__popover-content *',
275279
postStep: () => {
276-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
280+
const allBlocks = select( 'core/block-editor' ).getBlocks()
277281
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
278282
if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] && ! columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].attributes?.textColor1ParentHover ) {
279-
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId, {
283+
dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId, {
280284
textColor1ParentHover: '#ffffff',
281285
} )
282286
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
33
import { dispatch, select } from '@wordpress/data'
44
import { createInterpolateElement } from '@wordpress/element'
5+
import { waitForElement } from '../utils'
56

67
export const blockBackgrounds = {
78
initialize: () => {
@@ -118,10 +119,10 @@ export const blockBackgrounds = {
118119
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
119120
}
120121

121-
setTimeout( () => {
122+
waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' ).then( () => {
122123
// Click the tab
123124
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
124-
}, 100 )
125+
} )
125126
},
126127
},
127128
{
@@ -181,9 +182,9 @@ export const blockBackgrounds = {
181182
if ( columnsBlock && columnsBlock.innerBlocks[ 0 ] ) {
182183
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].clientId )
183184
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
184-
setTimeout( () => {
185+
waitForElement( '.ugb-panel--layout.is-opened .components-panel__body-title button' ).then( () => {
185186
document.querySelector( '.ugb-panel--layout.is-opened .components-panel__body-title button' )?.click()
186-
}, 100 )
187+
} )
187188
}
188189
},
189190
},

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
33
import { dispatch, select } from '@wordpress/data'
44
import { createInterpolateElement } from '@wordpress/element'
5+
import { waitForElement } from '../utils'
56

67
export const globalColorSchemes = {
78
initialize: () => {
@@ -159,14 +160,17 @@ export const globalColorSchemes = {
159160
position: 'left',
160161
nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
161162
glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
163+
modalDelay: 150,
162164
preStep: () => {
163165
setTimeout( () => {
164166
const targetElTop = document.querySelector( '.stk-preset-color-schemes__preset-wrapper' )?.getBoundingClientRect()?.top
165167
const editorSidebar = document.querySelector( '.interface-complementary-area.editor-sidebar' )
166-
editorSidebar.scrollTo( {
167-
top: targetElTop - editorSidebar.getBoundingClientRect().top - 300,
168-
behavior: 'smooth',
169-
} )
168+
if ( editorSidebar && typeof targetElTop === 'number' ) {
169+
editorSidebar.scrollTo( {
170+
top: targetElTop - editorSidebar.getBoundingClientRect().top - 300,
171+
behavior: 'smooth',
172+
} )
173+
}
170174
}, 100 )
171175
},
172176
postStep: () => {
@@ -190,7 +194,7 @@ export const globalColorSchemes = {
190194
offsetX: '-8px',
191195
glowTarget: '[aria-controls="edit-post:block"]',
192196
nextEventTarget: '[aria-controls="edit-post:block"]',
193-
postStep: () => {
197+
postStep: async () => {
194198
dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
195199
// Make sure the Inner Column is selected.
196200
const block = select( 'core/block-editor' ).getSelectedBlock()
@@ -200,12 +204,11 @@ export const globalColorSchemes = {
200204
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
201205
if ( columnsBlock ) {
202206
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
203-
setTimeout( () => {
204-
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
205-
setTimeout( () => {
206-
document.querySelector( '.ugb-block-background-panel:not(is-opened) button' )?.click()
207-
}, 100 )
208-
}, 100 )
207+
await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )
208+
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
209+
210+
await waitForElement( '.ugb-block-background-panel:not(.is-opened) button' )
211+
document.querySelector( '.ugb-block-background-panel:not(.is-opened) button' )?.click()
209212
}
210213
}
211214
},

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
3-
import { dispatch } from '@wordpress/data'
3+
import { dispatch, select } from '@wordpress/data'
44
import { createInterpolateElement } from '@wordpress/element'
5+
import { waitForElement } from '../utils'
56

67
export const hoverStates = {
78
initialize: () => {
@@ -21,14 +22,14 @@ export const hoverStates = {
2122
// Select the inner columns block for the tour
2223
dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
2324

24-
setTimeout( () => {
25+
waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' ).then( () => {
2526
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
2627
setTimeout( () => {
2728
document.querySelector( '.ugb-panel--image:not(.is-opened)' )?.click()
2829
const target = document.querySelector( '.stk-control:has([data-attribute="imageZoom"])' )
2930
target?.scrollIntoView( { behavior: 'auto', block: 'center' } )
3031
}, 100 )
31-
}, 200 )
32+
} )
3233
},
3334
steps: [
3435
{
@@ -41,6 +42,12 @@ export const hoverStates = {
4142
position: 'left',
4243
glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button[data-value="normal"]',
4344
nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
45+
preStep: () => {
46+
waitForElement( '.stk-control:has([data-attribute="imageZoom"])', 3000 ).then( () => {
47+
const target = document.querySelector( '.stk-control:has([data-attribute="imageZoom"])' )
48+
target?.scrollIntoView( { behavior: 'auto', block: 'center' } )
49+
} )
50+
},
4451
},
4552
{
4653
title: __( 'Different Hover States', i18n ),
@@ -74,10 +81,10 @@ export const hoverStates = {
7481
},
7582
postStep: () => {
7683
// Update the order of the columns for mobile by dispatching an attribute update.
77-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
84+
const allBlocks = select( 'core/block-editor' ).getBlocks()
7885
const imageBlock = allBlocks.find( block => block.name === 'stackable/image' )
7986
if ( imageBlock && ! imageBlock.attributes?.imageZoomHover ) {
80-
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
87+
dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
8188
imageZoomHover: 1.5,
8289
} )
8390
}
@@ -107,9 +114,9 @@ export const hoverStates = {
107114
},
108115
postStep: () => {
109116
document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
110-
setTimeout( () => {
117+
waitForElement( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' ).then( () => {
111118
document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' )?.click()
112-
}, 100 )
119+
} )
113120
},
114121
},
115122
{

‎src/lazy-components/modal-tour/tours/responsive-controls.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n'
22
import { i18n } from 'stackable'
33
import { dispatch, select } from '@wordpress/data'
44
import { createInterpolateElement } from '@wordpress/element'
5+
import { waitForElement } from '../utils'
56

67
export const responsiveControls = {
78
initialize: () => {
@@ -83,21 +84,20 @@ export const responsiveControls = {
8384
position: 'left',
8485
glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
8586
nextEventTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle button',
86-
preStep: () => {
87+
preStep: async () => {
8788
dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
8889
// Make sure the Columns block is selected
8990
const allBlocks = select( 'core/block-editor' ).getBlocks()
9091
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
9192
if ( columnsBlock ) {
9293
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
9394
}
94-
setTimeout( () => {
95-
// Open Layout tab if it's not open
96-
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
97-
}, 100 )
98-
setTimeout( () => {
99-
document.querySelector( '.ugb-panel--layout:not(.is-opened)' )?.click()
100-
}, 200 )
95+
await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )
96+
// Open Layout tab if it's not open
97+
document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
98+
99+
await waitForElement( '.ugb-panel--layout:not(.is-opened)' )
100+
document.querySelector( '.ugb-panel--layout:not(.is-opened)' )?.click()
101101
},
102102
postStep: () => {
103103
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
@@ -145,12 +145,12 @@ export const responsiveControls = {
145145
glowTarget: '.ugb-sort-control .stk-control-content .ugb-sort-control__container',
146146
postStep: () => {
147147
// Update the order of the columns for mobile by dispatching an attribute update.
148-
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
148+
const allBlocks = select( 'core/block-editor' ).getBlocks()
149149
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
150150
if ( columnsBlock ) {
151151
// Reverse the order of columns for mobile by updating the mobileOrder attribute.
152152
// The default order is [0, 1]. Swapping makes it [1, 0].
153-
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.clientId, {
153+
dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.clientId, {
154154
columnArrangementMobile: '2,1',
155155
} )
156156
}
@@ -170,11 +170,11 @@ export const responsiveControls = {
170170
preStep: () => {
171171
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
172172
},
173-
postStep: () => {
173+
postStep: async () => {
174174
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
175-
setTimeout( () => {
176-
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )?.click()
177-
}, 100 )
175+
176+
await waitForElement( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )
177+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )?.click()
178178
},
179179
},
180180
{

‎src/lazy-components/modal-tour/utils.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const waitForElement = ( selector, timeout = 2000 ) => {
2+
return new Promise( ( resolve, reject ) => {
3+
const startTime = Date.now()
4+
const check = () => {
5+
const element = document.querySelector( selector )
6+
if ( element ) {
7+
resolve( element )
8+
} else if ( Date.now() - startTime > timeout ) {
9+
reject( false )
10+
} else {
11+
requestAnimationFrame( check )
12+
}
13+
}
14+
check()
15+
} )
16+
}

‎src/welcome/getting-started.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ export const GettingStarted = () => {
282282
return null
283283
}
284284

285-
return <div className="s-card" key={ i }>
285+
return <div className="s-card" key={ item.id }>
286286
{ i === 0 && <div className="s-quick-buttons-arrow">
287287
<SVGQuickButtonsArrow />
288288
<span>{ __( 'Quick Start', i18n ) }</span>
@@ -299,7 +299,8 @@ export const GettingStarted = () => {
299299
</div>
300300
<div className="s-quick-button-button">
301301
<a
302-
href={ item.link }
302+
href={ item.premium && ! isPro ? undefined : item.link }
303+
aria-disabled={ item.premium && ! isPro }
303304
className={ classNames( 's-button s-secondary-button uppercase', {
304305
's-button--checked': guidedTourStates?.includes( item.id ),
305306
's-button--disabled': item.premium && ! isPro,

0 commit comments

Comments
 (0)