{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/accordion-block",
  "version": "0.1.0",
  "title": "Accordion (Free)",
  "category": "adaire-content-expandable",
  "description": "Create collapsible FAQ sections with smooth animations and customizable styling for organizing content.",
  "supports": {
    "html": false,
    "anchor": true,
    "align": [
      "wide",
      "full"
    ],
    "customClassName": true
  },
  "textdomain": "accordion-block",
  "icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_52_13)\">\n<rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F0F0F1\"/>\n<g clip-path=\"url(#clip1_52_13)\">\n<path d=\"M22.213 9.06909H1.78704C1.68355 9.06909 1.58107 9.08738 1.48548 9.12291C1.38989 9.15844 1.30305 9.21052 1.22995 9.27616C1.15685 9.34179 1.09891 9.41971 1.05945 9.50544C1.01999 9.59116 0.99979 9.68302 1 9.77576V15.2276C1 15.4146 1.08292 15.594 1.23052 15.7262C1.37812 15.8585 1.5783 15.9328 1.78704 15.9328H22.213C22.4217 15.9328 22.6219 15.8585 22.7695 15.7262C22.9171 15.594 23 15.4146 23 15.2276V9.77576C23.0002 9.68302 22.98 9.59116 22.9405 9.50544C22.9011 9.41971 22.8432 9.34179 22.7701 9.27616C22.6969 9.21052 22.6101 9.15844 22.5145 9.12291C22.4189 9.08738 22.3165 9.06909 22.213 9.06909ZM22.3479 15.1729C22.3487 15.1966 22.3443 15.2202 22.3347 15.2424C22.3252 15.2645 22.3108 15.2847 22.2923 15.3018C22.2739 15.3188 22.2518 15.3324 22.2274 15.3417C22.203 15.3509 22.1768 15.3557 22.1503 15.3557H1.84968C1.82352 15.3557 1.79762 15.351 1.77346 15.3421C1.74929 15.3331 1.72734 15.32 1.70884 15.3034C1.69035 15.2868 1.67568 15.2671 1.66567 15.2455C1.65566 15.2238 1.65051 15.2006 1.65051 15.1772V9.82901C1.65093 9.78179 1.67205 9.73662 1.70931 9.70323C1.74657 9.66984 1.79698 9.65092 1.84968 9.65054H22.1503C22.2029 9.65092 22.2531 9.66989 22.2901 9.70332C22.3271 9.73675 22.3479 9.78192 22.3479 9.82901V15.1729Z\" fill=\"#D52940\"/>\n<path d=\"M20.573 7.13049H3.42691C3.21756 7.13049 3.04785 7.28256 3.04785 7.47015C3.04785 7.65774 3.21756 7.80981 3.42691 7.80981H20.573C20.7824 7.80981 20.9521 7.65774 20.9521 7.47015C20.9521 7.28256 20.7824 7.13049 20.573 7.13049Z\" fill=\"#D52940\"/>\n<path d=\"M20.1169 19.0948H3.88156C3.67221 19.0948 3.5025 19.2469 3.5025 19.4344C3.5025 19.622 3.67221 19.7741 3.88156 19.7741H20.1169C20.3263 19.7741 20.496 19.622 20.496 19.4344C20.496 19.2469 20.3263 19.0948 20.1169 19.0948Z\" fill=\"#D52940\"/>\n<path d=\"M20.1169 5.22778H3.88156C3.67221 5.22778 3.5025 5.37985 3.5025 5.56744C3.5025 5.75503 3.67221 5.9071 3.88156 5.9071H20.1169C20.3263 5.9071 20.496 5.75503 20.496 5.56744C20.496 5.37985 20.3263 5.22778 20.1169 5.22778Z\" fill=\"#D52940\"/>\n<path d=\"M20.573 17.0554H3.42691C3.21756 17.0554 3.04785 17.2075 3.04785 17.3951C3.04785 17.5827 3.21756 17.7347 3.42691 17.7347H20.573C20.7824 17.7347 20.9521 17.5827 20.9521 17.3951C20.9521 17.2075 20.7824 17.0554 20.573 17.0554Z\" fill=\"#D52940\"/>\n</g>\n</g>\n<defs>\n<clipPath id=\"clip0_52_13\">\n<rect width=\"24\" height=\"24\" rx=\"5\" fill=\"white\"/>\n</clipPath>\n<clipPath id=\"clip1_52_13\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js",
  "attributes": {
    "blockId": {
      "type": "string",
      "default": ""
    },
    "items": {
      "type": "array",
      "default": [
        {
          "id": "",
          "title": "What is the Accordion Block?",
          "content": "The Accordion Block lets you organize content into collapsible sections, keeping your page clean and easy to scan. Each item has a title that visitors click to reveal the content below — perfect for FAQs, feature lists, or step-by-step guides.",
          "open": true
        },
        {
          "id": "",
          "title": "How do I add more accordion items?",
          "content": "Click the \"+\" button that appears at the bottom of the accordion in the editor to add a new item. You can also duplicate an existing item by selecting it and using the block toolbar. Drag and drop items to reorder them at any time.",
          "open": false
        },
        {
          "id": "",
          "title": "How do I customise the appearance?",
          "content": "Select the accordion block and open the block settings panel on the right. You can change the title colour, content colour, background colour, chevron icon, border radius, padding, font sizes, and animation speed — giving you full control over the look and feel.",
          "open": false
        },
        {
          "id": "",
          "title": "Can multiple items be open at the same time?",
          "content": "By default only one item is open at a time. To allow multiple items to stay open simultaneously, toggle the \"Allow multiple open\" option in the block settings panel. You can also choose which item opens by default when the page first loads.",
          "open": false
        }
      ]
    },
    "titleColor": {
      "type": "string",
      "default": "#503AA8"
    },
    "contentColor": {
      "type": "string",
      "default": "#4a5568"
    },
    "backgroundColor": {
      "type": "string",
      "default": "#ffffff"
    },
    "chevronColor": {
      "type": "string",
      "default": "#503AA8"
    },
    "chevronSize": {
      "type": "object",
      "default": {
        "desktop": 16,
        "tablet": 14,
        "mobile": 12,
        "smartwatch": 10
      }
    },
    "titleFontSize": {
      "type": "object",
      "default": {
        "desktop": 20,
        "tablet": 18,
        "mobile": 16,
        "smartwatch": 14
      }
    },
    "contentFontSize": {
      "type": "object",
      "default": {
        "desktop": 16,
        "tablet": 14,
        "mobile": 12,
        "smartwatch": 10
      }
    },
    "gap": {
      "type": "object",
      "default": {
        "desktop": 12,
        "tablet": 10,
        "mobile": 8,
        "smartwatch": 6
      }
    },
    "radius": {
      "type": "object",
      "default": {
        "desktop": 12,
        "tablet": 10,
        "mobile": 8,
        "smartwatch": 6
      }
    },
    "padding": {
      "type": "object",
      "default": {
        "desktop": {
          "top": 20,
          "right": 20,
          "bottom": 20,
          "left": 20
        },
        "tablet": {
          "top": 16,
          "right": 16,
          "bottom": 16,
          "left": 16
        },
        "mobile": {
          "top": 12,
          "right": 12,
          "bottom": 12,
          "left": 12
        },
        "smartwatch": {
          "top": 8,
          "right": 8,
          "bottom": 8,
          "left": 8
        }
      }
    },
    "animationDuration": {
      "type": "number",
      "default": 300
    },
    "animationEasing": {
      "type": "string",
      "default": "ease"
    },
    "allowMultipleOpen": {
      "type": "boolean",
      "default": false
    },
    "firstItemOpenByDefault": {
      "type": "boolean",
      "default": true
    },
    "icon": {
      "type": "string",
      "default": "chevron-down"
    },
    "marginTop": {
      "type": "object",
      "default": {
        "desktop": 0,
        "tablet": 0,
        "mobile": 0,
        "smartwatch": 0
      }
    },
    "marginRight": {
      "type": "object",
      "default": {
        "desktop": 0,
        "tablet": 0,
        "mobile": 0,
        "smartwatch": 0
      }
    },
    "marginBottom": {
      "type": "object",
      "default": {
        "desktop": 0,
        "tablet": 0,
        "mobile": 0,
        "smartwatch": 0
      }
    },
    "marginLeft": {
      "type": "object",
      "default": {
        "desktop": 0,
        "tablet": 0,
        "mobile": 0,
        "smartwatch": 0
      }
    },
    "marginHorizontal": {
      "type": "object",
      "default": {
        "desktop": 0,
        "tablet": 0,
        "mobile": 0,
        "smartwatch": 0
      }
    },
    "titleFontWeight": {
      "type": "string",
      "default": "600"
    },
    "contentFontWeight": {
      "type": "string",
      "default": "400"
    },
    "shadowIntensity": {
      "type": "number",
      "default": 0.08
    },
    "contentBackgroundColor": {
      "type": "string",
      "default": "#f8fafc"
    },
    "dividerColor": {
      "type": "string",
      "default": "#e2e8f0"
    },
    "dividerThickness": {
      "type": "number",
      "default": 1
    },
    "containerMode": {
      "type": "string",
      "default": "full"
    },
    "containerMaxWidth": {
      "type": "object",
      "default": {
        "desktop": {
          "value": 1200,
          "unit": "px"
        },
        "tablet": {
          "value": 100,
          "unit": "%"
        },
        "mobile": {
          "value": 100,
          "unit": "%"
        },
        "smartwatch": {
          "value": 100,
          "unit": "%"
        }
      }
    }
  }
}