Gutenberg Blocks
Overview
The Gutenberg Blocks add-on also known as WPDM Editor Blocks 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
Video Tutorial
Available Blocks
| Block | Purpose |
|---|---|
| Single Package | Display one package |
| Packages | Display multiple packages with sorting options |
| All Downloads Table | Builds all downloads table visually (Pro feature ) |
| Categories | Category listing/grid |
| Search Result | Download search form |
| User Dashboard | User downloads dashboard |
| Dropzone | Create a file upload area (Pro feature) |
| Category Cards | Card view for selected wpdm categories |
| Dashboard | Add user dashboard |
| Login Form | Add login form |
| Sign up Form | Add Sign up form |
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 |
Packages Block
Use this block to display a list/grid of selected download packages with filtering and layout controls.
Title: Adds a custom heading above the package list.
Search Keyword: Filters packages dynamically by keyword (matches package title/content).
Include Categories: Displays only packages from selected categories.
Include Children: If enabled, packages from child categories of selected categories will also be included.
Category Match: Defines how multiple selected categories are matched:
- Match Any – Packages from any selected category.
- Match All – Packages must belong to all selected categories.
Exclude Categories: Excludes packages from selected categories.
Tags: Displays packages that contain the specified tags (comma separated).
Exclude Packages with Tags: Hides packages that contain the specified tags.
Author: Displays packages created by specific author IDs (comma separated).
Exclude Package from Authors: Excludes packages created by specified author IDs.
Toolbar: Shows or hides the frontend filter toolbar (search, sorting, etc.).
Toolbar Grid Assignment: Defines column layout distribution for toolbar elements (grid ratio configuration).
Order By: Controls how packages are sorted:
- Publish Date
- Title
- Download Count
- Views
- Update Date
- Price
Order: Sets sorting direction:
- Ascending (ASC)
- Descending (DESC)
Items Per Page: Limits number of packages displayed per page.
Link Template: Selects the package page template used for links and previews.
Pagination: Enables or disables pagination.
Columns: Defines number of columns in grid layout (for grid view).
Asynchronous Request: If enabled, loads packages via AJAX without refreshing the page.
Advanced: Contains additional advanced configuration options (if available).
Basic Usage
- Add packages download table block
- Configure query settings
- Set layout options
- Customize appearance
Table Settings
Query Settings:
Layout Settings:
Responsive Columns
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
Applies to: WordPress Download Manager 7.x + Gutenberg Blocks Add-on