{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "ghostkit/image-compare",
  "category": "ghostkit",
  "title": "Image Compare",
  "description": "Compare two images with a slider.",
  "keywords": ["image", "compare", "before", "after"],
  "supports": {
    "html": false,
    "className": false,
    "anchor": true,
    "align": ["wide", "full"]
  },
  "attributes": {
    "align": {
      "type": "string"
    },
    "position": {
      "type": "number",
      "default": 50
    },
    "direction": {
      "type": "string"
    },
    "trigger": {
      "type": "string"
    },

    "beforeId": {
      "type": "number"
    },
    "beforeUrl": {
      "attribute": "src",
      "selector": ".ghostkit-image-compare-image-before img",
      "source": "attribute",
      "type": "string"
    },
    "beforeAlt": {
      "attribute": "alt",
      "selector": ".ghostkit-image-compare-image-before img",
      "source": "attribute",
      "type": "string",
      "default": ""
    },
    "beforeWidth": {
      "type": "number"
    },
    "beforeHeight": {
      "type": "number"
    },
    "beforeSizeSlug": {
      "type": "string"
    },

    "afterId": {
      "type": "number"
    },
    "afterUrl": {
      "attribute": "src",
      "selector": ".ghostkit-image-compare-image-after img",
      "source": "attribute",
      "type": "string"
    },
    "afterAlt": {
      "attribute": "alt",
      "selector": ".ghostkit-image-compare-image-after img",
      "source": "attribute",
      "type": "string",
      "default": ""
    },
    "afterWidth": {
      "type": "number"
    },
    "afterHeight": {
      "type": "number"
    },
    "afterSizeSlug": {
      "type": "string"
    },

    "showLabels": {
      "type": "boolean",
      "default": false
    },
    "labelBeforeText": {
      "type": "string",
      "source": "html",
      "selector": ".ghostkit-image-compare-image-before-label",
      "default": "Before"
    },
    "labelAfterText": {
      "type": "string",
      "source": "html",
      "selector": ".ghostkit-image-compare-image-after-label",
      "default": "After"
    },
    "labelAlign": {
      "type": "string",
      "default": "end"
    },

    "colorDivider": {
      "type": "string"
    },
    "colorDividerIcon": {
      "type": "string"
    },

    "caption": {
      "type": "string",
      "source": "html",
      "selector": "figcaption"
    }
  }
}