Overview
The Gutenberg Blocks add-on provides native WordPress block editor integration for Download Manager. Insert packages, create download grids, display categories, and build download pages without shortcodes—all with visual, drag-and-drop editing.
Prerequisites
- WordPress Download Manager installed
- WordPress 5.0+ (Gutenberg editor)
- Gutenberg Blocks add-on installed
Available Blocks
| Block | Purpose |
|---|---|
| Single Package | Display one package |
| Package Grid | Grid of multiple packages |
| Package List | List-style package display |
| Categories | Category listing/grid |
| Search | Download search form |
| User Dashboard | User downloads dashboard |
Adding Blocks
Method 1: Block Inserter
- Edit post/page
- Click + (Add block)
- Search “download” or “wpdm”
- Click desired block
Method 2: Slash Command
- Type
/in editor - Type “download” or “wpdm”
- Select block from list
Method 3: Block Library
- Click + (Add block)
- Browse Downloads category
- Select block
Single Package Block
Basic Usage
- Add Single Package block
- Search for package by title
- Select package
- Customize display options
┌─────────────────────────────────────────────────────────────┐ │ Single Package │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Package: │ │ [Software Pro v2.0 ▼] │ │ │ │ Template: │ │ [Link Template Default ▼] │ │ │ │ Preview: │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 📦 Software Pro v2.0 │ │ │ │ Version: 2.0 | Size: 45 MB | Downloads: 1,234 │ │ │ │ [Download] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘
Block Settings
Sidebar panel options:
| Setting | Options |
|---|---|
| Package | Search/select package |
| Template | Choose link template |
| Show Title | Yes/No |
| Show Thumbnail | Yes/No |
| Show Description | Yes/No |
Package Grid Block
Basic Usage
- Add Package Grid block
- Configure query settings
- Set layout options
- Customize appearance
┌─────────────────────────────────────────────────────────────┐ │ Package Grid │ ├─────────────────────────────────────────────────────────────┤ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ Package 1 │ │ Package 2 │ │ Package 3 │ │ │ │ [Download] │ │ [Download] │ │ [Download] │ │ │ └────────────┘ └────────────┘ └────────────┘ │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ Package 4 │ │ Package 5 │ │ Package 6 │ │ │ │ [Download] │ │ [Download] │ │ [Download] │ │ │ └────────────┘ └────────────┘ └────────────┘ │ └─────────────────────────────────────────────────────────────┘
Grid Settings
Query Settings:
┌─────────────────────────────────────────┐ │ Query │ ├─────────────────────────────────────────┤ │ Categories: [Software, Templates ▼] │ │ Tags: [featured ▼] │ │ Number: [9 ] │ │ Order by: [Date ▼] │ │ Order: [Descending ▼] │ └─────────────────────────────────────────┘
Layout Settings:
┌─────────────────────────────────────────┐ │ Layout │ ├─────────────────────────────────────────┤ │ Columns: [3 ▼] │ │ Gap: [24] px │ │ Template: [link-template-flavor ▼] │ │ Pagination: ☑ Show │ └─────────────────────────────────────────┘
Responsive Columns
Columns: ├─ Desktop: [4] columns ├─ Tablet: [2] columns └─ Mobile: [1] column
Package List Block
Usage
Display packages in list format:
┌─────────────────────────────────────────────────────────────┐ │ Package List │ ├─────────────────────────────────────────────────────────────┤ │ ├── Software Pro v2.0 45 MB [Download] │ │ ├── Template Pack 12 MB [Download] │ │ ├── Documentation 5 MB [Download] │ │ └── Icon Set 8 MB [Download] │ └─────────────────────────────────────────────────────────────┘
List Settings
| Setting | Options |
|---|---|
| Show Size | Yes/No |
| Show Downloads | Yes/No |
| Show Version | Yes/No |
| Dividers | Yes/No |
| Alternating Colors | Yes/No |
Categories Block
Category Grid
Display categories in grid:
┌─────────────────────────────────────────────────────────────┐ │ Categories │ ├─────────────────────────────────────────────────────────────┤ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ 📁 Software│ │ 📁 Docs │ │ 📁 Templates│ │ │ │ 45 items │ │ 23 items │ │ 12 items │ │ │ └────────────┘ └────────────┘ └────────────┘ │ └─────────────────────────────────────────────────────────────┘
Category Settings
┌─────────────────────────────────────────┐ │ Categories Settings │ ├─────────────────────────────────────────┤ │ Display: [All categories ▼] │ │ Show Count: ☑ Yes │ │ Show Empty: ☐ No │ │ Show Icon: ☑ Yes │ │ Columns: [3 ▼] │ │ Order by: [Name ▼] │ └─────────────────────────────────────────┘
Search Block
Search Form
┌─────────────────────────────────────────────────────────────┐ │ Download Search │ ├─────────────────────────────────────────────────────────────┤ │ [Search downloads... ] [🔍 Search] │ └─────────────────────────────────────────────────────────────┘
Search Settings
┌─────────────────────────────────────────┐ │ Search Settings │ ├─────────────────────────────────────────┤ │ Placeholder: [Search downloads... ] │ │ Button Text: [Search ] │ │ Results Page: [Search Results ▼] │ │ Show Categories: ☑ Yes │ │ Style: [Inline ▼] │ └─────────────────────────────────────────┘
Block Patterns
Pre-built Layouts
Access patterns:
- Click + (Add block)
- Click Patterns tab
- Select Downloads category
- Choose pattern
Available Patterns
| Pattern | Description |
|---|---|
| Download Hero | Featured package with description |
| Grid Gallery | 3×3 package grid |
| Category Navigation | Full-width category display |
| Downloads Sidebar | Package list for sidebar |
Block Styles
Applying Styles
- Select block
- In toolbar, click Styles icon
- Choose style variation
Single Package Styles
| Style | Appearance |
|---|---|
| Default | Standard card |
| Outlined | Border, no fill |
| Minimal | Text only |
| Featured | Highlighted/prominent |
Grid Styles
| Style | Appearance |
|---|---|
| Cards | Shadow cards |
| Flat | No shadow |
| Bordered | Grid lines |
| Masonry | Variable heights |
Customization
Color Settings
┌─────────────────────────────────────────┐ │ Colors │ ├─────────────────────────────────────────┤ │ Text: [■ #1e293b ] │ │ Background: [■ #ffffff ] │ │ Link: [■ #4f46e5 ] │ │ Button: [■ #4f46e5 ] │ └─────────────────────────────────────────┘
Typography
┌─────────────────────────────────────────┐ │ Typography │ ├─────────────────────────────────────────┤ │ Font Size: [Medium ▼] │ │ Line Height: [1.5 ] │ │ Font Weight: [Normal ▼] │ └─────────────────────────────────────────┘
Spacing
┌─────────────────────────────────────────┐ │ Spacing │ ├─────────────────────────────────────────┤ │ Padding: [24] px (all sides) │ │ Margin: [16] px top/bottom │ │ Block Gap: [24] px │ └─────────────────────────────────────────┘
Advanced Options
Additional CSS Class
Add custom classes:
Additional CSS class(es): [featured-downloads my-custom-class]
HTML Anchor
For linking:
HTML Anchor: downloads-section Link: yoursite.com/page/#downloads-section
Converting from Shortcodes
Shortcode to Block
Existing shortcode:
[wpdm_packages categories="software" items_per_page="9" cols="3"]
Equivalent block settings:
- Categories: Software
- Number: 9
- Columns: 3
Block Advantages
| Shortcode | Block |
|---|---|
| Text-based | Visual preview |
| Manual parameters | Dropdown options |
| No styling | Built-in style options |
| Requires documentation | Self-documenting UI |
Full Site Editing (FSE)
Using in Templates
For block themes:
- Go to Appearance > Editor
- Edit template (e.g., Single Download)
- Add WPDM blocks
- Save template
Template Parts
Create reusable download sections:
- Create new template part
- Add WPDM blocks
- Reuse across templates
Troubleshooting
Blocks Not Appearing
Causes:
- Add-on not activated
- JavaScript error
- Conflict with other plugin
Solutions:
- Verify add-on is active
- Check browser console for errors
- Deactivate other plugins to test
Preview Not Loading
Cause: REST API blocked
Solutions:
- Check REST API is accessible
- Verify user has permission
- Check security plugin settings
Styles Not Applying
Causes:
- Theme CSS conflict
- Caching
- Wrong selector
Solutions:
- Add more specific CSS
- Clear cache
- Check browser dev tools
Related Documentation
Last updated: January 2026
Applies to: WordPress Download Manager 7.x + Gutenberg Blocks Add-on