Media · Gutenberg
File Download block for WordPress
Styled file download card with icon, file name, size, description, and call-to-action button.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Styled file download card with icon, file name, size, description, and call-to-action button.
Inspector panels on this block: File, Icon, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “File URL (manual)” (Auto-filled from media or enter a direct URL).
File Download has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Media → search “File Download” (block name `blockenberg/file-download` in block.json). Style it in the sidebar after insert.
How to use File Download block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “File Download”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open File. Set “File Name”, “File Size (display)”, “File Type / Badge”, “File URL (manual)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| File Name | Text field in the inspector. block.json default: Annual Report 2025.pdf. Saved as `fileName`. |
| File Size (display) | Text field in the inspector. block.json default: 2.4 MB. Saved as `fileSize`. |
| File Type / Badge | Text field in the inspector. block.json default: PDF. Saved as `fileType`. |
| File URL (manual) | Text field in the inspector. Auto-filled from media or enter a direct URL. Saved as `fileUrl`. |
| Description | Text field in the inspector. block.json default: Download and review our complete annual report for the year 2025.. Saved as `description`. |
| Button Label | Text field in the inspector. block.json default: Download. Saved as `btnLabel`. |
| Open In New Tab | On/off toggle in the inspector. Off by default. Saved as `openInNew`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Box Size (px) | Numeric range control in the inspector. Range 32–96. block.json default: 48. Saved as `iconSize`. |
| File Name (Typo Name) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoName`. |
| Description (Typo Desc) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Meta | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoMeta`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| Typography — Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBtn`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btnRadius`. |
| Type Badge | On/off toggle in the inspector. On by default. Saved as `badgeEnabled`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Icon BG | Color control in the inspector. block.json default: #ede9fc. Saved as `iconBg`. |
| Icon Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| File Name Color | Color control in the inspector. block.json default: #1f2937. Saved as `nameColor`. |
| Meta Color | Color control in the inspector. block.json default: #6b7280. Saved as `metaColor`. |
| Description Color | Color control in the inspector. block.json default: #4b5563. Saved as `descColor`. |
| Button BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Badge BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
When this is the right block
- Styled file download card with icon, file name, size, description, and call-to-action button — that is the job of File Download, not a generic content block.
- Use it when you need the editor control labeled “File Name”, which exists on this block’s inspector.
- It matches pages about download, file, attachment.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the File Download block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “File Download”. It sits under Media. After insert, open File and set “File Name”, “File Size (display)”, “File Type / Badge”, “File URL (manual)”.
What makes File Download different from other Blockenberg blocks?
Styled file download card with icon, file name, size, description, and call-to-action button. Inspector labels on this block include “File Name”, “File Size (display)”, “File Type / Badge”, “File URL (manual)”.
Is the File Download Gutenberg block free?
Yes. File Download ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style File Download to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: File, Icon, Card Style).
Related media blocks
PDF Embed
Embed a PDF document in an iframe with optional download button and toolbar controls.
Audio Player
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Device Mockup
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert File Download from the Gutenberg inserter.