---
name: etch-layouts
description: Create responsive layouts using Etch page builder patterns and components.
---

# Etch Layouts Skill

Use this skill when creating layouts, sections, or components for Etch (the WordPress visual builder).

## Output Structure

Create layouts in `gt-design-system/layouts/{component-name}/`:

```
layouts/{component-name}/
├── {component-name}-etch.json    # For pasting into Etch (JSON format)
├── {component-name}-preview.html # Browser preview (compiled CSS inline)
└── {component-name}.js           # JavaScript (if interactive)
```

## Paste Format for Etch

**Etch only accepts JSON format for pasting.** The structure is:

```json
{
  "type": "block",
  "gutenbergBlock": {
    "blockName": "etch/element",
    "attrs": {
      "tag": "div",
      "attributes": {"class": "my-component"},
      "styles": ["styleId123"]
    },
    "innerBlocks": []
  },
  "version": 2,
  "styles": {
    "styleId123": {
      "type": "class",
      "selector": ".my-component",
      "collection": "default",
      "css": "padding: var(--space-m);\n\n&:hover {\n    background: var(--bg-sunken);\n}",
      "readonly": false
    }
  }
}
```

### JSON Structure

| Field | Description |
|-------|-------------|
| `type` | Always `"block"` |
| `gutenbergBlock` | Block tree with `blockName`, `attrs`, `innerBlocks` |
| `version` | Always `2` |
| `styles` | Object mapping style IDs to style definitions |

### Block Types

| Block | Purpose |
|-------|---------|
| `etch/element` | HTML element with `tag`, `attributes`, `styles` |
| `etch/text` | Text content with `content` attribute |

### Style Definition

```json
{
  "type": "class",
  "selector": ".class-name",
  "collection": "default",
  "css": "/* SCSS syntax */",
  "readonly": false
}
```

## SCSS Rules (Critical)

Styles use SCSS syntax. Follow `css-to-scss.md`:

1. Use `to-rem()` for all pixel values
2. Nest media queries inside each class
3. Nest pseudo-classes with `&` (e.g., `&:hover`, `&.is-active`)
4. Use CSS variables from GT Design System

## CSS Variables (GT Design System)

### Colors
- `--bg-base`, `--bg-elevated`, `--bg-sunken`, `--bg-overlay-heavy`
- `--text-primary`, `--text-secondary`, `--text-muted`, `--text-inverse`
- `--accent`, `--accent-hover`
- `--border-light`, `--border-medium`

### Typography
- `--font-sans`, `--font-mono`
- `--fs-xs` to `--fs-4xl`
- `--fw-normal` to `--fw-black`

### Spacing
- `--space-3xs` to `--space-3xl`

### Layout
- `--max-width`, `--content-width`
- `--header-height`, `--header-height-mobile`

### Effects
- `--radius-xs` to `--radius-full`
- `--shadow-xs` to `--shadow-xl`
- `--duration-fast`, `--duration-normal`
- `--ease-out`, `--ease-in-out`

### Z-Index
- `--z-header`, `--z-modal`, `--z-tooltip`

## Dynamic Expressions

Use `{context.path}` syntax in attributes:

- `{site.url}` - Site URL
- `{site.name}` - Site name
- `{this.title}` - Current post title
- `{this.id}` - Current post ID
- `{user.displayName}` - Current user name
- `{props.myProp}` - Component prop
- `{item.field}` - Loop item field

## Workflow

1. Build JSON structure with blocks and styles (SCSS syntax in `css` fields)
2. Save as `-etch.json` for pasting into Etch
3. Create `-preview.html` with compiled CSS for browser testing
4. Create `.js` if interactive
