Skip to content

Commit 3080663

Browse files
kaeizenkaeizen
committed
add responsive controls
1 parent 1d4042c commit 3080663

File tree

3 files changed

+218
-2
lines changed

3 files changed

+218
-2
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,8 @@ export const TOUR_CONDITIONS = {
3131
// Force show the tour if there is a GET parameter tour=block-backgrounds
3232
return window?.location?.search?.includes( 'tour=block-backgrounds' ) ? true : null
3333
},
34+
'responsive-controls': () => {
35+
// Force show the tour if there is a GET parameter tour=responsive-controls
36+
return window?.location?.search?.includes( 'tour=responsive-controls' ) ? true : null
37+
},
3438
}

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
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 blocks = {
7+
initialize: () => {
8+
// Add some default content that we will select
9+
10+
const blockObject = wp.blocks.createBlock(
11+
'stackable/columns',
12+
{
13+
uniqueId: '1dbe04e',
14+
blockMargin: { bottom: '' },
15+
align: 'full',
16+
},
17+
[
18+
wp.blocks.createBlock(
19+
'stackable/column',
20+
{
21+
uniqueId: 'f957abc',
22+
hasContainer: true,
23+
columnSpacing: {
24+
top: '', right: '', bottom: '', left: '',
25+
},
26+
},
27+
[
28+
wp.blocks.createBlock(
29+
'stackable/heading',
30+
{
31+
uniqueId: 'a8ebea7',
32+
// Retain our text
33+
text: 'Explore the World with Us',
34+
textTag: 'h2',
35+
}
36+
),
37+
wp.blocks.createBlock(
38+
'stackable/text',
39+
{
40+
uniqueId: '57e76a1',
41+
// Retain our text
42+
text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
43+
}
44+
),
45+
]
46+
),
47+
wp.blocks.createBlock(
48+
'stackable/column',
49+
{
50+
uniqueId: '3dcffca',
51+
},
52+
[
53+
wp.blocks.createBlock(
54+
'stackable/image',
55+
{
56+
uniqueId: 'e063798',
57+
imageExternalUrl: 'https://picsum.photos/id/177/500/700.jpg',
58+
}
59+
),
60+
]
61+
),
62+
]
63+
)
64+
65+
// Delete all blocks
66+
// const allBlocks = select( 'core/block-editor' ).getBlocks()
67+
// dispatch( 'core/block-editor' ).removeBlocks( allBlocks.map( block => block.clientId ) )
68+
69+
// Insert our block
70+
dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
71+
72+
// Select the inner columns block for the tour
73+
dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
74+
},
75+
steps: [
76+
{
77+
title: __( 'Enable Responsive Controls', i18n ),
78+
description: createInterpolateElement(
79+
__( 'Click the <strong>responsive toggle</strong> beside <strong>Column Arrangement</strong> to open the device options.', i18n ),
80+
{ strong: <strong /> }
81+
),
82+
anchor: '.ugb-sort-control .stk-control-responsive-toggle',
83+
position: 'left',
84+
glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
85+
nextEventTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle button',
86+
preStep: () => {
87+
dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
88+
// Make sure the Columns block is selected
89+
const allBlocks = select( 'core/block-editor' ).getBlocks()
90+
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
91+
if ( columnsBlock ) {
92+
dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
93+
}
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 )
101+
},
102+
postStep: () => {
103+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
104+
},
105+
},
106+
{
107+
title: __( 'Switch to Mobile', i18n ),
108+
description: createInterpolateElement(
109+
__( 'Let\'s customize for mobile! Click the <strong>mobile button</strong> — this lets you change how your columns are arranged <strong>just for mobile screens</strong>.', i18n ),
110+
{ strong: <strong /> }
111+
),
112+
anchor: '.ugb-sort-control .stk-control-responsive-toggle',
113+
position: 'left',
114+
glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle .stk-label-unit-toggle__wrapper',
115+
nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle.is-open button[aria-label="Mobile"]',
116+
nextEvent: 'mousedown',
117+
preStep: () => {
118+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
119+
},
120+
postStep: () => {
121+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
122+
},
123+
},
124+
{
125+
title: __( 'Now Editing Mobile Layout', i18n ),
126+
description: createInterpolateElement(
127+
__( 'See how the editor preview changed size? The responsive toggle now shows a <strong>mobile icon</strong>, meaning you\'re adjusting <strong>only for mobile</strong>.', i18n ),
128+
{ strong: <strong /> }
129+
),
130+
anchor: '.ugb-sort-control .stk-control-responsive-toggle',
131+
position: 'left',
132+
glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
133+
preStep: () => {
134+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
135+
},
136+
},
137+
{
138+
title: __( 'Change Column Order for Mobile', i18n ),
139+
description: createInterpolateElement(
140+
__( 'On mobile, it usually looks better to show the <strong>image before the text</strong>. Drag the first column below the second to rearrange them for mobile devices.', i18n ),
141+
{ strong: <strong /> }
142+
),
143+
anchor: '.ugb-sort-control .stk-control-content',
144+
position: 'left',
145+
glowTarget: '.ugb-sort-control .stk-control-content .ugb-sort-control__container',
146+
postStep: () => {
147+
// Update the order of the columns for mobile by dispatching an attribute update.
148+
const allBlocks = wp.data.select( 'core/block-editor' ).getBlocks()
149+
const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
150+
if ( columnsBlock ) {
151+
// Reverse the order of columns for mobile by updating the mobileOrder attribute.
152+
// The default order is [0, 1]. Swapping makes it [1, 0].
153+
wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.clientId, {
154+
columnArrangementMobile: '2,1',
155+
} )
156+
}
157+
},
158+
},
159+
{
160+
title: __( 'Switching back to Desktop', i18n ),
161+
description: createInterpolateElement(
162+
__( 'Notice the arrangement now reflects <strong>your mobile order</strong>. If you want to switch back to desktop, click the responsive toggle and select the desktop icon.', i18n ),
163+
{ strong: <strong /> }
164+
),
165+
anchor: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
166+
position: 'left',
167+
glowTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
168+
nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
169+
nextEvent: 'mousedown',
170+
preStep: () => {
171+
document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
172+
},
173+
postStep: () => {
174+
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 )
178+
},
179+
},
180+
{
181+
title: __( 'Desktop Settings Are Preserved', i18n ),
182+
description: createInterpolateElement(
183+
__( "You're now back on the <strong>desktop</strong> view and your original column order has been preserved. Notice the responsive toggle is <strong>yellow</strong> — that means a custom layout for mobile has been saved!", i18n ),
184+
{ strong: <strong /> }
185+
),
186+
anchor: '.ugb-sort-control .stk-control-responsive-toggle',
187+
position: 'left',
188+
glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
189+
},
190+
{
191+
title: __( 'Tip: Preview Responsively!', i18n ),
192+
description: createInterpolateElement(
193+
__( 'You can use the <strong>preview button</strong> at the top of the editor to instantly see how your arrangement looks in desktop, tablet, and mobile. Try it out!', i18n ),
194+
{ strong: <strong /> }
195+
),
196+
anchor: '.editor-header__settings .editor-preview-dropdown',
197+
position: 'bottom',
198+
glowTarget: '.editor-header__settings .editor-preview-dropdown',
199+
},
200+
],
201+
}

‎src/plugins/guided-modal-tour/editor-block-tour.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11

22
import { registerPlugin } from '@wordpress/plugins'
3+
import { useEffect, useState } from '@wordpress/element'
34
import { GuidedModalTour } from '~stackable/components'
45

56
const EditorBlockTour = () => {
7+
const [ tourId, setTourId ] = useState( 'blocks' )
8+
useEffect( () => {
9+
// Check the GET parameter for the tour ID.
10+
const params = new URLSearchParams( window?.location?.search || '' )
11+
const _tourId = params.get( 'tour' )
12+
13+
if ( _tourId !== 'blocks' ) {
14+
setTourId( _tourId )
15+
}
16+
}, [] )
17+
618
return <>
7-
<GuidedModalTour tourId="blocks" />
8-
<GuidedModalTour tourId="block-backgrounds" />
19+
<GuidedModalTour tourId={ tourId } />
920
</>
1021
}
1122

0 commit comments

Comments
 (0)