Appearance
Block Grouping — PR Demo Plan
Focus: show what's new. The creative content doesn't matter — the interactions do.
What to show (10 features)
| # | Feature | What to do | Why it matters |
|---|---|---|---|
| 1 | Multi-select | Cmd+click 2-3 blocks | New — couldn't select multiple blocks before |
| 2 | Group creation | Click "Group N blocks" in toolbar (or Cmd+G) | Main feature — blocks collected into one container |
| 3 | Group config | Click group → set background, border, padding, shadow | Groups have their own config panel with styling |
| 4 | Drag in/out | Drag a block into the group, drag another out | Flexible organization with DnD |
| 5 | Nesting | Create a group inside another group | Supports up to 3 levels deep |
| 6 | Collapse/expand | Click chevron on group in block list | Clean block list when many blocks |
| 7 | Containers in groups | Add a conversation block inside a group | All block types work inside groups |
| 8 | Shortcodes | Hover blocks — shows T1, GP1, B1 etc. | New helper labels for script targeting |
| 9 | Ungroup | Right-click → Ungroup | Reversible — blocks return to top-level |
| 10 | Undo/redo | Cmd+Z after grouping | Snapshot-based undo for all group operations |
Blocks to create
Minimum needed to demo all features above:
| Type | Count | Purpose |
|---|---|---|
| Text | 2-3 | Multi-select and grouping |
| Graphic | 1 | DnD in/out demo |
| Button | 1 | Nesting demo |
| Conversation | 1 | Container-in-group demo |
Content doesn't matter. Use whatever looks decent — a heading, subtext, image, CTA.
Suggested flow (~90 sec)
1. Multi-select + group (~15 sec)
- Cmd+click 3 blocks (e.g. two texts + graphic)
- Click "Group 3 blocks" in toolbar → group appears in block list
- Rename it if you want
2. Group config (~15 sec)
- Click group → config panel opens
- Set background, border-radius, padding
- Show live preview updating
3. Drag in/out (~10 sec)
- Drag button into the group
- Drag graphic out of the group
- Collapse group with chevron
4. Nesting (~10 sec)
- Select 2 blocks inside the group, Cmd+G → nested group
- Show indentation in block list
- Expand/collapse
5. Container in group (~10 sec)
- Add a conversation block to the group
- Show it renders correctly inside
6. Shortcodes (~5 sec)
- Hover blocks in list — shortcodes appear (T1, GP1, B1, etc.)
7. Ungroup (~10 sec)
- Right-click nested group → Ungroup
- Children return to parent group level
8. Undo/redo (~5 sec)
- Cmd+Z → grouping reverses
- Cmd+Shift+Z → comes back
9. Cross-container guard (~10 sec)
- Drag a block over a form or slider → disabled state (dashed border, opacity)
- Drop elsewhere — grouping inside containers is prevented
Tips for recording
- Zoom browser to ~125% so UI is clearly visible
- Keep mouse movements deliberate, pause briefly after each action
- Record block list + preview area (skip sidebar navigation)
- Short captions if needed: "Multi-select", "Group", "Drag in", "Nested", "Ungroup", "Undo"
What NOT to show
- Fractional indexing internals (invisible to users)
- Configuration deep-dives (alignment, animations) — separate walkthrough
- Edge cases or error states
Visual reference
See index.html in this folder for a color/layout sketch (300x600, release notes palette).