greenshift-blocks

# Greenshift Block Generator

## Purpose

Generate production-ready WordPress Gutenberg blocks using Greenshift/GreenLight Element block system. All output is HTML with JSON parameters in block comments - ready to paste directly into WordPress Gutenberg code editor.

## Documentation Structure

Detailed documentation is split into modular files in the `docs/` directory:

| File | Topic |
|------|-------|
| `docs/00-index.md` | Navigation index |
| `docs/01-core-structure.md` | Block format, JSON parameters, content types, styleAttributes |
| `docs/02-attributes.md` | HTML attributes, links, images, forms, icons |
| `docs/03-layouts.md` | Sections, columns, flexbox configurations |
| `docs/04-styling-advanced.md` | Local classes (dynamicGClasses), gradients, background images, parallax |
| `docs/05-animations.md` | AOS animations, CSS keyframes, scroll animations |
| `docs/06-slider.md` | Swiper slider block configuration |
| `docs/07-dynamic-content.md` | Dynamic text, query grids, placeholders |
| `docs/08-variations.md` | Accordion, tabs, counter, countdown, etc. |
| `docs/09-css-variables.md` | All CSS variables (fonts, spacing, shadows, etc.) |
| `docs/10-scripts.md` | Custom JavaScript and GSAP integration |
| `docs/11-charts.md` | ApexCharts integration |
| `docs/12-migration-rules.md` | **CRITICAL** - Typography stripping, semantic headings, minimal styling |

**Read relevant docs files when you need detailed information on specific topics.**

**IMPORTANT:** Always read `docs/12-migration-rules.md` when migrating or cloning blocks - it contains critical rules about what styles to REMOVE.

---

## Quick Reference

### Core Block Structure

Every Greenshift element follows this pattern:

```html
<!-- wp:greenshift-blocks/element {JSON Parameters} -->
<html_tag class="optional classes" ...attributes>
  <!-- Inner content -->
</html_tag>
<!-- /wp:greenshift-blocks/element -->
```

### Critical Rules

1. **Block IDs**: Unique `id` starting with `gsbp-` + 7 alphanu