Layout · Gutenberg
Print / PDF Button block for WordPress
A print button that opens the browser print dialog (Save as PDF included). Supports custom icons via the shared icon picker.
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
A print button that opens the browser print dialog (Save as PDF included). Supports custom icons via the shared icon picker.
Inspector panels on this block: Content, Icon, Layout, Size & shape. Those titles come from index.js, not from a shared template.
Behavior controls: “ARIA label (optional)” (Overrides the accessible name when the visible label is empty); “Icon position” options: Left, Right; “Placement” options: Inline (in content), Floating (fixed); “Layout — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Layout → search “Print / PDF Button” (block name `blockenberg/print-button` in block.json). Style it in the sidebar after insert.
How to use Print / PDF Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Print / PDF Button”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Content. Set “Show label”, “Button label”, “ARIA label (optional)”, “Show icon”.
- Check the published page. The view script reads HTML data attributes: data-bkbg-print. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Button label | Text field in the inspector. block.json default: Print / Save PDF. Saved as `label`. |
| ARIA label (optional) | Text field in the inspector. Overrides the accessible name when the visible label is empty. Saved as `ariaLabel`. |
| Show icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon position | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `iconPosition`. |
| Icon size (px) | Numeric range control in the inspector. Range 12–40. block.json default: 18. Saved as `iconSize`. |
| Placement | Select control; the chosen value is saved on the block. Options: Inline (in content); Floating (fixed). block.json default: inline. Saved as `layout`. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `alignBtn`. |
| Screen position | Select control; the chosen value is saved on the block. Options: Bottom right; Bottom left; Bottom center; Top right; Top left. block.json default: bottom-right. Saved as `position`. |
| Horizontal offset (px) | Numeric range control in the inspector. Range 8–120. block.json default: 24. Saved as `offsetX`. |
| Vertical offset (px) | Numeric range control in the inspector. Range 8–120. block.json default: 24. Saved as `offsetY`. |
| Z-index | Numeric range control in the inspector. Range 100–99999. block.json default: 9990. Saved as `zIndex`. |
| Horizontal padding (px) | Numeric range control in the inspector. Range 8–64. block.json default: 20. Saved as `paddingH`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 4–40. block.json default: 12. Saved as `paddingV`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–999. block.json default: 8. Saved as `borderRadius`. |
| Border width (px) | Numeric range control in the inspector. Range 0–6. block.json default: 0. Saved as `borderWidth`. |
| Drop shadow | On/off toggle in the inspector. On by default. Saved as `shadow`. |
| Button text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBtn`. |
| Colors — Background | Color control in the inspector. block.json default: #1e293b. Saved as `bgColor`. |
| Text / icon | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Hover background | Color control in the inspector. block.json default: #0f172a. Saved as `hoverBg`. |
| Hover text / icon | Color control in the inspector. block.json default: #ffffff. Saved as `hoverColor`. |
| Colors — Border | Color control in the inspector. block.json default: #1e293b. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-bkbg-print.
- Print uses the browser print dialog (Save as PDF there). No server-side PDF library.
When this is the right block
- A print button that opens the browser print dialog (Save as PDF included). Supports custom icons via the shared icon picker — that is the job of Print / PDF Button, not a generic content block.
- Use it when you need the editor control labeled “Show label”, which exists on this block’s inspector.
- It matches pages about print, pdf, save.
- Inserter grouping: page structure, sections, and composition.
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 Print / PDF Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Print / PDF Button”. It sits under Layout. After insert, open Content and set “Show label”, “Button label”, “ARIA label (optional)”, “Show icon”.
Does Print / PDF Button generate a PDF on the server?
No. It opens the browser print dialog. Visitors can choose Save as PDF there.
Is the Print / PDF Button Gutenberg block free?
Yes. Print / PDF Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Print / PDF Button 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: Content, Icon, Layout, Size & shape).
Related layout blocks
Scroll To Top
Fixed scroll-to-top button that appears after scrolling down the page.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Print / PDF Button from the Gutenberg inserter.