Media · Gutenberg
Embed Preview block for WordPress
Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice.
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
Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice.
Inspector panels on this block: Embed Content, Thumbnail, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Provider” options: Custom / Other, Figma, Loom, YouTube, Typeform; “CTA Style” options: Filled, Outline, Ghost; “Aspect ratio” options: 16:9 (widescreen), 4:3 (classic), 1:1 (square), 3:2, 21:9 (ultra-wide).
Where to find it
Gutenberg inserter → Media → search “Embed Preview” (block name `blockenberg/embed-preview` in block.json). Style it in the sidebar after insert.
How to use Embed Preview block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Embed Preview”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Embed Content. Set “Provider”, “Embed URL”, “Show title”, “Embed Content — Title”.
- 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 |
|---|---|
| Provider | Select control; the chosen value is saved on the block. Options: Custom / Other; Figma; Loom; YouTube; Typeform; Calendly; Miro; Notion; Airtable. block.json default: custom. Saved as `embedProvider`. |
| Embed URL | Text field in the inspector. Saved as `embedUrl`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Embed Content — Title | Text field in the inspector. block.json default: Open in Figma. Saved as `embedTitle`. |
| Show description | On/off toggle in the inspector. Off by default. Saved as `showDescription`. |
| Description | Text field in the inspector. Saved as `description`. |
| CTA Button Label | Text field in the inspector. block.json default: Click to open. Saved as `ctaLabel`. |
| CTA Style | Select control; the chosen value is saved on the block. Options: Filled; Outline; Ghost. block.json default: filled. Saved as `ctaStyle`. |
| Show provider badge | On/off toggle in the inspector. On by default. Saved as `showBrand`. |
| Show loading bar | On/off toggle in the inspector. On by default. Saved as `showLoadingBar`. |
| Show privacy note | On/off toggle in the inspector. On by default. Saved as `showPrivacyNote`. |
| Privacy note text | Text field in the inspector. block.json default: No data is loaded until you click.. Saved as `privacyNote`. |
| Aspect ratio | Select control; the chosen value is saved on the block. Options: 16:9 (widescreen); 4:3 (classic); 1:1 (square); 3:2; 21:9 (ultra-wide); Custom height. block.json default: 16-9. Saved as `aspectRatio`. |
| Custom height (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 480. Saved as `customHeight`. |
| Max width (px) | Numeric range control in the inspector. Range 400–1400. block.json default: 900. Saved as `maxWidth`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Overlay opacity (%) | Numeric range control in the inspector. Range 0–95. block.json default: 55. Saved as `overlayOpacity`. |
| iframe sandbox (advanced) | Text field in the inspector. block.json default: allow-scripts allow-same-origin allow-forms allow-popups allow-presentation. Saved as `iframeSandbox`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Description (Typo Desc) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| CTA Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoCta`. |
| Overlay Color | Color control in the inspector. block.json default: #0f172a. Saved as `overlayBg`. |
| CTA Background | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Title Color | Color control in the inspector. block.json default: #f8fafc. Saved as `titleColor`. |
| Description Color | Color control in the inspector. block.json default: #cbd5e1. Saved as `descColor`. |
| Privacy Note Color | Color control in the inspector. block.json default: #94a3b8. Saved as `privacyColor`. |
| Border Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice — that is the job of Embed Preview, not a generic content block.
- Use it when you need the editor control labeled “Provider”, which exists on this block’s inspector.
- It matches pages about embed, figma, loom.
- 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 Embed Preview block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Embed Preview”. It sits under Media. After insert, open Embed Content and set “Provider”, “Embed URL”, “Show title”, “Embed Content — Title”.
What makes Embed Preview different from other Blockenberg blocks?
Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice. Inspector labels on this block include “Provider”, “Embed URL”, “Show title”, “Embed Content — Title”.
Is the Embed Preview Gutenberg block free?
Yes. Embed Preview ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Embed 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: Embed Content, Thumbnail, Layout).
Related media blocks
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
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.
PDF Embed
Embed a PDF document in an iframe with optional download button and toolbar controls.
Sticky Video
Video player that minimises into a floating corner player when scrolled past, with close and restore controls.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
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 Embed Preview from the Gutenberg inserter.