PDF Embed Block is a lightweight, high-performance, and fully responsive Gutenberg block and shortcode plugin for WordPress. It allows your website visitors to view and embed PDF files easily in your posts or pages using the official Adobe PDF Embed API.
Everything you need to add a seamless PDF viewer to your website:
- Adobe PDF Embed Engine: Renders high-fidelity, interactive, and crisp vector-drawn PDF files directly on your page.
- 2 Embed Modes:
- Sized Container: Embed the PDF in a designated width and height container.
- In-Line: Display the PDF inline with the webpage layout.
- Alignment Controls: Align the PDF container to Left, Center, Right, Wide, or Full Width.
- Dimension Customization: Configure custom width (e.g.
100%) and height (e.g.469px) settings in the block sidebar. - Universal Shortcode API: Embed PDFs anywhere on your site using simple shortcodes.
- Uninstall Data Cleanup: Toggle database cleaning options to wipe custom posts, API keys, and plugin settings when the plugin is deleted.
Unlock advanced styling and viewer control:
- Show Download PDF Toggle: Allow or restrict visitors from downloading the PDF file directly.
- Show Print PDF Toggle: Allow or restrict visitors from printing the PDF directly.
- Show Fullscreen Mode Toggle: Allow or restrict fullscreen reading mode.
- Layout Spacing Controls: Custom padding and margins for your PDF viewer.
- Custom Borders & Shadows: Design beautiful containers with custom borders (style, width, color, radius) and multi-layered box shadows.
The plugin registers a modern Gutenberg block:
| Block Title | Block Name (Slug) | Description |
|---|---|---|
| PDF Embed | peb/pdf-embed |
Adds a customizable PDF viewer block with design and embed mode controls. |
To separate configurations cleanly, the plugin registers a custom post type:
pdf_embed(PDF Embed): Manages saved block configurations and PDF files, allowing them to be loaded anywhere via shortcodes.
Embed any saved PDF Embed configuration anywhere on your site:
[pdf_embed id="123"]Code Reference: Defined in ShortCode.php.
- Adobe PDF Embed API: The underlying rendering engine that provides high-fidelity viewer controls.
- Frontend JS/React: React is used to drive the custom Gutenberg block interfaces, custom sidebars, and admin dashboard fields.
- Build System: Gulp handles packaging and ZIP compilation, while Webpack via
@wordpress/scriptshandles block transpilation and code splitting. - bpl-tools (Shared Utility): A shared utility library providing admin dashboard components and common Gutenberg editor controls.
- Source/GitHub: bPlugins/bpl-tools
- License: GPL-2.0-or-later
- External Services: Connects to bPlugins and Freemius services for product data and checkout functionality.
/src: Active React components, SCSS styling, and Webpack entry files./pdf-embed: Gutenberg block edit/save templates, settings panels, display modes, and SDK wrapper./bplugins-admin: React components and layouts for the backend plugin settings page./utils: Common helper functions and icons.
/includes: Core PHP controllers, namespace loaders, and class managers.- core.php: Main plugin bootstrapper and loader.
- Init.php: Registers block types and custom post types.
- AdminMenu.php: Creates submenu page for Help & Demos and renders the settings dashboard wrapper.
- Enqueue.php: Enqueues editor blocks scripts, Adobe SDK scripts, and dashboard style assets.
- ShortCode.php: Handles shortcode rendering.
- CustomColumn.php: Appends a quick copy-to-clipboard shortcode column in the PDF CPT admin table.
- RestAPI.php: Processes backend AJAX settings requests securely.
/build: Compiled and bundled files (automatically generated via Webpack).index.php: The main executable and plugin bootstrapper.uninstall.php: Database cleaning script executed on plugin deletion.
- Install development dependencies:
npm install
- Start development hot-rebuild mode:
npm start
- Compile minified assets for release:
npm run build
- Package plugin into a clean distribution ZIP file:
npm run make-zip
- Editor Side: Block configurations are configured via React panels in
/src/pdf-embedand stored as serialized block attribute comments in the post content database. - PHP Frontend Rendering: When a shortcode or block renders, the server parses the attributes and outputs a DOM container with a
data-propsJSON string. - JS Initialization: On DOMContentLoaded, the frontend script view.js parses
data-props, mounts the React component, and renders the PDF using the Adobe PDF Embed API within the specified display mode (Sized Container, In-Line, Lightbox, or Full Window).
Developed with ❤️ by bPlugins