I am thrilled to announce the release of Core CMS v0.6.5! This update focuses heavily on refining the administrative user experience, bringing drag-and-drop convenience to all media workflows, and completing the visual polish of our admin theme system across light and dark modes.
Major Highlights / Updates
This release introduces modern file handling interactions and visual refinements to keep your content workflows smooth and intuitive:
- Modern Drag & Drop Uploads: Replaced the standard file selector in the main Media Library (`admin/media.php`) with a premium glassmorphic dropzone supporting multi-file selection.
- Asynchronous Parallel Uploading: Dropped files are uploaded asynchronously in parallel (throttled to 3 concurrent requests to avoid server strain), complete with individual progress bars and a final automatic library reload.
- Shared Media Modal Drag-to-Select: Added a drag-and-drop upload zone at the top of the shared media modal picker. Dropping a file here uploads it via AJAX and automatically selects it, enabling a zero-click upload & select flow.
- Sidebar Featured Image Dropzones: Bound direct drag-and-drop listeners directly to the Featured Image sidebar preview cards on the Post, Product (Commerce Shop), and Menu Item (Commerce F&B) editor pages for instant uploads.
- Editor.js "Replace Image" Tune: Subclassed the standard `ImageTool` with a custom `CoreImageTool` to introduce a "Replace Image" option inside the block settings menu, allowing in-place media replacement.
Technical Deep Dive
Under the hood, we solved complex browser rendering edge cases and added smart cache-busting to the asset pipeline:
- WebP Compression Hook Compatibility: Routed dropped files through standard hidden file inputs to trigger change events in the capture phase. This ensures our client-side WebP compressor (`converter.js`) optimizes files automatically before they are sent to the server.
- Resolution of Grid Layout Overlaps: Resolved a browser layout bug where flexbox grid containers with `aspect-ratio` and percentage-sized images caused CSS Grid track row heights to collapse to zero. We replaced `aspect-ratio: 1` on grid cards with a stable `height: 120px` and set image dimensions to 100% with `object-fit: cover`.
- Dark Mode Contrast Polish: Refactored modal elements to use CSS theme variables (`var(--text-color)` and `var(--text-muted)`) rather than hardcoded hex colors, and applied the core background variable `var(--bg-color)` to inner cards to maintain container contrast in dark mode.
- Admin Stylesheet Cache-Busting: Appended file modified timestamps as query parameters (`?v=...`) to `admin.css` link imports in the header and login templates using `filemtime` to ensure clients receive updated styles immediately.
Looking Ahead
With drag-and-drop media uploading and theme harmony fully in place, our core administration suite provides a truly premium, luxury feel. Our next steps involve finalizing database schema optimizations as we move toward our next major release.
Try the updated platform out at core-cms.brainav.ca.
Until next time!
— Jason Brain