{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "b-blocks/infographic",
"version": "1.0.0",
"title": "Infographic Block",
"category": "bBlocks",
"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.",
"keywords": [
"infographic",
"circle",
"circular",
"segments",
"diagram",
"process",
"wheel"
],
"textdomain": "b-blocks",
"attributes": {
"blockId": {
"type": "string",
"default": ""
},
"general": {
"type": "object",
"default": {
"desktop": {
"alignment": "center"
},
"tablet": {
"alignment": ""
},
"mobile": {
"alignment": ""
},
"itemTriggerType": "click"
}
},
"defaults": {
"type": "object",
"default": {
"item": "Title 1",
"itemTitle": "Info Title",
"itemText": "Select any segment around the circle to reveal its details right here.",
"image": {
"id": null,
"url": "",
"alt": ""
}
}
},
"button": {
"type": "object",
"default": {
"showIcon": true,
"showText": true
}
},
"wheel": {
"type": "object",
"default": {
"startAngle": "0deg",
"direction": "clockwise",
"sweep": "360deg",
"radiusOffset": "0px",
"rotateLabels": false,
"enableSegmentsType": false,
"wedgeGap": "3deg"
}
},
"animation": {
"type": "object",
"default": {
"enable": false,
"trigger": "load",
"delay": "0ms",
"type": "spread",
"easing": "ease",
"speed": "500ms",
"stagger": "",
"order": "clockwise",
"rotate": false,
"rotateSpeed": "20s",
"rotateDirection": "clockwise",
"pauseOnHover": true,
"hoverMotion": "none",
"activePulse": false,
"contentType": "fade",
"contentSpeed": "300ms"
}
},
"elements": {
"type": "object",
"default": {
"title": true,
"divider": true,
"text": true,
"image": false
}
},
"items": {
"type": "array",
"default": [
{
"id": "bBlocksInfographic-item-1",
"enable": true,
"buttonLabel": "Title 1",
"position": "",
"buttonIcon": {
"type": "icon",
"icon": "",
"url": ""
},
"title": "Info Title 1",
"description": "Describe the first part of your process, service or story in a sentence or two.",
"image": {
"id": null,
"url": "",
"alt": ""
},
"imageHeight": "",
"imagePosition": "top",
"link": {
"url": "",
"target": false,
"nofollow": false,
"title": ""
},
"styles": {
"normal": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"hover": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"active": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
}
}
},
{
"id": "bBlocksInfographic-item-2",
"enable": true,
"buttonLabel": "Title 2",
"position": "",
"buttonIcon": {
"type": "icon",
"icon": "",
"url": ""
},
"title": "Info Title 2",
"description": "Describe the second part of your process, service or story in a sentence or two.",
"image": {
"id": null,
"url": "",
"alt": ""
},
"imageHeight": "",
"imagePosition": "top",
"link": {
"url": "",
"target": false,
"nofollow": false,
"title": ""
},
"styles": {
"normal": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"hover": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"active": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
}
}
},
{
"id": "bBlocksInfographic-item-3",
"enable": true,
"buttonLabel": "Title 3",
"position": "",
"buttonIcon": {
"type": "icon",
"icon": "",
"url": ""
},
"title": "Info Title 3",
"description": "Describe the third part of your process, service or story in a sentence or two.",
"image": {
"id": null,
"url": "",
"alt": ""
},
"imageHeight": "",
"imagePosition": "top",
"link": {
"url": "",
"target": false,
"nofollow": false,
"title": ""
},
"styles": {
"normal": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"hover": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"active": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
}
}
},
{
"id": "bBlocksInfographic-item-4",
"enable": true,
"buttonLabel": "Title 4",
"position": "",
"buttonIcon": {
"type": "icon",
"icon": "",
"url": ""
},
"title": "Info Title 4",
"description": "Describe the fourth part of your process, service or story in a sentence or two.",
"image": {
"id": null,
"url": "",
"alt": ""
},
"imageHeight": "",
"imagePosition": "top",
"link": {
"url": "",
"target": false,
"nofollow": false,
"title": ""
},
"styles": {
"normal": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"hover": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
},
"active": {
"color": {
"label": "",
"icon": "",
"title": "",
"divider": "",
"desc": ""
},
"background": {},
"border": {}
}
}
}
]
},
"icon": {
"type": "object",
"default": {
"view": "framed",
"shape": "circle",
"desktop": {
"size": "20px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"tablet": {
"size": "18px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"mobile": {
"size": "16px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"color": "",
"border": {
"normal": {},
"hover": {}
},
"transition": "300ms",
"background": {
"type": "solid",
"color": ""
},
"position": "top",
"plateColor": "rgba(255, 255, 255, 0.22)"
}
},
"segment": {
"type": "object",
"default": {
"normal": {
"background": {
"type": "solid",
"color": "#BFA83B"
},
"color": "#FFFFFF",
"border": {},
"shadow": []
},
"hover": {
"background": {},
"color": "",
"border": {},
"shadow": []
},
"active": {
"background": {},
"color": "",
"border": {},
"shadow": []
},
"desktop": {
"size": "118px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"tablet": {
"size": "96px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"mobile": {
"size": "76px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"spacing": "6px",
"margin": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"transition": "300ms",
"shape": "circle",
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"labelTypo": {
"fontSize": {
"desktop": 13,
"tablet": 12,
"mobile": 11
},
"fontWeight": "600"
}
}
},
"outerDisc": {
"type": "object",
"default": {
"desktop": {
"size": "560px",
"ringGap": "0px"
},
"tablet": {
"size": "460px",
"ringGap": "0px"
},
"mobile": {
"size": "330px",
"ringGap": "0px"
},
"background": {
"type": "solid",
"color": ""
},
"borderColor": "#7E57C2",
"borderWidth": "2px",
"borderStyle": "solid",
"transition": "300ms",
"shadow": {
"normal": [],
"hover": []
}
}
},
"innerDisc": {
"type": "object",
"default": {
"desktop": {
"size": "276px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"tablet": {
"size": "220px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"mobile": {
"size": "130px",
"padding": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
},
"background": {
"type": "solid",
"color": "#F2F0E4"
},
"borderColor": "#3F8F4B",
"borderWidth": "2px",
"borderStyle": "solid",
"contentWidth": "78%",
"contentGap": "10px",
"contentAlign": "center",
"transition": "300ms",
"shadow": {
"normal": [],
"hover": []
}
}
},
"content": {
"type": "object",
"default": {
"title": {
"color": "#1F2937",
"typo": {
"fontSize": {
"desktop": 34,
"tablet": 28,
"mobile": 22
},
"fontWeight": "700",
"lineHeight": "1.2"
},
"tag": "h3"
},
"text": {
"color": "#4B5563",
"typo": {
"fontSize": {
"desktop": 14,
"tablet": 13,
"mobile": 12
},
"lineHeight": "1.6"
}
},
"divider": {
"color": "#BFA83B",
"width": "60px",
"height": "3px",
"style": "solid"
},
"image": {
"desktop": {
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"width": "",
"height": "107px"
},
"tablet": {
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"width": "",
"height": ""
},
"mobile": {
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"width": "",
"height": ""
},
"fit": "cover"
}
}
},
"advanced": {
"type": "object",
"default": {
"dimension": {
"padding": {
"desktop": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"tablet": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"mobile": {
"top": "",
"right": "",
"bottom": "",
"left": ""
}
}
},
"transform": {
"normal": {
"rotate": {
"desktop": {
"z": "",
"y": "",
"x": ""
},
"tablet": {
"z": "",
"y": "",
"x": ""
},
"mobile": {
"z": "",
"y": "",
"x": ""
},
"threeDRotate": false
},
"offset": {
"desktop": {
"x": "",
"y": ""
},
"tablet": {
"x": "",
"y": ""
},
"mobile": {
"x": "",
"y": ""
}
},
"scale": {
"isProportion": true,
"desktop": {
"x": "",
"y": "",
"scale": ""
},
"tablet": {
"x": "",
"y": "",
"scale": ""
},
"mobile": {
"x": "",
"y": "",
"scale": ""
}
},
"skew": {
"desktop": {
"x": "",
"y": ""
},
"tablet": {
"x": "",
"y": ""
},
"mobile": {
"x": "",
"y": ""
}
},
"flipX": false,
"flipY": false
},
"hover": {
"rotate": {
"desktop": {
"z": "",
"y": "",
"x": ""
},
"tablet": {
"z": "",
"y": "",
"x": ""
},
"mobile": {
"z": "",
"y": "",
"x": ""
},
"threeDRotate": false
},
"offset": {
"desktop": {
"x": "",
"y": ""
},
"tablet": {
"x": "",
"y": ""
},
"mobile": {
"x": "",
"y": ""
}
},
"scale": {
"isProportion": true,
"desktop": {
"x": "",
"y": "",
"scale": ""
},
"tablet": {
"x": "",
"y": "",
"scale": ""
},
"mobile": {
"x": "",
"y": "",
"scale": ""
}
},
"skew": {
"desktop": {
"x": "",
"y": ""
},
"tablet": {
"x": "",
"y": ""
},
"mobile": {
"x": "",
"y": ""
}
},
"flipX": false,
"flipY": false
},
"transition": 200
},
"borderShadow": {
"normal": {
"radius": {
"top": "",
"right": "",
"bottom": "",
"left": ""
},
"shadow": [
{
"hOffset": "",
"vOffset": "",
"blur": "",
"spreed": "",
"color": "",
"isInset": false
}
]
}
},
"background": {
"normal": {
"type": "color",
"color": "",
"gradient": {
"type": "radial",
"radialType": "ellipse",
"colors": [
{
"color": "",
"position": "0"
},
{
"color": "",
"position": "80"
}
],
"centerPositions": {
"x": 50,
"y": 50
},
"angel": 90
},
"img": {
"url": "",
"desktop": {
"position": "center center",
"xPosition": 0,
"yPosition": 0,
"attachment": "",
"repeat": "no-repeat",
"size": "",
"customSize": "0px"
},
"tablet": {
"position": "center center",
"xPosition": 0,
"yPosition": 0,
"attachment": "",
"repeat": "no-repeat",
"size": "",
"customSize": "0px"
},
"mobile": {
"position": "center center",
"xPosition": 0,
"yPosition": 0,
"attachment": "",
"repeat": "no-repeat",
"size": "",
"customSize": "0px"
}
},
"video": {
"url": "",
"loop": false
},
"transition": 0.3
}
}
}
}
},
"supports": {
"align": [
"wide",
"full"
],
"html": false
},
"example": {
"attributes": {}
},
"editorScript": "file:../index.js",
"style": "file:./view.css",
"viewScript": "file:./view.js",
"render": "file:./render.php"
}