Josh Knapp
a71b58c2c7
Visual drag-and-drop website builder using GrapesJS with: - Multi-page editor with live preview - File-based asset storage via PHP API (no localStorage base64) - Template library, Docker support, and Playwright test suite Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
89 lines
4.1 KiB
Markdown
89 lines
4.1 KiB
Markdown
# Site Builder Features (2026-02-22)
|
||
|
||
## 1. Anchor Points & Link System
|
||
- **Anchor Point block**: Drag-and-drop anchor points with configurable `id` attribute
|
||
- **Link Type Selector**: When selecting a link/button element, choose between:
|
||
- External URL (manual input)
|
||
- Page Link (dropdown of all pages)
|
||
- Anchor on Page (dropdown of all anchors on current page)
|
||
- Anchors automatically populate in the dropdown
|
||
|
||
## 2. Asset Manager
|
||
- **New "Assets" tab** in left panel
|
||
- **File upload**: Upload images, videos, PDFs via file picker (stored as data URLs in localStorage)
|
||
- **URL-based assets**: Add assets by pasting URLs
|
||
- **Asset grid**: Visual grid showing thumbnails for images, icons for other file types
|
||
- **Click to copy**: Click any asset to copy its URL to clipboard
|
||
- **Delete assets**: Remove with × button
|
||
- Assets are also registered in GrapesJS's built-in asset manager for image selection
|
||
|
||
## 3. Image Resize/Crop (PHP Backend)
|
||
- **API endpoint**: `api/image-resize.php`
|
||
- **Modes**: `resize`, `crop`, `fit`
|
||
- **Input**: File upload or URL
|
||
- **Parameters**: width, height, quality (1-100), format (jpg/png/webp/auto)
|
||
- **Output**: JSON with resized image path, dimensions, and file size
|
||
- Requires PHP with GD extension on the server
|
||
|
||
## 4. Video Element Fix
|
||
- **Video block** has properly registered `video-wrapper` component type
|
||
- **Video URL trait**: Enter YouTube, Vimeo, or direct video file URLs
|
||
- **Apply Video button**: Click to apply the video URL
|
||
- **Video Section (BG)**: Separate component type for video background sections
|
||
- Both component types (`video-wrapper` and `video-section`) are registered and functional
|
||
|
||
## 5. Element Deletion Improvement
|
||
- **"Delete Section" context menu option**: Right-click any element → "Delete Section"
|
||
- Walks up the component tree to find the topmost parent (before the wrapper)
|
||
- Deletes the entire section including all child components
|
||
- Confirmation dialog before deletion
|
||
|
||
## 6. Header/Site-wide Elements
|
||
- **New "Head" tab** in right panel
|
||
- **Page `<head>` Code**: Add scripts, meta tags, and other `<head>` elements
|
||
- **Site-wide CSS**: Add CSS that applies to all pages
|
||
- Both are saved to localStorage and included in exports
|
||
- Site-wide CSS is applied live to the canvas editor
|
||
|
||
## 7. PDF/File Display Element
|
||
- **"File / PDF" block** in Media category
|
||
- Uses `<iframe>` for embedding
|
||
- **File URL trait**: Enter URL of PDF or document
|
||
- **Height control**: Adjustable iframe height
|
||
- **Apply File button**: Click to load the file
|
||
- Google Docs Viewer fallback for non-PDF files
|
||
- Placeholder UI with instructions when no file is loaded
|
||
|
||
## 8. Missing Icons Fixed
|
||
- **Section block**: `fa fa-columns` icon
|
||
- **Newsletter block**: `fa fa-newspaper` icon
|
||
- **Spacer block**: `fa fa-arrows-alt-v` icon
|
||
- All using Font Awesome 5 compatible class names
|
||
|
||
## 9. Typography Advanced Settings
|
||
- **Font Family**: Dropdown with 11 font options (Inter, Roboto, Open Sans, Poppins, Montserrat, Playfair Display, Merriweather, Source Code Pro, Arial, Georgia, Times New Roman)
|
||
- **Font Weight**: Dropdown from Thin (100) to Black (900)
|
||
- **Letter Spacing**: Number input with px/em/rem units
|
||
- **Line Height**: Number input with px/em/%/unitless options
|
||
- **Text Align**: Radio buttons with icons (left, center, right, justify)
|
||
- All properties properly configured in GrapesJS StyleManager
|
||
|
||
## 10. Logo Element Improvement
|
||
- **Logo Mode trait**: Select between Text Only, Image Only, or Image + Text
|
||
- **Logo Text trait**: Set the text content
|
||
- **Logo Image URL trait**: Set an image URL for the logo
|
||
- **Apply Logo button**: Regenerates the logo component based on selected mode
|
||
- Text mode shows initial letter icon + text (original behavior)
|
||
- Image mode shows just the image
|
||
- Both mode shows image + text side by side
|
||
|
||
## Additional Improvements
|
||
- **Local vendor scripts**: GrapesJS and plugins now load from local `vendor/` directory (no CDN dependency)
|
||
- **Plugin compatibility fix**: Fixed `gjs-blocks-basic` global name mismatch
|
||
- **Context menu**: Added "Delete Section" alongside existing "Delete"
|
||
|
||
## Testing
|
||
- 17 Playwright tests covering all features
|
||
- Run: `npx playwright test tests/features.spec.js`
|
||
- All tests passing ✅
|