b-blocks / build / infographic / block.json

block.json in bBlocks – Essential Gutenberg Blocks & Patterns Collection 2.1.7, at build/infographic/block.json

895 lines 22.0 KB

Raw Download Zip

1	{
2	"$schema": "https://schemas.wp.org/trunk/block.json",
3	"apiVersion": 3,
4	"name": "b-blocks/infographic",
5	"version": "1.0.0",
6	"title": "Infographic Block",
7	"category": "bBlocks",
8	"description": "Build a circular infographic. Segment circles sit evenly around two decorative rings and reveal their title, divider, text and image inside the center disc on click or hover.",
9	"keywords": [
10	"infographic",
11	"circle",
12	"circular",
13	"segments",
14	"diagram",
15	"process",
16	"wheel"
17	],
18	"textdomain": "b-blocks",
19	"attributes": {
20	"blockId": {
21	"type": "string",
22	"default": ""
23	},
24	"general": {
25	"type": "object",
26	"default": {
27	"desktop": {
28	"alignment": "center"
29	},
30	"tablet": {
31	"alignment": ""
32	},
33	"mobile": {
34	"alignment": ""
35	},
36	"itemTriggerType": "click"
37	}
38	},
39	"defaults": {
40	"type": "object",
41	"default": {
42	"item": "Title 1",
43	"itemTitle": "Info Title",
44	"itemText": "Select any segment around the circle to reveal its details right here.",
45	"image": {
46	"id": null,
47	"url": "",
48	"alt": ""
49	}
50	}
51	},
52	"button": {
53	"type": "object",
54	"default": {
55	"showIcon": true,
56	"showText": true
57	}
58	},
59	"wheel": {
60	"type": "object",
61	"default": {
62	"startAngle": "0deg",
63	"direction": "clockwise",
64	"sweep": "360deg",
65	"radiusOffset": "0px",
66	"rotateLabels": false,
67	"enableSegmentsType": false,
68	"wedgeGap": "3deg"
69	}
70	},
71	"animation": {
72	"type": "object",
73	"default": {
74	"enable": false,
75	"trigger": "load",
76	"delay": "0ms",
77	"type": "spread",
78	"easing": "ease",
79	"speed": "500ms",
80	"stagger": "",
81	"order": "clockwise",
82	"rotate": false,
83	"rotateSpeed": "20s",
84	"rotateDirection": "clockwise",
85	"pauseOnHover": true,
86	"hoverMotion": "none",
87	"activePulse": false,
88	"contentType": "fade",
89	"contentSpeed": "300ms"
90	}
91	},
92	"elements": {
93	"type": "object",
94	"default": {
95	"title": true,
96	"divider": true,
97	"text": true,
98	"image": false
99	}
100	},
101	"items": {
102	"type": "array",
103	"default": [
104	{
105	"id": "bBlocksInfographic-item-1",
106	"enable": true,
107	"buttonLabel": "Title 1",
108	"position": "",
109	"buttonIcon": {
110	"type": "icon",
111	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120v136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/></svg>",
112	"url": ""
113	},
114	"title": "Info Title 1",
115	"description": "Describe the first part of your process, service or story in a sentence or two.",
116	"image": {
117	"id": null,
118	"url": "",
119	"alt": ""
120	},
121	"imageHeight": "",
122	"imagePosition": "top",
123	"link": {
124	"url": "",
125	"target": false,
126	"nofollow": false,
127	"title": ""
128	},
129	"styles": {
130	"normal": {
131	"color": {
132	"label": "",
133	"icon": "",
134	"title": "",
135	"divider": "",
136	"desc": ""
137	},
138	"background": {},
139	"border": {}
140	},
141	"hover": {
142	"color": {
143	"label": "",
144	"icon": "",
145	"title": "",
146	"divider": "",
147	"desc": ""
148	},
149	"background": {},
150	"border": {}
151	},
152	"active": {
153	"color": {
154	"label": "",
155	"icon": "",
156	"title": "",
157	"divider": "",
158	"desc": ""
159	},
160	"background": {},
161	"border": {}
162	}
163	}
164	},
165	{
166	"id": "bBlocksInfographic-item-2",
167	"enable": true,
168	"buttonLabel": "Title 2",
169	"position": "",
170	"buttonIcon": {
171	"type": "icon",
172	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/></svg>",
173	"url": ""
174	},
175	"title": "Info Title 2",
176	"description": "Describe the second part of your process, service or story in a sentence or two.",
177	"image": {
178	"id": null,
179	"url": "",
180	"alt": ""
181	},
182	"imageHeight": "",
183	"imagePosition": "top",
184	"link": {
185	"url": "",
186	"target": false,
187	"nofollow": false,
188	"title": ""
189	},
190	"styles": {
191	"normal": {
192	"color": {
193	"label": "",
194	"icon": "",
195	"title": "",
196	"divider": "",
197	"desc": ""
198	},
199	"background": {},
200	"border": {}
201	},
202	"hover": {
203	"color": {
204	"label": "",
205	"icon": "",
206	"title": "",
207	"divider": "",
208	"desc": ""
209	},
210	"background": {},
211	"border": {}
212	},
213	"active": {
214	"color": {
215	"label": "",
216	"icon": "",
217	"title": "",
218	"divider": "",
219	"desc": ""
220	},
221	"background": {},
222	"border": {}
223	}
224	}
225	},
226	{
227	"id": "bBlocksInfographic-item-3",
228	"enable": true,
229	"buttonLabel": "Title 3",
230	"position": "",
231	"buttonIcon": {
232	"type": "icon",
233	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM169.8 165.3c-7.9 22.3 3.7 46.8 26 54.6l9.9 3.5c11.1 3.9 18.5 14.4 18.5 26.2s-7.4 22.3-18.5 26.2l-9.9 3.5c-22.3 7.9-33.9 32.3-26 54.6s32.3 33.9 54.6 26l9.9-3.5c11.1-3.9 23.4-.6 31.1 8.3l6.8 7.9c15.4 17.9 42.5 19.9 60.4 4.5s19.9-42.5 4.5-60.4l-6.8-7.9c-7.7-8.9-9.4-21.6-4.2-32.2l4.6-9.4c10.4-21.2 1.6-46.8-19.6-57.2s-46.8-1.6-57.2 19.6l-4.6 9.4c-5.2 10.6-16 17.3-27.8 17.3H209.6c-16.4 0-31-10.4-36.4-25.9l-3.4-9.1z'/></svg>",
234	"url": ""
235	},
236	"title": "Info Title 3",
237	"description": "Describe the third part of your process, service or story in a sentence or two.",
238	"image": {
239	"id": null,
240	"url": "",
241	"alt": ""
242	},
243	"imageHeight": "",
244	"imagePosition": "top",
245	"link": {
246	"url": "",
247	"target": false,
248	"nofollow": false,
249	"title": ""
250	},
251	"styles": {
252	"normal": {
253	"color": {
254	"label": "",
255	"icon": "",
256	"title": "",
257	"divider": "",
258	"desc": ""
259	},
260	"background": {},
261	"border": {}
262	},
263	"hover": {
264	"color": {
265	"label": "",
266	"icon": "",
267	"title": "",
268	"divider": "",
269	"desc": ""
270	},
271	"background": {},
272	"border": {}
273	},
274	"active": {
275	"color": {
276	"label": "",
277	"icon": "",
278	"title": "",
279	"divider": "",
280	"desc": ""
281	},
282	"background": {},
283	"border": {}
284	}
285	}
286	},
287	{
288	"id": "bBlocksInfographic-item-4",
289	"enable": true,
290	"buttonLabel": "Title 4",
291	"position": "",
292	"buttonIcon": {
293	"type": "icon",
294	"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm-24-136V232c0-13.3 10.7-24 24-24s24 10.7 24 24v144c0 13.3-10.7 24-24 24s-24-10.7-24-24zm24-224a32 32 0 1 1 0-64 32 32 0 1 1 0 64z'/></svg>",
295	"url": ""
296	},
297	"title": "Info Title 4",
298	"description": "Describe the fourth part of your process, service or story in a sentence or two.",
299	"image": {
300	"id": null,
301	"url": "",
302	"alt": ""
303	},
304	"imageHeight": "",
305	"imagePosition": "top",
306	"link": {
307	"url": "",
308	"target": false,
309	"nofollow": false,
310	"title": ""
311	},
312	"styles": {
313	"normal": {
314	"color": {
315	"label": "",
316	"icon": "",
317	"title": "",
318	"divider": "",
319	"desc": ""
320	},
321	"background": {},
322	"border": {}
323	},
324	"hover": {
325	"color": {
326	"label": "",
327	"icon": "",
328	"title": "",
329	"divider": "",
330	"desc": ""
331	},
332	"background": {},
333	"border": {}
334	},
335	"active": {
336	"color": {
337	"label": "",
338	"icon": "",
339	"title": "",
340	"divider": "",
341	"desc": ""
342	},
343	"background": {},
344	"border": {}
345	}
346	}
347	}
348	]
349	},
350	"icon": {
351	"type": "object",
352	"default": {
353	"view": "framed",
354	"shape": "circle",
355	"desktop": {
356	"size": "20px",
357	"padding": {
358	"top": "",
359	"right": "",
360	"bottom": "",
361	"left": ""
362	},
363	"radius": {
364	"top": "",
365	"right": "",
366	"bottom": "",
367	"left": ""
368	}
369	},
370	"tablet": {
371	"size": "18px",
372	"padding": {
373	"top": "",
374	"right": "",
375	"bottom": "",
376	"left": ""
377	},
378	"radius": {
379	"top": "",
380	"right": "",
381	"bottom": "",
382	"left": ""
383	}
384	},
385	"mobile": {
386	"size": "16px",
387	"padding": {
388	"top": "",
389	"right": "",
390	"bottom": "",
391	"left": ""
392	},
393	"radius": {
394	"top": "",
395	"right": "",
396	"bottom": "",
397	"left": ""
398	}
399	},
400	"color": "",
401	"border": {
402	"normal": {},
403	"hover": {}
404	},
405	"transition": "300ms",
406	"background": {
407	"type": "solid",
408	"color": ""
409	},
410	"position": "top",
411	"plateColor": "rgba(255, 255, 255, 0.22)"
412	}
413	},
414	"segment": {
415	"type": "object",
416	"default": {
417	"normal": {
418	"background": {
419	"type": "solid",
420	"color": "#BFA83B"
421	},
422	"color": "#FFFFFF",
423	"border": {},
424	"shadow": []
425	},
426	"hover": {
427	"background": {},
428	"color": "",
429	"border": {},
430	"shadow": []
431	},
432	"active": {
433	"background": {},
434	"color": "",
435	"border": {},
436	"shadow": []
437	},
438	"desktop": {
439	"size": "118px",
440	"padding": {
441	"top": "",
442	"right": "",
443	"bottom": "",
444	"left": ""
445	}
446	},
447	"tablet": {
448	"size": "96px",
449	"padding": {
450	"top": "",
451	"right": "",
452	"bottom": "",
453	"left": ""
454	}
455	},
456	"mobile": {
457	"size": "76px",
458	"padding": {
459	"top": "",
460	"right": "",
461	"bottom": "",
462	"left": ""
463	}
464	},
465	"spacing": "6px",
466	"margin": {
467	"top": "",
468	"right": "",
469	"bottom": "",
470	"left": ""
471	},
472	"transition": "300ms",
473	"shape": "circle",
474	"radius": {
475	"top": "",
476	"right": "",
477	"bottom": "",
478	"left": ""
479	},
480	"labelTypo": {
481	"fontSize": {
482	"desktop": 13,
483	"tablet": 12,
484	"mobile": 11
485	},
486	"fontWeight": "600"
487	}
488	}
489	},
490	"outerDisc": {
491	"type": "object",
492	"default": {
493	"desktop": {
494	"size": "560px",
495	"ringGap": "0px"
496	},
497	"tablet": {
498	"size": "460px",
499	"ringGap": "0px"
500	},
501	"mobile": {
502	"size": "330px",
503	"ringGap": "0px"
504	},
505	"background": {
506	"type": "solid",
507	"color": ""
508	},
509	"borderColor": "#7E57C2",
510	"borderWidth": "2px",
511	"borderStyle": "solid",
512	"transition": "300ms",
513	"shadow": {
514	"normal": [],
515	"hover": []
516	}
517	}
518	},
519	"innerDisc": {
520	"type": "object",
521	"default": {
522	"desktop": {
523	"size": "276px",
524	"padding": {
525	"top": "",
526	"right": "",
527	"bottom": "",
528	"left": ""
529	}
530	},
531	"tablet": {
532	"size": "220px",
533	"padding": {
534	"top": "",
535	"right": "",
536	"bottom": "",
537	"left": ""
538	}
539	},
540	"mobile": {
541	"size": "130px",
542	"padding": {
543	"top": "",
544	"right": "",
545	"bottom": "",
546	"left": ""
547	}
548	},
549	"background": {
550	"type": "solid",
551	"color": "#F2F0E4"
552	},
553	"borderColor": "#3F8F4B",
554	"borderWidth": "2px",
555	"borderStyle": "solid",
556	"contentWidth": "78%",
557	"contentGap": "10px",
558	"contentAlign": "center",
559	"transition": "300ms",
560	"shadow": {
561	"normal": [],
562	"hover": []
563	}
564	}
565	},
566	"content": {
567	"type": "object",
568	"default": {
569	"title": {
570	"color": "#1F2937",
571	"typo": {
572	"fontSize": {
573	"desktop": 34,
574	"tablet": 28,
575	"mobile": 22
576	},
577	"fontWeight": "700",
578	"lineHeight": "1.2"
579	},
580	"tag": "h3"
581	},
582	"text": {
583	"color": "#4B5563",
584	"typo": {
585	"fontSize": {
586	"desktop": 14,
587	"tablet": 13,
588	"mobile": 12
589	},
590	"lineHeight": "1.6"
591	}
592	},
593	"divider": {
594	"color": "#BFA83B",
595	"width": "60px",
596	"height": "3px",
597	"style": "solid"
598	},
599	"image": {
600	"desktop": {
601	"radius": {
602	"top": "",
603	"right": "",
604	"bottom": "",
605	"left": ""
606	},
607	"width": "",
608	"height": "107px"
609	},
610	"tablet": {
611	"radius": {
612	"top": "",
613	"right": "",
614	"bottom": "",
615	"left": ""
616	},
617	"width": "",
618	"height": ""
619	},
620	"mobile": {
621	"radius": {
622	"top": "",
623	"right": "",
624	"bottom": "",
625	"left": ""
626	},
627	"width": "",
628	"height": ""
629	},
630	"fit": "cover"
631	}
632	}
633	},
634	"advanced": {
635	"type": "object",
636	"default": {
637	"dimension": {
638	"padding": {
639	"desktop": {
640	"top": "",
641	"right": "",
642	"bottom": "",
643	"left": ""
644	},
645	"tablet": {
646	"top": "",
647	"right": "",
648	"bottom": "",
649	"left": ""
650	},
651	"mobile": {
652	"top": "",
653	"right": "",
654	"bottom": "",
655	"left": ""
656	}
657	}
658	},
659	"transform": {
660	"normal": {
661	"rotate": {
662	"desktop": {
663	"z": "",
664	"y": "",
665	"x": ""
666	},
667	"tablet": {
668	"z": "",
669	"y": "",
670	"x": ""
671	},
672	"mobile": {
673	"z": "",
674	"y": "",
675	"x": ""
676	},
677	"threeDRotate": false
678	},
679	"offset": {
680	"desktop": {
681	"x": "",
682	"y": ""
683	},
684	"tablet": {
685	"x": "",
686	"y": ""
687	},
688	"mobile": {
689	"x": "",
690	"y": ""
691	}
692	},
693	"scale": {
694	"isProportion": true,
695	"desktop": {
696	"x": "",
697	"y": "",
698	"scale": ""
699	},
700	"tablet": {
701	"x": "",
702	"y": "",
703	"scale": ""
704	},
705	"mobile": {
706	"x": "",
707	"y": "",
708	"scale": ""
709	}
710	},
711	"skew": {
712	"desktop": {
713	"x": "",
714	"y": ""
715	},
716	"tablet": {
717	"x": "",
718	"y": ""
719	},
720	"mobile": {
721	"x": "",
722	"y": ""
723	}
724	},
725	"flipX": false,
726	"flipY": false
727	},
728	"hover": {
729	"rotate": {
730	"desktop": {
731	"z": "",
732	"y": "",
733	"x": ""
734	},
735	"tablet": {
736	"z": "",
737	"y": "",
738	"x": ""
739	},
740	"mobile": {
741	"z": "",
742	"y": "",
743	"x": ""
744	},
745	"threeDRotate": false
746	},
747	"offset": {
748	"desktop": {
749	"x": "",
750	"y": ""
751	},
752	"tablet": {
753	"x": "",
754	"y": ""
755	},
756	"mobile": {
757	"x": "",
758	"y": ""
759	}
760	},
761	"scale": {
762	"isProportion": true,
763	"desktop": {
764	"x": "",
765	"y": "",
766	"scale": ""
767	},
768	"tablet": {
769	"x": "",
770	"y": "",
771	"scale": ""
772	},
773	"mobile": {
774	"x": "",
775	"y": "",
776	"scale": ""
777	}
778	},
779	"skew": {
780	"desktop": {
781	"x": "",
782	"y": ""
783	},
784	"tablet": {
785	"x": "",
786	"y": ""
787	},
788	"mobile": {
789	"x": "",
790	"y": ""
791	}
792	},
793	"flipX": false,
794	"flipY": false
795	},
796	"transition": 200
797	},
798	"borderShadow": {
799	"normal": {
800	"radius": {
801	"top": "",
802	"right": "",
803	"bottom": "",
804	"left": ""
805	},
806	"shadow": [
807	{
808	"hOffset": "",
809	"vOffset": "",
810	"blur": "",
811	"spreed": "",
812	"color": "",
813	"isInset": false
814	}
815	]
816	}
817	},
818	"background": {
819	"normal": {
820	"type": "color",
821	"color": "",
822	"gradient": {
823	"type": "radial",
824	"radialType": "ellipse",
825	"colors": [
826	{
827	"color": "",
828	"position": "0"
829	},
830	{
831	"color": "",
832	"position": "80"
833	}
834	],
835	"centerPositions": {
836	"x": 50,
837	"y": 50
838	},
839	"angel": 90
840	},
841	"img": {
842	"url": "",
843	"desktop": {
844	"position": "center center",
845	"xPosition": 0,
846	"yPosition": 0,
847	"attachment": "",
848	"repeat": "no-repeat",
849	"size": "",
850	"customSize": "0px"
851	},
852	"tablet": {
853	"position": "center center",
854	"xPosition": 0,
855	"yPosition": 0,
856	"attachment": "",
857	"repeat": "no-repeat",
858	"size": "",
859	"customSize": "0px"
860	},
861	"mobile": {
862	"position": "center center",
863	"xPosition": 0,
864	"yPosition": 0,
865	"attachment": "",
866	"repeat": "no-repeat",
867	"size": "",
868	"customSize": "0px"
869	}
870	},
871	"video": {
872	"url": "",
873	"loop": false
874	},
875	"transition": 0.3
876	}
877	}
878	}
879	}
880	},
881	"supports": {
882	"align": [
883	"wide",
884	"full"
885	],
886	"html": false
887	},
888	"example": {
889	"attributes": {}
890	},
891	"editorScript": "file:../index.js",
892	"style": "file:./view.css",
893	"viewScript": "file:./view.js",
894	"render": "file:./render.php"
895	}