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 ✅
|