Skip to content

Commit 9de8c0c

Browse files
kaeizenkaeizen
committed
add advanced hover states, color schemes, premium buttons
1 parent ccad290 commit 9de8c0c

File tree

11 files changed

+674
-8
lines changed

11 files changed

+674
-8
lines changed

‎src/components/color-palette-control/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,7 @@ const ColorPaletteControl = memo( props => {
213213
{ ...controlProps }
214214
className={ classnames( [ className, 'editor-color-palette-control', 'stk-color-palette-control' ] ) }
215215
label={ label }
216+
data-attribute={ props.attribute }
216217
>
217218
{ props.isExpanded && colorPalette }
218219
{ ! props.isExpanded && (

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { models } from '@wordpress/api'
2222
import {
2323
useEffect, useState, lazy, Suspense, memo,
2424
} from '@wordpress/element'
25+
import { applyFilters } from '@wordpress/hooks'
2526

2627
// The main tour component.
2728
const GuidedModalTour = memo( props => {
@@ -59,7 +60,8 @@ const GuidedModalTour = memo( props => {
5960
// condition can be true, false, or null. true will show the tour (even if
6061
// it's already done), false will not show the tour, null will show the tour
6162
// only once (normal behavior).
62-
const condition = TOUR_CONDITIONS[ tourId ]
63+
const conditions = applyFilters( 'stackable.guided-tour.conditions', TOUR_CONDITIONS )
64+
const condition = conditions[ tourId ]
6365
const conditionResult = condition ? condition() : null
6466
if ( conditionResult === false ) {
6567
return null

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,12 @@ export const TOUR_CONDITIONS = {
3939
// Force show the tour if there is a GET parameter tour=hover-states
4040
return window?.location?.search?.includes( 'tour=hover-states' ) ? true : null
4141
},
42+
'advanced-hover-states': () => {
43+
// Force show the tour if there is a GET parameter tour=hover-states
44+
return window?.location?.search?.includes( 'tour=advanced-hover-states' ) ? true : null
45+
},
46+
'global-color-schemes': () => {
47+
// Force show the tour if there is a GET parameter tour=global-color-schemes
48+
return window?.location?.search?.includes( 'tour=global-color-schemes' ) ? true : null
49+
},
4250
}

‎src/components/sortable-picker/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@ const LabeledItemIndicator = props => {
207207
}
208208
} }
209209
isPressed={ isOpen }
210+
data-item-key={ item.key }
210211
>
211212
<HStack justify="flex-start">
212213
<ItemPreview item={ item } />

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ const ModalTour = memo( props => {
7979
useEffect( () => {
8080
setTimeout( () => {
8181
initialize()
82+
if ( currentStep === 0 && preStep ) {
83+
preStep( currentStep )
84+
}
8285
}, 50 )
8386
}, [ initialize ] )
8487

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

Lines changed: 332 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export const blockBackgrounds = {
137137
nextEvent: 'mousedown',
138138
preStep: () => {
139139
// Toggle background on
140-
document.querySelector( '.ugb-block-background-panel:not(is-opened)' )?.click()
140+
document.querySelector( '.ugb-block-background-panel:not(is-opened) button' )?.click()
141141
document.querySelector( '.ugb-block-background-panel .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
142142
},
143143
postStep: () => {
@@ -151,9 +151,9 @@ export const blockBackgrounds = {
151151
help: createInterpolateElement( __( 'Choose a <strong>Color</strong> from the palette to apply it.', i18n ), {
152152
strong: <strong />,
153153
} ),
154-
anchor: '.stk-color-palette-control__popover-content',
154+
anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
155155
position: 'left',
156-
glowTarget: '.stk-color-palette-control__popover-content',
156+
glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
157157
nextEvent: 'mousedown',
158158
nextEventTarget: '.stk-color-palette-control__popover-content *',
159159
postStep: () => {

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

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import { __ } from '@wordpress/i18n'
2+
import { i18n } from 'stackable'
3+
import { dispatch, select } from '@wordpress/data'
4+
import { createInterpolateElement } from '@wordpress/element'
5+
6+
export const globalColorSchemes = {
7+
initialize: () => {
8+
// Add some default content that we will select
9+
10+
const headingBlock = wp.blocks.createBlock(
11+
'stackable/heading',
12+
{
13+
uniqueId: '3dcffca',
14+
// Retain our text
15+
text: 'The World is Yours to Explore',
16+
textTag: 'h1',
17+
}
18+
)
19+
20+
const columnsBlock = wp.blocks.createBlock(
21+
'stackable/columns',
22+
{
23+
uniqueId: '1dbe04e',
24+
blockMargin: { bottom: '' },
25+
align: 'full',
26+
hasBackground: true,
27+
},
28+
[
29+
wp.blocks.createBlock(
30+
'stackable/column',
31+
{
32+
uniqueId: 'f957abc',
33+
},
34+
[
35+
wp.blocks.createBlock(
36+
'stackable/heading',
37+
{
38+
uniqueId: 'a8ebea7',
39+
// Retain our text
40+
text: 'Explore the World with Us',
41+
textTag: 'h2',
42+
}
43+
),
44+
wp.blocks.createBlock(
45+
'stackable/text',
46+
{
47+
uniqueId: '57e76a1',
48+
// Retain our text
49+
text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
50+
}
51+
),
52+
wp.blocks.createBlock(
53+
'stackable/button-group',
54+
{ uniqueId: 'e063798' },
55+
[
56+
wp.blocks.createBlock(
57+
'stackable/button',
58+
{
59+
uniqueId: '5d04ca8',
60+
// Retain our text
61+
text: 'Start your journey',
62+
url: '',
63+
}
64+
),
65+
]
66+
),
67+
]
68+
),
69+
]
70+
)
71+
72+
// Insert our block
73+
dispatch( 'core/block-editor' ).insertBlocks( [ headingBlock, columnsBlock ], 0 )
74+
// Open the global settings sidebar.
75+
dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' )
76+
77+
setTimeout( () => {
78+
document.querySelector( '.ugb-global-color-schemes__panel:not(.is-opened) .components-panel__body-title button' )?.click()
79+
}, 200 )
80+
},
81+
steps: [
82+
{
83+
title: '👋 ' + __( 'Welcome to Your Global Color Schemes', i18n ),
84+
description: __( 'You can use the Global Color Schemes to easily apply consistent color themes across your entire website for effortless branding.', i18n ),
85+
size: 'medium',
86+
anchor: '.ugb-global-color-schemes__panel .components-panel__body-title',
87+
position: 'left',
88+
},
89+
{
90+
title: __( 'Default Color Scheme', i18n ),
91+
description: __( 'The default color scheme is the color scheme that is applied to your entire website by default.', i18n ),
92+
help: createInterpolateElement( __( 'Click the <strong>Default Color Scheme</strong> button to continue.', i18n ), {
93+
strong: <strong />,
94+
} ),
95+
anchor: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
96+
position: 'left',
97+
nextEventTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
98+
glowTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
99+
postStep: () => {
100+
document.querySelector( '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]' )?.click()
101+
},
102+
},
103+
{
104+
title: __( 'Setting the Default Color Scheme', i18n ),
105+
description: __( 'To make things easy, we\'ve added some color scheme presets. Pick the 2nd one to quickly see how your entire design system will instantly change in the Style Guide preview below.', i18n ),
106+
help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
107+
strong: <strong />,
108+
} ),
109+
size: 'medium',
110+
anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
111+
position: 'left',
112+
nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
113+
glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
114+
postStep: () => {
115+
document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2) button' )?.click()
116+
},
117+
},
118+
{
119+
title: __( 'See the Stackable Blocks Change Colors', i18n ),
120+
description: __( 'Notice how all Stackable blocks changed their colors across your site. You can further customize the colors below to match your brand or style.', i18n ),
121+
offsetX: '300px',
122+
},
123+
{
124+
title: __( 'Go Back to Color Schemes', i18n ),
125+
description: __( 'Let\'s see another way that color schemes can help with your site\'s design. Click the back button to return to the list of color schemes.', i18n ),
126+
help: createInterpolateElement( __( 'Click the <strong>Back</strong> button to continue.', i18n ), {
127+
strong: <strong />,
128+
} ),
129+
anchor: '.stk-inspector-sub-header button',
130+
position: 'left',
131+
glowTarget: '.stk-inspector-sub-header button',
132+
nextEventTarget: '.stk-inspector-sub-header button',
133+
postStep: () => {
134+
document.querySelector( '.stk-inspector-sub-header button' )?.click()
135+
},
136+
},
137+
{
138+
title: __( 'Background Schemes', i18n ),
139+
description: __( 'The columns block on this page has its block background enabled. You can assign a different color scheme to blocks with backgrounds turned on.', i18n ),
140+
help: createInterpolateElement( __( 'Click the <strong>Background Scheme</strong> button to continue.', i18n ), {
141+
strong: <strong />,
142+
} ),
143+
anchor: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
144+
position: 'left',
145+
nextEventTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
146+
glowTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
147+
postStep: () => {
148+
document.querySelector( '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]' )?.click()
149+
},
150+
},
151+
{
152+
title: __( 'Pick a Darker Background Color Scheme', i18n ),
153+
description: __( 'Let\'s choose a darker color scheme preset for the background. This background color scheme will be used on blocks when the block background is enabled, giving your design more contrast and customization.', i18n ),
154+
help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
155+
strong: <strong />,
156+
} ),
157+
size: 'medium',
158+
anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
159+
position: 'left',
160+
nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
161+
glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
162+
preStep: () => {
163+
setTimeout( () => {
164+
const targetElTop = document.querySelector( '.stk-preset-color-schemes__preset-wrapper' )?.getBoundingClientRect()?.top
165+
const editorSidebar = document.querySelector( '.interface-complementary-area.editor-sidebar' )
166+
editorSidebar.scrollTo( {
167+
top: targetElTop - editorSidebar.getBoundingClientRect().top - 300,
168+
behavior: 'smooth',
169+
} )
170+
}, 100 )
171+
},
172+
postStep: () => {
173+
document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8) button' )?.click()
174+
},
175+
},
176+
{
177+
title: __( 'Looking Good! Background Scheme Updated', i18n ),
178+
description: __( 'The columns block now uses your chosen darker background, and its content colors automatically follow the scheme for a nice, coordinated look.', i18n ),
179+
offsetX: '300px',
180+
},
181+
{
182+
title: __( 'Open the Inspector Sidebar', i18n ),
183+
description: __( 'Now let\'s open the Inspector sidebar so you can see where to further customize this color scheme.', i18n ),
184+
help: createInterpolateElement( __( 'Click the <strong>Inspector Controls</strong> button to continue.', i18n ), {
185+
strong: <strong />,
186+
} ),
187+
anchor: '[aria-controls="edit-post:block"]',
188+
position: 'left-top',
189+
offsetY: '-30px',
190+
offsetX: '-8px',
191+
glowTarget: '[aria-controls="edit-post:block"]',
192+
nextEventTarget: '[aria-controls="edit-post:block"]',
193+
postStep: () => {
194+
dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
195+
// Make sure the Inner Column is selected.
196+
const block = select( 'core/block-editor' ).getSelectedBlock()
197+
if ( block?.name !== 'stackable/column' ) {
198+
// Look for the first "stackable/columns" block
199+
const allBlocks = select( 'core/block-editor' ).getBlocks()
200+
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
201+
if ( columnsBlock ) {
202+
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 )
209+
}
210+
}
211+
},
212+
},
213+
{
214+
title: __( 'Switch Between Color Schemes Anytime', i18n ),
215+
description: __( 'If you have multiple global color schemes set up, you can easily change your block\'s style by switching the color scheme option here to instantly apply a new look.', i18n ),
216+
anchor: '.stk-control:has([data-attribute="backgroundColorScheme"])',
217+
position: 'left',
218+
glowTarget: '.stk-control:has([data-attribute="backgroundColorScheme"])',
219+
nextEventTarget: '.stk-control:has([data-attribute="backgroundColorScheme"]) select',
220+
},
221+
{
222+
title: __( 'Global Color Schemes Ready!', i18n ),
223+
description: __( 'You\'re all set! Start customizing and applying your global color schemes to make your site look great.', i18n ),
224+
offsetX: '300px',
225+
offsetY: '100px',
226+
},
227+
],
228+
}

‎src/lazy-components/modal-tour/tours/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { applyFilters } from '@wordpress/hooks'
5+
16
// This file automatically imports all tour files from the tours directory
27
// and exports them as a single object for use in TOUR_STEPS
38

49
// Dynamically import all tour files from the tours directory
510
const tourContext = require.context( './', false, /\.js$/ )
6-
const tours = {}
11+
let tours = {}
712

813
// Import all tour files and populate the tours object using the filename as the key
914
tourContext.keys().forEach( fileName => {
@@ -30,5 +35,7 @@ tourContext.keys().forEach( fileName => {
3035
}
3136
} )
3237

38+
tours = applyFilters( 'stackable.guided-tour.tours', tours )
39+
3340
// Export all tours as a single object
3441
export { tours }

0 commit comments

Comments
 (0)