Extendify / 2.2.0

Extendify v2.2.0

extendify / src / HelpCenter / tours / style-editor.js

style-editor.js in Extendify 2.2.0, at src/HelpCenter/tours/style-editor.js

335 lines 8.3 KB

Raw Download Zip

1	import { __, isRTL } from '@wordpress/i18n';
2	import { waitUntilExists } from '@help-center/lib/tour-helpers';
3
4	const { isBlockTheme, themeSlug, adminUrl } = window.extSharedData;
5
6	export default {
7	id: 'style-editor-tour',
8	title: __('Style editor', 'extendify-local'),
9	settings: {
10	allowOverflow: false,
11	startFrom: [
12	adminUrl +
13	// TODO: This needs attention as it was sending me into an infinite frontend loop
14	`site-editor.php?canvas=edit&postType=wp_template&postId=${themeSlug}%2F%2Fhome`,
15	],
16	enabled: isBlockTheme ?? false,
17	},
18	onStart: () => {
19	// close modal if shown
20	document.querySelector('.components-modal__header > button')?.click();
21	},
22	steps: [
23	{
24	title: __('Style Editor', 'extendify-local'),
25	text: __(
26	'The style editor allows you to edit the styles, colors, and typographic elements of your site. To access the style editor, first open the Editor via Appearance > Editor.',
27	'extendify-local',
28	),
29	image: 'https://placehold.co/342x240',
30	attachTo: {
31	element: '.interface-pinned-items button:nth-child(2)',
32	offset: {
33	marginTop: 10,
34	marginLeft: -30,
35	},
36	position: {
37	x: isRTL() ? 'right' : 'left',
38	y: 'bottom',
39	},
40	hook: isRTL() ? 'top right' : 'top left',
41	},
42	events: {
43	beforeAttach: () => waitUntilExists('.interface-pinned-items'),
44	},
45	},
46	{
47	title: __('Styles Panel', 'extendify-local'),
48	text: __(
49	'The styles panel allows you to customize the appearance of your site. It includes style variations, colors, typography, and more.',
50	'extendify-local',
51	),
52	attachTo: {
53	element: '.edit-site-global-styles-sidebar',
54	offset: {
55	marginTop: 1,
56	marginLeft: -15,
57	},
58	position: {
59	x: isRTL() ? 'right' : 'left',
60	y: 'top',
61	},
62	hook: isRTL() ? 'top left' : 'top right',
63	},
64	events: {
65	beforeAttach: async () => {
66	document
67	.querySelector(
68	'.interface-pinned-items button:nth-child(2):not(.is-pressed)',
69	)
70	?.click();
71	return await waitUntilExists('.edit-site-global-styles-sidebar');
72	},
73	},
74	},
75	{
76	title: __('Style Variations', 'extendify-local'),
77	text: __(
78	'The Browse Styles button opens the style variations panel.',
79	'extendify-local',
80	),
81	attachTo: {
82	element: '.edit-site-global-styles-sidebar button[id="/variations"]',
83	offset: {
84	marginTop: 0,
85	marginLeft: -15,
86	},
87	position: {
88	x: isRTL() ? 'right' : 'left',
89	y: 'top',
90	},
91	hook: isRTL() ? 'top left' : 'top right',
92	},
93	events: {
94	beforeAttach: async () => {
95	// Press the back button if the next step opened the variations panel, and now we're going back.
96	document
97	.querySelector(
98	'.edit-site-global-styles-sidebar button.components-navigator-back-button',
99	)
100	?.click();
101	return await waitUntilExists(
102	'.edit-site-global-styles-preview__iframe',
103	);
104	},
105	},
106	},
107	{
108	title: __('Style Variations', 'extendify-local'),
109	text: __(
110	'Choose a style you like to preview how it will look on your site.',
111	'extendify-local',
112	),
113	attachTo: {
114	element: '.edit-site-global-styles-sidebar__navigator-screen',
115	offset: {
116	marginTop: 0,
117	marginLeft: -15,
118	},
119	position: {
120	x: isRTL() ? 'right' : 'left',
121	y: 'top',
122	},
123	hook: isRTL() ? 'top left' : 'top right',
124	},
125	events: {
126	beforeAttach: async () => {
127	document
128	.querySelector(
129	'.edit-site-global-styles-sidebar button[id="/variations"]',
130	)
131	?.click();
132	return await waitUntilExists(
133	'.edit-site-global-styles-header__description',
134	);
135	},
136	},
137	},
138	{
139	title: __('Typography', 'extendify-local'),
140	text: __(
141	'The Typography button opens the typography settings panel.',
142	'extendify-local',
143	),
144	attachTo: {
145	element: '.edit-site-global-styles-sidebar button[id="/typography"]',
146
147	offset: {
148	marginTop: 0,
149	marginLeft: -15,
150	},
151	position: {
152	x: isRTL() ? 'right' : 'left',
153	y: 'top',
154	},
155	hook: isRTL() ? 'top left' : 'top right',
156	},
157	events: {
158	beforeAttach: async () => {
159	// Press the back button if the next step opened the typography panel, and now we're going back.
160	document
161	.querySelector(
162	'.edit-site-global-styles-sidebar button.components-navigator-back-button',
163	)
164	?.click();
165	return await waitUntilExists(
166	'.edit-site-global-styles-preview__iframe',
167	);
168	},
169	},
170	},
171	{
172	title: __('Typography', 'extendify-local'),
173	text: __('Choose a typographic element to customize.', 'extendify-local'),
174	attachTo: {
175	element: '.edit-site-global-styles-sidebar__navigator-screen',
176	offset: {
177	marginTop: 0,
178	marginLeft: -15,
179	},
180	position: {
181	x: isRTL() ? 'right' : 'left',
182	y: 'top',
183	},
184	hook: isRTL() ? 'top left' : 'top right',
185	},
186	events: {
187	beforeAttach: async () => {
188	document
189	.querySelector(
190	'.edit-site-global-styles-sidebar button[id="/typography"]',
191	)
192	?.click();
193	return await waitUntilExists(
194	'.edit-site-global-styles-header__description',
195	);
196	},
197	},
198	},
199	{
200	title: __('Colors', 'extendify-local'),
201	text: __(
202	'The Colors button opens the color settings panel.',
203	'extendify-local',
204	),
205	attachTo: {
206	element: '.edit-site-global-styles-sidebar button[id="/colors"]',
207
208	offset: {
209	marginTop: 0,
210	marginLeft: -15,
211	},
212	position: {
213	x: isRTL() ? 'right' : 'left',
214	y: 'top',
215	},
216	hook: isRTL() ? 'top left' : 'top right',
217	},
218	events: {
219	beforeAttach: async () => {
220	// Press the back button if the next step opened the typography panel, and now we're going back.
221	document
222	.querySelector(
223	'.edit-site-global-styles-sidebar button.components-navigator-back-button',
224	)
225	?.click();
226	return await waitUntilExists(
227	'.edit-site-global-styles-preview__iframe',
228	);
229	},
230	},
231	},
232	{
233	title: __('Colors', 'extendify-local'),
234	text: __(
235	"Select the theme's palette or individual elements to customize their colors.",
236	'extendify-local',
237	),
238	attachTo: {
239	element: '.edit-site-global-styles-sidebar__navigator-screen',
240	offset: {
241	marginTop: 0,
242	marginLeft: -15,
243	},
244	position: {
245	x: isRTL() ? 'right' : 'left',
246	y: 'top',
247	},
248	hook: isRTL() ? 'top left' : 'top right',
249	},
250	events: {
251	beforeAttach: async () => {
252	document
253	.querySelector(
254	'.edit-site-global-styles-sidebar button[id="/colors"]',
255	)
256	?.click();
257	return await waitUntilExists(
258	'.edit-site-global-styles-header__description',
259	);
260	},
261	},
262	},
263	{
264	title: __('Layout', 'extendify-local'),
265	text: __(
266	'The Layout button opens the layout settings panel.',
267	'extendify-local',
268	),
269	attachTo: {
270	element: '.edit-site-global-styles-sidebar button[id="/layout"]',
271
272	offset: {
273	marginTop: 0,
274	marginLeft: -15,
275	},
276	position: {
277	x: isRTL() ? 'right' : 'left',
278	y: 'top',
279	},
280	hook: isRTL() ? 'top left' : 'top right',
281	},
282	events: {
283	beforeAttach: async () => {
284	// Press the back button if the next step opened the typography panel, and now we're going back.
285	document
286	.querySelector(
287	'.edit-site-global-styles-sidebar button.components-navigator-back-button',
288	)
289	?.click();
290	return await waitUntilExists(
291	'.edit-site-global-styles-preview__iframe',
292	);
293	},
294	},
295	},
296	{
297	title: __('Layout', 'extendify-local'),
298	text: __(
299	'From here you can customize the dimensions, padding, and margins used for your site layout.',
300	'extendify-local',
301	),
302	attachTo: {
303	element: '.edit-site-global-styles-sidebar__navigator-screen',
304	offset: {
305	marginTop: 0,
306	marginLeft: -15,
307	},
308	position: {
309	x: isRTL() ? 'right' : 'left',
310	y: 'top',
311	},
312	hook: isRTL() ? 'top left' : 'top right',
313	},
314	events: {
315	beforeAttach: async () => {
316	document
317	.querySelector(
318	'.edit-site-global-styles-sidebar button[id="/layout"]',
319	)
320	?.click();
321	return await waitUntilExists('.components-tools-panel');
322	},
323	},
324	},
325	],
326	onFinish: async () => {
327	document
328	.querySelector(
329	'.edit-site-global-styles-sidebar button.components-navigator-back-button',
330	)
331	?.click();
332	return await waitUntilExists('.edit-site-global-styles-preview__iframe');
333	},
334	};
335