{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "bpsc/image-comparison-section",
  "version": "1.0.0",
  "title": "Image Comparison Section",
  "category": "bPlugins",
  "description": "Image Comparison Section is a simple WordPress plugin that adds an interactive before-and-after image slider to compare two images side by side.",
  "keywords": [
    "Image Comparison Section"
  ],
  "textdomain": "section-collection",
  "attributes": {
    "cards": {
      "type": "array",
      "default": [
        {
          "beforeSrc": "https://templates.bplugins.com/wp-content/uploads/2026/02/colorful_flower_bw.jpg",
          "afterSrc": "https://templates.bplugins.com/wp-content/uploads/2026/02/colorful_flower.jpg",
          "title": "Detail Cleanup",
          "text": "Multiple sliders on one page are supported.",
          "initialValue": 50,
          "leftLabel": "Before",
          "rightLabel": "After"
        },
        {
          "beforeSrc": "https://templates.bplugins.com/wp-content/uploads/2026/02/berries_in_baske_bw.jpg",
          "afterSrc": "https://templates.bplugins.com/wp-content/uploads/2026/02/berries_in_baske.jpg",
          "title": "Detail Cleanup",
          "text": "Multiple sliders on one page are supported.",
          "initialValue": 50,
          "leftLabel": "Before",
          "rightLabel": "After"
        }
      ]
    },
    "layout": {
      "type": "object",
      "default": {
        "section": {
          "margin": {
            "desktop": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            },
            "tablet": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            },
            "mobile": {
              "top": "0px",
              "right": "0px",
              "bottom": "0px",
              "left": "0px"
            }
          },
          "padding": {
            "desktop": {
              "top": "56px",
              "right": "0px",
              "bottom": "56px",
              "left": "0px"
            },
            "tablet": {
              "top": "56px",
              "right": "6px",
              "bottom": "56px",
              "left": "6px"
            },
            "mobile": {
              "top": "56px",
              "right": "6px",
              "bottom": "56px",
              "left": "6px"
            }
          },
          "minHeight": {
            "desktop": "100vh",
            "tablet": "100vh",
            "mobile": "100vh"
          },
          "maxWidth": {
            "desktop": "1200px",
            "tablet": "1200px",
            "mobile": "1200px"
          }
        },
        "cards": {
          "gridCols": {
            "desktop": 2,
            "tablet": 2,
            "mobile": 1
          },
          "colGap": "30px",
          "borderRadius": {
            "top": "18px",
            "left": "18px",
            "right": "18px",
            "bottom": "18px"
          },
          "cardsMinHeight": "300px"
        }
      }
    },
    "styles": {
      "type": "object",
      "default": {
        "section": {
          "bg": {
            "type": "solid",
            "overlayColor": "rgba(0, 0, 0, 0)",
            "position": "center center",
            "image": {
              "url": ""
            },
            "color": "#fff",
            "gradient": "linear-gradient(180deg, #ffffff, #f8fafc)",
            "repeat": "no-repeat",
            "size": "cover"
          },
          "title": {
            "color": "#000",
            "typo": {
              "fontCategory": "sans-serif",
              "fontFamily": "Default",
              "fontSize": {
                "desktop": 48,
                "tablet": 42,
                "mobile": 26
              },
              "fontVariant": 400,
              "fontWeight": 700,
              "isUploadFont": true,
              "lineHeight": 0,
              "textDecoration": "",
              "textTransform": "none"
            }
          },
          "description": {
            "color": "#0000008F",
            "typo": {
              "fontCategory": "sans-serif",
              "fontFamily": "Default",
              "fontSize": {
                "desktop": 16,
                "tablet": 16,
                "mobile": 14
              },
              "fontVariant": 400,
              "fontWeight": 400,
              "isUploadFont": true,
              "lineHeight": 0,
              "textDecoration": "",
              "textTransform": "none"
            }
          }
        },
        "card": {
          "bg": {
            "type": "solid",
            "overlayColor": "rgba(0, 0, 0, 0)",
            "position": "center center",
            "image": {
              "url": ""
            },
            "color": "#fff",
            "gradient": "linear-gradient(135deg, #4a90e2, #2c5282)",
            "repeat": "no-repeat",
            "size": "cover"
          },
          "title": {
            "color": "#000",
            "typo": {
              "fontCategory": "sans-serif",
              "fontFamily": "Default",
              "fontSize": {
                "desktop": 22,
                "tablet": 22,
                "mobile": 22
              },
              "fontVariant": 400,
              "fontWeight": 700,
              "isUploadFont": true,
              "lineHeight": 0,
              "textDecoration": "",
              "textTransform": "none"
            }
          },
          "description": {
            "color": "#000000B8",
            "typo": {
              "fontCategory": "sans-serif",
              "fontFamily": "Default",
              "fontSize": {
                "desktop": 16,
                "tablet": 16,
                "mobile": 14
              },
              "fontVariant": 400,
              "fontWeight": 400,
              "isUploadFont": true,
              "lineHeight": 0,
              "textDecoration": "",
              "textTransform": "none"
            }
          }
        },
        "others": {
          "label": {
            "colors": {
              "color": "#fff",
              "bg": "#00000078"
            },
            "typo": {
              "fontCategory": "sans-serif",
              "fontFamily": "Default",
              "fontSize": {
                "desktop": 12,
                "tablet": 12,
                "mobile": 12
              },
              "fontVariant": 400,
              "fontWeight": 400,
              "isUploadFont": true,
              "lineHeight": 0,
              "textDecoration": "",
              "textTransform": "none"
            }
          },
          "handle": {
            "color": "#ffffffc9",
            "knob": {
              "color": "#000",
              "bg": "#ffffffb3"
            }
          }
        }
      }
    },
    "sectionHeader": {
      "type": "object",
      "default": {
        "status": true,
        "title": "Before & After",
        "description": "Drag the handle to compare the transformation"
      }
    },
    "align": {
      "type": "string",
      "default": "full"
    },
    "alignment": {
      "type": "string",
      "default": "center"
    }
  },
  "supports": {
    "align": [
      "wide",
      "full"
    ],
    "html": false
  },
  "example": {
    "attributes": {}
  },
  "editorScript": "file:../index.js",
  "style": "file:./view.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"
}