{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "b-blocks/process-steps",
  "title": "Process Steps",
  "category": "bBlocks",
  "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.",
  "keywords": [
    "process",
    "steps",
    "how it works",
    "how we work",
    "numbered",
    "timeline",
    "workflow"
  ],
  "textdomain": "b-blocks",
  "attributes": {
    "layout": {
      "type": "object",
      "default": {
        "type": "horizontal",
        "theme": "classic",
        "alignment": "center",
        "columnCount": {
          "desktop": 3,
          "tablet": 2,
          "mobile": 1
        },
        "gap": {
          "desktop": "32px",
          "tablet": "24px",
          "mobile": "16px"
        }
      }
    },
    "steps": {
      "type": "array",
      "default": [
        {
          "_key": "ps-default-1",
          "title": "Discovery",
          "description": "We learn about your goals and challenges.",
          "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>"
        },
        {
          "_key": "ps-default-2",
          "title": "Strategy",
          "description": "We craft a tailored plan to meet your needs.",
          "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>"
        },
        {
          "_key": "ps-default-3",
          "title": "Delivery",
          "description": "We execute and iterate until you are thrilled.",
          "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>"
        }
      ]
    },
    "connector": {
      "type": "object",
      "default": {
        "show": true,
        "color": "#CBD5E1",
        "width": "2px",
        "style": "solid"
      }
    },
    "badge": {
      "type": "object",
      "default": {
        "type": "number",
        "size": "56px",
        "bg": {
          "color": "#2563EB"
        },
        "color": "#FFFFFF",
        "typo": {
          "fontSize": {
            "desktop": "20px",
            "tablet": null,
            "mobile": null
          }
        },
        "border": {},
        "borderRadius": {
          "top": "50%",
          "bottom": "50%",
          "left": "50%",
          "right": "50%"
        },
        "shadow": []
      }
    },
    "content": {
      "type": "object",
      "default": {
        "titleTag": "h3",
        "titleColor": "",
        "typo": {
          "fontSize": {
            "desktop": "18px",
            "tablet": null,
            "mobile": null
          }
        },
        "descColor": "",
        "descTypo": {
          "fontSize": {
            "desktop": "15px",
            "tablet": null,
            "mobile": null
          }
        }
      }
    },
    "card": {
      "type": "object",
      "default": {
        "bg": {
          "color": ""
        },
        "padding": {
          "top": "16px",
          "right": "16px",
          "bottom": "16px",
          "left": "16px"
        },
        "border": {},
        "borderRadius": {
          "top": "8px",
          "right": "8px",
          "bottom": "8px",
          "left": "8px"
        }
      }
    },
    "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": {
      "preview": true
    }
  },
  "editorScript": "file:../index.js",
  "style": "file:./view.css",
  "viewScript": "file:./view.js",
  "render": "file:./render.php"
}