Skip to content

Commit 96921bb

Browse files
author
bfintal@gmail.com
committed
fixed global color scheme tour
1 parent d90d55a commit 96921bb

3 files changed

Lines changed: 88 additions & 51 deletions

File tree

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

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const globalColorSchemes = {
8989
},
9090
{
9191
title: __( 'Default Color Scheme', i18n ),
92-
description: __( 'The default color scheme is the color scheme that is applied to your entire website by default.', i18n ),
92+
description: __( 'The default color scheme is the color scheme that is applied to all Stackable blocks across your entire website by default.', i18n ),
9393
help: createInterpolateElement( __( 'Click the <strong>Default Color Scheme</strong> button to continue.', i18n ), {
9494
strong: <strong />,
9595
} ),
@@ -104,23 +104,38 @@ export const globalColorSchemes = {
104104
{
105105
title: __( 'Setting the Default Color Scheme', i18n ),
106106
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 ),
107-
help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
107+
help: createInterpolateElement( __( '<strong>Warning: This will change the colors of all Stackable blocks across your entire website.</strong><br/><br/>Click this <strong>color scheme preset</strong> or <strong>next</strong> to continue.', i18n ), {
108108
strong: <strong />,
109+
br: <br />,
109110
} ),
110111
size: 'medium',
111112
anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
112113
position: 'left',
113114
nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
114115
glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
115-
postStep: () => {
116-
document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2) button' )?.click()
117-
},
116+
// postStep: () => {
117+
// document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2) button' )?.click()
118+
// },
118119
},
119120
{
120121
title: __( 'See the Stackable Blocks Change Colors', i18n ),
121122
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 ),
122123
offsetX: '300px',
123124
},
125+
{
126+
title: __( 'Refine Your Color Scheme', i18n ),
127+
description: __( 'You can further customize the colors below to match your brand or style.', i18n ),
128+
help: createInterpolateElement( __( 'Click the <strong>next</strong> button to continue.', i18n ), {
129+
strong: <strong />,
130+
} ),
131+
anchor: '.ugb-global-color-schemes__panel > .stk-color-scheme__heading-color',
132+
position: 'left',
133+
glowTarget: '.ugb-global-color-schemes__panel > .stk-color-scheme__heading-color',
134+
modalDelay: 350,
135+
preStep: () => {
136+
document.querySelector( '.stk-color-scheme__heading-color' )?.scrollIntoView( { behavior: 'smooth', block: 'center' } )
137+
},
138+
},
124139
{
125140
title: __( 'Go Back to Color Schemes', i18n ),
126141
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 ),
@@ -131,6 +146,10 @@ export const globalColorSchemes = {
131146
position: 'left',
132147
glowTarget: '.stk-inspector-sub-header button',
133148
nextEventTarget: '.stk-inspector-sub-header button',
149+
modalDelay: 350,
150+
preStep: () => {
151+
document.querySelector( '.stk-inspector-sub-header' )?.scrollIntoView( { behavior: 'smooth', block: 'center' } )
152+
},
134153
postStep: () => {
135154
document.querySelector( '.stk-inspector-sub-header button' )?.click()
136155
},
@@ -152,13 +171,13 @@ export const globalColorSchemes = {
152171
{
153172
title: __( 'Pick a Darker Background Color Scheme', i18n ),
154173
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 ),
155-
help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
174+
help: createInterpolateElement( __( '<strong>Warning: This will change the colors of all Stackable blocks across your entire website.</strong><br/><br/>Click this <strong>color scheme preset</strong> or <strong>next</strong> to continue.', i18n ), {
156175
strong: <strong />,
176+
br: <br />,
157177
} ),
158178
size: 'medium',
159179
anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
160180
position: 'left',
161-
nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
162181
glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
163182
modalDelay: 150,
164183
preStep: () => {
@@ -173,9 +192,6 @@ export const globalColorSchemes = {
173192
}
174193
}, 100 )
175194
},
176-
postStep: () => {
177-
document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8) button' )?.click()
178-
},
179195
},
180196
{
181197
title: __( 'Looking Good! Background Scheme Updated', i18n ),
@@ -184,7 +200,7 @@ export const globalColorSchemes = {
184200
},
185201
{
186202
title: __( 'Open the Inspector Sidebar', i18n ),
187-
description: __( 'Now let\'s open the Inspector sidebar so you can see where to further customize this color scheme.', i18n ),
203+
description: __( 'Now let\'s open the Inspector sidebar so we can see how Color Schemes can affect your workflow.', i18n ),
188204
help: createInterpolateElement( __( 'Click the <strong>Inspector Controls</strong> button to continue.', i18n ), {
189205
strong: <strong />,
190206
} ),
@@ -213,9 +229,24 @@ export const globalColorSchemes = {
213229
}
214230
},
215231
},
232+
{
233+
title: __( 'Color Schemes in Action', i18n ),
234+
description: __( 'Color Schemes help maintain consistency. With Block Background enabled, all the inner blocks adjust to have different colors applied automatically.', i18n ),
235+
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 ), {
236+
strong: <strong />,
237+
} ),
238+
anchor: '.ugb-block-background-panel .ugb-toggle-panel-form-toggle',
239+
position: 'left',
240+
glowTarget: '.ugb-block-background-panel .ugb-toggle-panel-form-toggle',
241+
nextEventTarget: '.ugb-block-background-panel .components-form-toggle__input',
242+
nextEvent: 'click',
243+
postStep: () => {
244+
document.querySelector( '.ugb-block-background-panel .components-form-toggle__input' )?.click()
245+
},
246+
},
216247
{
217248
title: __( 'Switch Between Color Schemes Anytime', i18n ),
218-
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 ),
249+
description: __( 'If you have multiple global color schemes set up, you can also easily change your block\'s style by switching the color scheme option here to instantly apply a new look.', i18n ),
219250
anchor: '.stk-control:has([data-attribute="backgroundColorScheme"])',
220251
position: 'left',
221252
glowTarget: '.stk-control:has([data-attribute="backgroundColorScheme"])',
@@ -229,3 +260,7 @@ export const globalColorSchemes = {
229260
},
230261
],
231262
}
263+
264+
// TODO: clicking on background colro scheme doesn't move the next
265+
// TODO: add a turn off block background to see the color scheme switch from background to the default color scheme
266+
// TODO: last step is you can pick a different color scheme if you have many

‎src/plugins/global-settings/color-schemes/color-scheme-picker.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const COLOR_SETTINGS = [ {
5555
hover: sprintf( __( 'Changing the %s is not allowed for %s state.', i18n ),
5656
__( 'Heading Color', i18n ), __( 'hover', i18n ) ),
5757
},
58+
className: 'stk-color-scheme__heading-color',
5859
}, {
5960
label: __( 'Text Color', i18n ),
6061
property: 'textColor',
@@ -549,6 +550,7 @@ const ColorSchemePicker = props => {
549550
enableGradient={ currentHoverState === 'normal' || settings.property === 'buttonBackgroundColor' }
550551
additionalToggleProps={ getToggleProps( settings ) }
551552
allowReset={ ! isDisabled( settings.property ) }
553+
className={ settings.className }
552554
/>
553555
) ) }
554556
</>

‎src/welcome/getting-started.js‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,45 @@ const QUICK_BUTTONS = [
166166
},
167167
],
168168
},
169+
{
170+
title: __( 'Responsive & Interactive Design', i18n ),
171+
description: __( 'Make your site look great and interactive on any device.', i18n ),
172+
items: [
173+
{
174+
id: 'responsive-controls',
175+
icon: desktopIcon,
176+
title: __( 'Responsive Controls', i18n ),
177+
description: __( 'Adjust styles for desktop, tablet, and mobile. Easily control layout, spacing, and appearance for a seamless experience on any device.', i18n ),
178+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=responsive-controls`,
179+
cta: __( 'Try Now', i18n ),
180+
},
181+
{
182+
id: 'hover-states',
183+
icon: <span className="s-custom-icon-wrapper"><SVGStateHoverIcon /></span>,
184+
title: __( 'Styling Hover States', i18n ),
185+
description: __( 'Adjust styles for different hover states to create engaging effects when users interact with your designs.', i18n ),
186+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=hover-states`,
187+
cta: __( 'Try Now', i18n ),
188+
},
189+
{
190+
id: 'advanced-hover-states',
191+
icon: <span className="s-custom-icon-wrapper"><SVGStateParentHoverIcon /></span>,
192+
title: __( 'Styling Hover States (Advanced)', i18n ),
193+
description: __( 'Learn how to style containers and their contents together by applying hover effects to multiple blocks at once.', i18n ),
194+
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=advanced-hover-states`,
195+
cta: __( 'Try Now', i18n ),
196+
},
197+
{
198+
id: 'motion-effects',
199+
icon: symbolIcon,
200+
title: __( 'Motion Effects', i18n ),
201+
description: __( 'Add animations and transitions to your blocks for a more engaging and interactive user experience.', i18n ),
202+
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=motion-effects` : '',
203+
cta: __( 'Try Now', i18n ),
204+
premium: true,
205+
},
206+
],
207+
},
169208
{
170209
title: __( 'Styling Sitewide', i18n ),
171210
description: __( 'Manage your brand\'s appearance and style across your whole website.', i18n ),
@@ -215,45 +254,6 @@ const QUICK_BUTTONS = [
215254
},
216255
],
217256
},
218-
{
219-
title: __( 'Responsive & Interactive Design', i18n ),
220-
description: __( 'Make your site look great and interactive on any device.', i18n ),
221-
items: [
222-
{
223-
id: 'responsive-controls',
224-
icon: desktopIcon,
225-
title: __( 'Responsive Controls', i18n ),
226-
description: __( 'Adjust styles for desktop, tablet, and mobile. Easily control layout, spacing, and appearance for a seamless experience on any device.', i18n ),
227-
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=responsive-controls`,
228-
cta: __( 'Try Now', i18n ),
229-
},
230-
{
231-
id: 'hover-states',
232-
icon: <span className="s-custom-icon-wrapper"><SVGStateHoverIcon /></span>,
233-
title: __( 'Styling Hover States', i18n ),
234-
description: __( 'Adjust styles for different hover states to create engaging effects when users interact with your designs.', i18n ),
235-
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=hover-states`,
236-
cta: __( 'Try Now', i18n ),
237-
},
238-
{
239-
id: 'advanced-hover-states',
240-
icon: <span className="s-custom-icon-wrapper"><SVGStateParentHoverIcon /></span>,
241-
title: __( 'Styling Hover States (Advanced)', i18n ),
242-
description: __( 'Learn how to style containers and their contents together by applying hover effects to multiple blocks at once.', i18n ),
243-
link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=advanced-hover-states`,
244-
cta: __( 'Try Now', i18n ),
245-
},
246-
{
247-
id: 'motion-effects',
248-
icon: symbolIcon,
249-
title: __( 'Motion Effects', i18n ),
250-
description: __( 'Add animations and transitions to your blocks for a more engaging and interactive user experience.', i18n ),
251-
link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=motion-effects` : '',
252-
cta: __( 'Try Now', i18n ),
253-
premium: true,
254-
},
255-
],
256-
},
257257
{
258258
title: __( 'Advanced Functionality', i18n ),
259259
description: __( 'Unlock more advanced features and controls for your site.', i18n ),

0 commit comments

Comments
 (0)