Developers · Gutenberg
Open Graph Preview block for WordPress
Preview how your page looks when shared on Twitter/X, Facebook, LinkedIn, and Slack.
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
Preview how your page looks when shared on Twitter/X, Facebook, LinkedIn, and Slack.
Inspector panels on this block: Page Info, Image Placeholder, Display, Twitter / X Colors, Facebook Colors, LinkedIn Colors, Slack Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Show platform” options: All platforms, Twitter / X, Facebook, LinkedIn, Slack; “Layout” options: Stacked (single column), Grid (2 columns).
Where to find it
Gutenberg inserter → Developers → search “Open Graph Preview” (block name `blockenberg/open-graph-preview` in block.json). Style it in the sidebar after insert.
How to use Open Graph Preview block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Open Graph Preview”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Page Info. Set “Page title”, “Description”, “URL (domain)”, “Site name”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Page title | Text field in the inspector. block.json default: Your Amazing Blog Post Title That Grabs Attention. Saved as `pageTitle`. |
| Description | Multiline text field in the inspector. block.json default: A compelling description of your content that will appear when shared on social media platforms. Keep it under 160 characters for best results.. Saved as `pageDescription`. |
| URL (domain) | Text field in the inspector. block.json default: yoursite.com. Saved as `pageUrl`. |
| Site name | Text field in the inspector. block.json default: My Website. Saved as `siteName`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show site name | On/off toggle in the inspector. On by default. Saved as `showSiteName`. |
| Emoji | Text field in the inspector. block.json default: 🚀. Saved as `imageEmoji`. |
| Image height | Numeric range control in the inspector. Range 80–320. block.json default: 180. Saved as `imageHeight`. |
| Show platform | Select control; the chosen value is saved on the block. Options: All platforms; Twitter / X; Facebook; LinkedIn; Slack. block.json default: all. Saved as `platform`. |
| Layout | Select control; the chosen value is saved on the block. Options: Stacked (single column); Grid (2 columns). block.json default: stacked. Saved as `layout`. |
| Wrapper border radius | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Preview how your page looks when shared on Twitter/X, Facebook, LinkedIn, and Slack — that is the job of Open Graph Preview, not a generic content block.
- Use it when you need the editor control labeled “Page title”, which exists on this block’s inspector.
- It matches pages about social, preview, share.
- Inserter grouping: docs sites, utilities, and developer landing pages.
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 Open Graph Preview block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Open Graph Preview”. It sits under Developers. After insert, open Page Info and set “Page title”, “Description”, “URL (domain)”, “Site name”.
What makes Open Graph Preview different from other Blockenberg blocks?
Preview how your page looks when shared on Twitter/X, Facebook, LinkedIn, and Slack. Inspector labels on this block include “Page title”, “Description”, “URL (domain)”, “Site name”.
Is the Open Graph Preview Gutenberg block free?
Yes. Open Graph Preview ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Open Graph Preview 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: Page Info, Image Placeholder, Display, Twitter / X Colors).
Related developers blocks
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Markdown Preview
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Open Graph Preview from the Gutenberg inserter.