Document Bookmarks Plugin - Directory Structure

Visual File Organization Guide

📁 wp-content/
└── 📁 plugins/
    └── 📁 document-bookmarks/  ← Create this folder
        │
        ├── 📄 document-bookmarks.php  ← Main plugin file
        │
        ├── 📄 README.md  ← Documentation
        │
        ├── 📁 blocks/  ← Create this folder
        │   └── 📁 document-bookmark/  ← Create this subfolder
        │       ├── 📄 editor.js     ← Block editor JavaScript
        │       ├── 📄 editor.css    ← Block editor styles  
        │       └── 📄 style.css     ← Frontend styles
        │
        └── 📁 assets/  ← Create this folder
            └── 📄 frontend.js  ← Frontend bookmark functionality

Step-by-Step Installation

1️⃣ Create Main Plugin Folder

📁 /wp-content/plugins/document-bookmarks/

2️⃣ Add Main Plugin File

📁 document-bookmarks/
  └── 📄 document-bookmarks.php  ← Remember to comment out line 50

3️⃣ Create Blocks Directory Structure

📁 document-bookmarks/
  └── 📁 blocks/
      └── 📁 document-bookmark/

4️⃣ Add Block Files

📁 blocks/document-bookmark/
  ├── 📄 editor.js    (Gutenberg block code)
  ├── 📄 editor.css   (Editor styling)
  └── 📄 style.css    (Frontend styling)

5️⃣ Create Assets Folder

📁 document-bookmarks/
  └── 📁 assets/
      └── 📄 frontend.js  (Bookmark button functionality)

6️⃣ Add Documentation

📁 document-bookmarks/
  └── 📄 README.md  (Optional but recommended)

Final Structure Overview

🔌 WORDPRESS INSTALLATION
│
├── 📁 wp-content/
│   ├── 📁 plugins/
│   │   ├── 📁 document-bookmarks/  ⭐ YOUR PLUGIN
│   │   │   ├── 📄 document-bookmarks.php
│   │   │   ├── 📄 README.md
│   │   │   ├── 📁 blocks/
│   │   │   │   └── 📁 document-bookmark/
│   │   │   │       ├── 📄 editor.js
│   │   │   │       ├── 📄 editor.css
│   │   │   │       └── 📄 style.css
│   │   │   └── 📁 assets/
│   │   │       └── 📄 frontend.js
│   │   │
│   │   ├── 📁 advanced-custom-fields/  (Your ACF plugin)
│   │   └── 📁 other-plugins/
│   │
│   └── 📁 themes/
│       └── 📁 your-theme/

Important Notes

⚠️ File Naming Must Match Exactly

The file paths are hardcoded in the main plugin file, so names must match:

• blocks/document-bookmark/editor.js
• blocks/document-bookmark/editor.css
• blocks/document-bookmark/style.css
• assets/frontend.js

✅ Checklist Before Activation

• [ ] Created folder: /wp-content/plugins/document-bookmarks/
• [ ] Added main file: document-bookmarks.php
• [ ] Commented out line 50 (taxonomy registration)
• [ ] Created subfolder: blocks/document-bookmark/
• [ ] Added all 3 block files (editor.js, editor.css, style.css)
• [ ] Created subfolder: assets/
• [ ] Added frontend.js to assets folder
• [ ] Total: 6 files + 3 folders

🎯 Quick Copy Commands (if using terminal)

# Navigate to plugins directory
cd /path/to/wordpress/wp-content/plugins/

# Create plugin directory structure
mkdir -p document-bookmarks/blocks/document-bookmark
mkdir -p document-bookmarks/assets

# Then copy each file to its location
# (Copy the actual file contents from the code provided earlier)

📝 After Installation

1. Go to WordPress Admin → Plugins
2. Find "Document Bookmarks"
3. Click "Activate"
4. Test by editing any post/page and adding the "Document Bookmark" block

Troubleshooting

If the block doesn't appear:

1. Check that all file paths match exactly as shown
2. Verify JavaScript console for errors (F12 in browser)
3. Ensure your taxonomy toolkit-document-category exists
4. Clear browser cache and WordPress cache

If styles don't load:

1. Check file permissions (should be 644 for files, 755 for directories)
2. Verify URLs are correct in browser network tab
3. Try deactivating and reactivating the plugin