{
  "apiVersion": 3,
  "title": "Image Hotspots",
  "name": "brandy/image-hotspots",
  "category": "brandy-blocks",
  "description": "Add interactive hotspot markers on an image with tooltips and optional WooCommerce product cards",
  "keywords": [
    "hotspot",
    "image",
    "marker",
    "tooltip",
    "product",
    "interactive"
  ],
  "attributes": {
    "image": {
      "type": "object",
      "default": {
        "id": 0,
        "url": "",
        "alt": "",
        "width": 0,
        "height": 0
      }
    },
    "hotspots": {
      "type": "array",
      "default": []
    },
    "markerStyle": {
      "type": "string",
      "default": "dot",
      "enum": [
        "dot",
        "number",
        "icon"
      ]
    },
    "markerIconName": {
      "type": "string",
      "default": ""
    },
    "markerIconType": {
      "type": "string",
      "enum": [
        "regular",
        "fill",
        "duotone"
      ],
      "default": "regular"
    },
    "markerColor": {
      "type": "string",
      "default": ""
    }
  },
  "variations": [
    {
      "name": "default",
      "title": "Image Hotspots",
      "description": "Add interactive hotspot markers on an image with tooltips and optional WooCommerce product cards",
      "isDefault": true,
      "attributes": {
        "image": {
          "id": 0,
          "url": "https://images.wpbrandy.com/uploads/hero-section-3-img.webp",
          "alt": "Desk scene with a laptop, coffee mug and a wrapped parcel",
          "width": 1440,
          "height": 600
        },
        "hotspots": [
          {
            "id": "hotspot-1",
            "x": 13,
            "y": 35,
            "title": "Ceramic mug",
            "description": "Matte glaze, 350 ml, dishwasher safe.",
            "buttonText": "",
            "buttonUrl": "",
            "productId": 0
          },
          {
            "id": "hotspot-2",
            "x": 40,
            "y": 70,
            "title": "13-inch laptop",
            "description": "The everyday workhorse behind every order.",
            "buttonText": "",
            "buttonUrl": "",
            "productId": 0
          },
          {
            "id": "hotspot-3",
            "x": 78,
            "y": 42,
            "title": "Kraft parcel",
            "description": "Plastic-free packaging, tied with cotton twine.",
            "buttonText": "",
            "buttonUrl": "",
            "productId": 0
          }
        ],
        "markerStyle": "dot"
      }
    }
  ],
  "example": {
    "viewportWidth": 1400,
    "attributes": {
      "image": {
        "id": 0,
        "url": "https://images.wpbrandy.com/uploads/hero-section-3-img.webp",
        "alt": "Desk scene with a laptop, coffee mug and a wrapped parcel",
        "width": 1440,
        "height": 600
      },
      "hotspots": [
        {
          "id": "hotspot-1",
          "x": 13,
          "y": 35,
          "title": "Ceramic mug",
          "description": "Matte glaze, 350 ml, dishwasher safe.",
          "buttonText": "",
          "buttonUrl": "",
          "productId": 0
        },
        {
          "id": "hotspot-2",
          "x": 40,
          "y": 70,
          "title": "13-inch laptop",
          "description": "The everyday workhorse behind every order.",
          "buttonText": "",
          "buttonUrl": "",
          "productId": 0
        },
        {
          "id": "hotspot-3",
          "x": 78,
          "y": 42,
          "title": "Kraft parcel",
          "description": "Plastic-free packaging, tied with cotton twine.",
          "buttonText": "",
          "buttonUrl": "",
          "productId": 0
        }
      ],
      "markerStyle": "dot"
    }
  },
  "supports": {
    "interactivity": true,
    "align": [
      "wide",
      "full"
    ],
    "spacing": {
      "margin": true
    },
    "__experimentalBorder": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true,
      "__experimentalDefaultControls": {
        "color": true,
        "radius": true,
        "style": true,
        "width": true
      }
    }
  },
  "render": "file:./render.php",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScriptModule": "file:./view.js"
}