# SectionCraft — Gutenberg Plugin

Ek powerful container block jo width control, background shapes, aur gradient support karta hai.

---

## Features

✅ **Width Presets:**
- 830px, 1024px, 1131px, 1329px, 1593px, 1906px
- Full Width (1944px)
- Custom width (apni marzi ka number)

✅ **Padding Control** — Top, Bottom, Left, Right alag alag

✅ **Background Options:**
- Solid color background
- Gradient background (angle + 2 colors)

✅ **Background Shapes:**
- Circle, Square, Blob, Triangle, Ring
- Position: Top Left, Top Right, Bottom Left, Bottom Right, Center, Custom
- Size, Opacity, Rotation control
- Offset X/Y for fine-tuning position
- Per-shape color (with alpha support)
- Multiple shapes add kar sakte hain

---

## Installation & Setup

### Step 1 — Plugin folder mein jayen
```
wp-content/plugins/section-craft/
```

### Step 2 — Dependencies install karen
```bash
npm install
```

### Step 3 — Build karen
```bash
npm run build
```

Production build ke liye:
```bash
npm run build -- --mode=production
```

### Step 4 — WordPress mein activate karen
WP Admin → Plugins → SectionCraft → Activate

---

## Block Structure (Frontend HTML)

```html
<div class="sc-outer" style="position:relative; overflow:hidden; background:...">

  <!-- Background shapes (z-index: 0) -->
  <div class="sc-shape" style="position:absolute; top:0; left:0; ...">
    <svg>...</svg>
  </div>

  <!-- Inner content wrapper (z-index: 1) -->
  <div class="sc-inner" style="max-width:1024px; margin:auto; padding:60px 20px;">
    <!-- InnerBlocks content yahan -->
  </div>

</div>
```

---

## File Structure

```
section-craft/
├── section-craft.php     ← Main plugin file
├── package.json
├── webpack.config.js
├── src/
│   ├── index.js            ← Block registration
│   ├── block.json          ← Block metadata & attributes
│   ├── edit.js             ← Editor component (InspectorControls)
│   ├── save.js             ← Frontend save output
│   ├── editor.scss         ← Editor-only styles
│   └── style.scss          ← Frontend styles
└── build/                  ← Generated after npm run build
    ├── index.js
    ├── index.css
    └── style-index.css
```

---

## Shapes — Available Types

| Type     | Description                      |
|----------|----------------------------------|
| circle   | Solid filled circle              |
| square   | Rounded rectangle                |
| blob     | Organic blob shape               |
| triangle | Triangle polygon                 |
| ring     | Hollow circle (stroke only)      |

---

## Tips

- **Multiple shapes** — Har ek shape ka alag position, size, color set kar sakte hain
- **Gradient + Shapes** — Gradient background pe transparent shapes bohot acha lagta hai (opacity 10-30%)
- **Offset X/Y** — Shape ko position se thoda adjust karne ke liye (jaise `-50px` for bleed effect)
- **Editor** — Inner container ke around dashed border dikhta hai editor mein, frontend pe nahi