Media · Gutenberg
PDF Embed block for WordPress
Embed a PDF document in an iframe with optional download button and toolbar controls.
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
Embed a PDF document in an iframe with optional download button and toolbar controls.
Inspector panels on this block: PDF Source, Display, Download Button, Fallback. Those titles come from index.js, not from a shared template.
PDF Embed 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 “PDF Embed” (block name `blockenberg/pdf-embed` in block.json). Style it in the sidebar after insert.
How to use PDF Embed block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “PDF Embed”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open PDF Source. Set “PDF URL”, “Document title (for accessibility)”, “Height (px)”, “Width (%)”.
- 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 |
|---|---|
| PDF URL | Text field in the inspector. Saved as `pdfUrl`. |
| Document title (for accessibility) | Text field in the inspector. block.json default: PDF Document. Saved as `pdfTitle`. |
| Height (px) | Numeric range control in the inspector. Range 200–1600. block.json default: 600. Saved as `height`. |
| Width (%) | Numeric range control in the inspector. Range 40–100. block.json default: 100. Saved as `width`. |
| Show PDF toolbar | On/off toggle in the inspector. On by default. Saved as `showToolbar`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `borderRadius`. |
| Border width (px) | Numeric range control in the inspector. Range 0–8. block.json default: 1. Saved as `borderWidth`. |
| Show download button | On/off toggle in the inspector. On by default. Saved as `showDownload`. |
| Button label | Text field in the inspector. block.json default: Download PDF. Saved as `downloadLabel`. |
| Fallback message | Text field in the inspector. block.json default: Your browser does not support inline PDF preview.. Saved as `fallbackMessage`. |
| Show fallback download link | On/off toggle in the inspector. On by default. Saved as `showFallbackLink`. |
| Frame background | Color control in the inspector. block.json default: #f9fafb. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Download button bg | Color control in the inspector. block.json default: #2563eb. Saved as `downloadBtnBg`. |
| Download button text | Color control in the inspector. block.json default: #ffffff. Saved as `downloadBtnColor`. |
When this is the right block
- Embed a PDF document in an iframe with optional download button and toolbar controls — that is the job of PDF Embed, not a generic content block.
- Use it when you need the editor control labeled “PDF URL”, which exists on this block’s inspector.
- It matches pages about pdf, embed, document.
- 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 PDF Embed block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “PDF Embed”. It sits under Media. After insert, open PDF Source and set “PDF URL”, “Document title (for accessibility)”, “Height (px)”, “Width (%)”.
What makes PDF Embed different from other Blockenberg blocks?
Embed a PDF document in an iframe with optional download button and toolbar controls. Inspector labels on this block include “PDF URL”, “Document title (for accessibility)”, “Height (px)”, “Width (%)”.
Is the PDF Embed Gutenberg block free?
Yes. PDF Embed ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style PDF Embed 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: PDF Source, Display, Download Button, Fallback).
Related media blocks
File Download
Styled file download card with icon, file name, size, description, and call-to-action button.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Embed Preview
Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice.
Gallery Showcase
Featured image with a clickable thumbnail strip — click any thumbnail to swap the main large view. Perfect for portfolio details, product image galleries, and case study illustrations.
Sticky Video
Video player that minimises into a floating corner player when scrolled past, with close and restore controls.
Video Facade
Performance-optimized video thumbnail that loads the actual YouTube or Vimeo player only on click. Eliminates heavy iframes on page load, improving Core Web Vitals. Supports custom thumbnails, overlay text, and animated play buttons.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert PDF Embed from the Gutenberg inserter.