{
  "apiVersion": 3,
  "title": "Before After Image",
  "name": "brandy/before-after-image",
  "category": "brandy-blocks",
  "description": "Compare two images with an interactive slider",
  "keywords": [
    "comparison",
    "slider",
    "before",
    "after",
    "image"
  ],
  "attributes": {
    "beforeImage": {
      "type": "object",
      "default": {
        "id": 0,
        "url": "",
        "alt": ""
      }
    },
    "afterImage": {
      "type": "object",
      "default": {
        "id": 0,
        "url": "",
        "alt": ""
      }
    },
    "sliderPosition": {
      "type": "number",
      "default": 50
    },
    "orientation": {
      "type": "string",
      "default": "horizontal",
      "enum": [
        "horizontal",
        "vertical"
      ]
    },
    "beforeLabel": {
      "type": "string",
      "default": "Before"
    },
    "afterLabel": {
      "type": "string",
      "default": "After"
    },
    "showLabels": {
      "type": "boolean",
      "default": true
    }
  },
  "supports": {
    "interactivity": true,
    "align": [
      "wide",
      "full"
    ],
    "spacing": {
      "margin": true,
      "padding": true
    },
    "dimensions": {
      "aspectRatio": true
    },
    "color": {
      "background": true,
      "gradients": true
    },
    "__experimentalBorder": {
      "radius": true,
      "width": true,
      "color": true,
      "style": true
    }
  },
  "render": "file:./render.php",
  "example": {
    "viewportWidth": 800,
    "attributes": {
      "beforeImage": {
        "url": ""
      },
      "afterImage": {
        "url": ""
      }
    }
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScriptModule": "file:./view.js"
}