b-blocks / build / process-steps / block.json

block.json in bBlocks – Essential Gutenberg Blocks & Patterns Collection trunk, at build/process-steps/block.json

401 lines 10.5 KB

Raw Download Zip

1	{
2	"$schema": "https://schemas.wp.org/trunk/block.json",
3	"apiVersion": 3,
4	"name": "b-blocks/process-steps",
5	"title": "Process Steps",
6	"category": "bBlocks",
7	"description": "Build a numbered \"How it works\" section. Drop in 3–6 steps with title, description, icon or number badge, and a connector line. Horizontal or vertical layout, fully responsive, accessible <ol> semantics.",
8	"keywords": [
9	"process",
10	"steps",
11	"how it works",
12	"how we work",
13	"numbered",
14	"timeline",
15	"workflow"
16	],
17	"textdomain": "b-blocks",
18	"attributes": {
19	"layout": {
20	"type": "object",
21	"default": {
22	"type": "horizontal",
23	"theme": "classic",
24	"alignment": "center",
25	"columnCount": {
26	"desktop": 3,
27	"tablet": 2,
28	"mobile": 1
29	},
30	"gap": {
31	"desktop": "32px",
32	"tablet": "24px",
33	"mobile": "16px"
34	}
35	}
36	},
37	"steps": {
38	"type": "array",
39	"default": [
40	{
41	"_key": "ps-default-1",
42	"title": "Discovery",
43	"description": "We learn about your goals and challenges.",
44	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/></svg>"
45	},
46	{
47	"_key": "ps-default-2",
48	"title": "Strategy",
49	"description": "We craft a tailored plan to meet your needs.",
50	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/></svg>"
51	},
52	{
53	"_key": "ps-default-3",
54	"title": "Delivery",
55	"description": "We execute and iterate until you are thrilled.",
56	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/></svg>"
57	}
58	]
59	},
60	"connector": {
61	"type": "object",
62	"default": {
63	"show": true,
64	"color": "#CBD5E1",
65	"width": "2px",
66	"style": "solid"
67	}
68	},
69	"badge": {
70	"type": "object",
71	"default": {
72	"type": "number",
73	"size": "56px",
74	"bg": {
75	"color": "#2563EB"
76	},
77	"color": "#FFFFFF",
78	"typo": {
79	"fontSize": {
80	"desktop": "20px",
81	"tablet": null,
82	"mobile": null
83	}
84	},
85	"border": {},
86	"borderRadius": {
87	"top": "50%",
88	"bottom": "50%",
89	"left": "50%",
90	"right": "50%"
91	},
92	"shadow": []
93	}
94	},
95	"content": {
96	"type": "object",
97	"default": {
98	"titleTag": "h3",
99	"titleColor": "",
100	"typo": {
101	"fontSize": {
102	"desktop": "18px",
103	"tablet": null,
104	"mobile": null
105	}
106	},
107	"descColor": "",
108	"descTypo": {
109	"fontSize": {
110	"desktop": "15px",
111	"tablet": null,
112	"mobile": null
113	}
114	}
115	}
116	},
117	"card": {
118	"type": "object",
119	"default": {
120	"bg": {
121	"color": ""
122	},
123	"padding": {
124	"top": "16px",
125	"right": "16px",
126	"bottom": "16px",
127	"left": "16px"
128	},
129	"border": {},
130	"borderRadius": {
131	"top": "8px",
132	"right": "8px",
133	"bottom": "8px",
134	"left": "8px"
135	}
136	}
137	},
138	"advanced": {
139	"type": "object",
140	"default": {
141	"dimension": {
142	"padding": {
143	"desktop": {
144	"top": "",
145	"right": "",
146	"bottom": "",
147	"left": ""
148	},
149	"tablet": {
150	"top": "",
151	"right": "",
152	"bottom": "",
153	"left": ""
154	},
155	"mobile": {
156	"top": "",
157	"right": "",
158	"bottom": "",
159	"left": ""
160	}
161	}
162	},
163	"transform": {
164	"normal": {
165	"rotate": {
166	"desktop": {
167	"z": "",
168	"y": "",
169	"x": ""
170	},
171	"tablet": {
172	"z": "",
173	"y": "",
174	"x": ""
175	},
176	"mobile": {
177	"z": "",
178	"y": "",
179	"x": ""
180	},
181	"threeDRotate": false
182	},
183	"offset": {
184	"desktop": {
185	"x": "",
186	"y": ""
187	},
188	"tablet": {
189	"x": "",
190	"y": ""
191	},
192	"mobile": {
193	"x": "",
194	"y": ""
195	}
196	},
197	"scale": {
198	"isProportion": true,
199	"desktop": {
200	"x": "",
201	"y": "",
202	"scale": ""
203	},
204	"tablet": {
205	"x": "",
206	"y": "",
207	"scale": ""
208	},
209	"mobile": {
210	"x": "",
211	"y": "",
212	"scale": ""
213	}
214	},
215	"skew": {
216	"desktop": {
217	"x": "",
218	"y": ""
219	},
220	"tablet": {
221	"x": "",
222	"y": ""
223	},
224	"mobile": {
225	"x": "",
226	"y": ""
227	}
228	},
229	"flipX": false,
230	"flipY": false
231	},
232	"hover": {
233	"rotate": {
234	"desktop": {
235	"z": "",
236	"y": "",
237	"x": ""
238	},
239	"tablet": {
240	"z": "",
241	"y": "",
242	"x": ""
243	},
244	"mobile": {
245	"z": "",
246	"y": "",
247	"x": ""
248	},
249	"threeDRotate": false
250	},
251	"offset": {
252	"desktop": {
253	"x": "",
254	"y": ""
255	},
256	"tablet": {
257	"x": "",
258	"y": ""
259	},
260	"mobile": {
261	"x": "",
262	"y": ""
263	}
264	},
265	"scale": {
266	"isProportion": true,
267	"desktop": {
268	"x": "",
269	"y": "",
270	"scale": ""
271	},
272	"tablet": {
273	"x": "",
274	"y": "",
275	"scale": ""
276	},
277	"mobile": {
278	"x": "",
279	"y": "",
280	"scale": ""
281	}
282	},
283	"skew": {
284	"desktop": {
285	"x": "",
286	"y": ""
287	},
288	"tablet": {
289	"x": "",
290	"y": ""
291	},
292	"mobile": {
293	"x": "",
294	"y": ""
295	}
296	},
297	"flipX": false,
298	"flipY": false
299	},
300	"transition": 200
301	},
302	"borderShadow": {
303	"normal": {
304	"radius": {
305	"top": "",
306	"right": "",
307	"bottom": "",
308	"left": ""
309	},
310	"shadow": [
311	{
312	"hOffset": "",
313	"vOffset": "",
314	"blur": "",
315	"spreed": "",
316	"color": "",
317	"isInset": false
318	}
319	]
320	}
321	},
322	"background": {
323	"normal": {
324	"type": "color",
325	"color": "",
326	"gradient": {
327	"type": "radial",
328	"radialType": "ellipse",
329	"colors": [
330	{
331	"color": "",
332	"position": "0"
333	},
334	{
335	"color": "",
336	"position": "80"
337	}
338	],
339	"centerPositions": {
340	"x": 50,
341	"y": 50
342	},
343	"angel": 90
344	},
345	"img": {
346	"url": "",
347	"desktop": {
348	"position": "center center",
349	"xPosition": 0,
350	"yPosition": 0,
351	"attachment": "",
352	"repeat": "no-repeat",
353	"size": "",
354	"customSize": "0px"
355	},
356	"tablet": {
357	"position": "center center",
358	"xPosition": 0,
359	"yPosition": 0,
360	"attachment": "",
361	"repeat": "no-repeat",
362	"size": "",
363	"customSize": "0px"
364	},
365	"mobile": {
366	"position": "center center",
367	"xPosition": 0,
368	"yPosition": 0,
369	"attachment": "",
370	"repeat": "no-repeat",
371	"size": "",
372	"customSize": "0px"
373	}
374	},
375	"video": {
376	"url": "",
377	"loop": false
378	},
379	"transition": 0.3
380	}
381	}
382	}
383	}
384	},
385	"supports": {
386	"align": [
387	"wide",
388	"full"
389	],
390	"html": false
391	},
392	"example": {
393	"attributes": {
394	"preview": true
395	}
396	},
397	"editorScript": "file:../index.js",
398	"style": "file:./view.css",
399	"viewScript": "file:./view.js",
400	"render": "file:./render.php"
401	}