Jacek Pyziak
5014b9108f
Custom WordPress plugin that replaces the default flat media library with a structured folder view. Features: hierarchical folders via custom taxonomy, sidebar folder tree, drag & drop, modal integration with Elementor/builders, bulk assign, upload auto-assign, toast notifications. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
131 lines
4.6 KiB
Markdown
131 lines
4.6 KiB
Markdown
---
|
|
phase: 04-polish-ux
|
|
plan: 01
|
|
subsystem: media
|
|
tags: [wordpress, ux, bulk-assign, drag-drop, toast, empty-state]
|
|
|
|
requires:
|
|
- phase: 03-media-modal
|
|
provides: Full modal integration, all AJAX endpoints
|
|
provides:
|
|
- Bulk assign media to folders
|
|
- Uncategorized filter
|
|
- Folder drag & drop (hierarchy reorder)
|
|
- Toast notification system
|
|
- Empty state with CTA
|
|
- CSS spinner loading
|
|
affects: []
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [toast notification system, dual dataTransfer types for D&D disambiguation, MutationObserver for bulk button injection]
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- wp-content/plugins/media-folder-pro/assets/js/folder-tree.js
|
|
- wp-content/plugins/media-folder-pro/assets/js/media-filter.js
|
|
- wp-content/plugins/media-folder-pro/assets/css/admin.css
|
|
- wp-content/plugins/media-folder-pro/media-folder-pro.php
|
|
|
|
key-decisions:
|
|
- "Separate dataTransfer types: text/plain for media, application/mfp-folder for folders"
|
|
- "Yellow outline for folder-on-folder D&D vs blue for media-on-folder"
|
|
- "Toast auto-hide 3s with CSS slide-in/fade-out transition"
|
|
- "confirm() kept for delete operations (destructive needs confirmation)"
|
|
- "Bulk dropdown injected via MutationObserver on media-toolbar-secondary"
|
|
|
|
patterns-established:
|
|
- "window.mfpToast(message, type) global toast API"
|
|
- "mfp-media-dropped CustomEvent for cross-module media assignment"
|
|
- "Tree root drop zone for moving folders to top level"
|
|
|
|
duration: ~15min
|
|
started: 2026-03-28
|
|
completed: 2026-03-28
|
|
---
|
|
|
|
# Phase 4 Plan 01: Polish & UX Summary
|
|
|
|
**Bulk media assignment, uncategorized filter, folder hierarchy drag & drop, toast notifications replacing all alert() calls, and polished empty/loading states.**
|
|
|
|
## Performance
|
|
|
|
| Metric | Value |
|
|
|--------|-------|
|
|
| Duration | ~15min |
|
|
| Tasks | 2 completed |
|
|
| Files modified | 4 |
|
|
|
|
## Acceptance Criteria Results
|
|
|
|
| Criterion | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| AC-1: Bulk assign mediow do folderu | Pass | Button in toolbar, dropdown with hierarchy, multi-select assign |
|
|
| AC-2: Filtr "Bez folderu" | Pass | Uncategorized link in sidebar, folderId=-1, NOT EXISTS query |
|
|
| AC-3: Drag & drop folderow w drzewku | Pass | application/mfp-folder type, yellow visual, root drop zone |
|
|
| AC-4: Toast notifications i empty states | Pass | All alert()→toast, CTA empty state, CSS spinner |
|
|
|
|
## Accomplishments
|
|
|
|
- Bulk assign: "Przenies do folderu" button in WP media toolbar with hierarchical dropdown
|
|
- "Bez folderu" filter in sidebar using folderId=-1 (MFP_Media_Query NOT EXISTS)
|
|
- Folder drag & drop with separate dataTransfer type to avoid collision with media drag
|
|
- Drop on tree root area moves folder to top level (parent=0)
|
|
- Toast notification system (success/error/info) with 3s auto-hide and CSS animations
|
|
- All alert() replaced with toast (confirm() kept for destructive delete)
|
|
- Empty state with folder icon, text, and CTA button
|
|
- CSS spinner replacing "..." loading text
|
|
- 7 new i18n strings in both enqueue methods
|
|
|
|
## Files Created/Modified
|
|
|
|
| File | Change | Purpose |
|
|
|------|--------|---------|
|
|
| `assets/js/folder-tree.js` | Major rewrite | Toast system, uncategorized, folder D&D, empty CTA, spinner |
|
|
| `assets/js/media-filter.js` | Major rewrite | Bulk assign, toast integration, mfp-media-dropped handler |
|
|
| `assets/css/admin.css` | Extended | Uncategorized, folder D&D yellow, bulk dropdown, toasts, empty, spinner |
|
|
| `media-folder-pro.php` | Modified | 7 new i18n strings in both enqueue methods |
|
|
|
|
## Decisions Made
|
|
|
|
| Decision | Rationale | Impact |
|
|
|----------|-----------|--------|
|
|
| Dual dataTransfer types | Prevent folder drag from triggering media assign | Clean D&D disambiguation |
|
|
| Yellow vs blue D&D indicators | Visual distinction between operations | Clear UX feedback |
|
|
| MutationObserver for bulk button | WP toolbar renders asynchronously | Reliable injection |
|
|
|
|
## Deviations from Plan
|
|
|
|
None — plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
|
|
None
|
|
|
|
## Next Phase Readiness
|
|
|
|
**Milestone v0.1 Media Folders MVP is COMPLETE.**
|
|
|
|
All 4 phases delivered:
|
|
1. Plugin foundation + taxonomy
|
|
2. Media grid filtering + media D&D
|
|
3. Modal integration + upload assign
|
|
4. Bulk operations, UX polish, toast notifications
|
|
|
|
**Plugin feature summary:**
|
|
- Virtual folder system via custom taxonomy
|
|
- Sidebar folder tree with full CRUD
|
|
- Media grid filtering by folder
|
|
- Drag & drop media to folders
|
|
- Modal dropdown filter + upload auto-assign
|
|
- Bulk assign from WP toolbar
|
|
- "Uncategorized" filter
|
|
- Folder hierarchy D&D
|
|
- Toast notifications
|
|
- Empty states + loading spinners
|
|
|
|
---
|
|
*Phase: 04-polish-ux, Plan: 01*
|
|
*Completed: 2026-03-28*
|