Media · Gutenberg
Device Mockup block for WordPress
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
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
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Inspector panels on this block: Device, Screenshot / Image, 3D Tilt & Shadow, Phone / Tablet Details, Browser Details. Those titles come from index.js, not from a shared template.
Behavior controls: “Device Type” options: Phone, Tablet, Laptop, Browser; “Frame Color” options: Silver, Space Gray, Gold, White, Black.
Where to find it
Gutenberg inserter → Media → search “Device Mockup” (block name `blockenberg/device-mockup` in block.json). Style it in the sidebar after insert.
How to use Device Mockup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Device Mockup”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Device. Set “Device Type”, “Frame Color”, “Max Width (px)”, “Scale (%)”.
- Check the published page. The view script reads HTML data attributes: data-align, data-browser-chrome, data-browser-url, data-device, data-frame-color, data-frame-custom, data-frame-stroke, data-home-ind. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Device Type | Select control; the chosen value is saved on the block. Options: Phone; Tablet; Laptop; Browser. block.json default: phone. Saved as `deviceType`. |
| Frame Color | Select control; the chosen value is saved on the block. Options: Silver; Space Gray; Gold; White; Black; Custom. block.json default: silver. Saved as `frameColor`. |
| Max Width (px) | Numeric range control in the inspector. Range 120–900. block.json default: 380. Saved as `maxWidth`. |
| Scale (%) | Numeric range control in the inspector. Range 20–200. block.json default: 100. Saved as `scale`. |
| Frame Border Width (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `frameStroke`. |
| Outer Radius (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `outerRadius`. |
| Screen Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `screenRadius`. |
| Tilt Y (rotateX °) | Numeric range control in the inspector. Range -30–30. block.json default: 0. Saved as `tiltX`. |
| Tilt X (rotateY °) | Numeric range control in the inspector. Range -30–30. block.json default: 0. Saved as `tiltY`. |
| Drop Shadow | On/off toggle in the inspector. On by default. Saved as `shadow`. |
| Shadow Intensity (%) | Numeric range control in the inspector. Range 5–70. block.json default: 30. Saved as `shadowIntensity`. |
| Reflection | On/off toggle in the inspector. Off by default. Saved as `showReflection`. |
| Hover Lift Effect | On/off toggle in the inspector. On by default. Saved as `hoverLift`. |
| Animate on Scroll | On/off toggle in the inspector. Off by default. Saved as `animateOnScroll`. |
| Show Notch | On/off toggle in the inspector. On by default. Saved as `showNotch`. |
| Show Home Indicator | On/off toggle in the inspector. On by default. Saved as `showHomeIndicator`. |
| Show Browser Chrome | On/off toggle in the inspector. On by default. Saved as `showBrowserChrome`. |
| URL Bar Text | Text field in the inspector. block.json default: https://example.com. Saved as `browserUrl`. |
| URL bar font size (px) | Numeric range control in the inspector. Range 9–16. block.json default: 11. Saved as `urlBarFontSize`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-align, data-browser-chrome, data-browser-url, data-device, data-frame-color, data-frame-custom, data-frame-stroke, data-home-ind.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window — that is the job of Device Mockup, not a generic content block.
- Use it when you need the editor control labeled “Device Type”, which exists on this block’s inspector.
- It matches pages about device, mockup, phone.
- 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 Device Mockup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Device Mockup”. It sits under Media. After insert, open Device and set “Device Type”, “Frame Color”, “Max Width (px)”, “Scale (%)”.
What makes Device Mockup different from other Blockenberg blocks?
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window. Inspector labels on this block include “Device Type”, “Frame Color”, “Max Width (px)”, “Scale (%)”.
Is the Device Mockup Gutenberg block free?
Yes. Device Mockup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Device Mockup 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: Device, Screenshot / Image, 3D Tilt & Shadow, Phone / Tablet Details).
Related media blocks
Embed Preview
Privacy-friendly click-to-load embed with a custom thumbnail, CTA overlay, and optional privacy notice.
Image Placeholder
Generate custom placeholder images using Canvas. Set dimensions, colors, text, and download or copy the data URI.
Audio Player
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Device Mockup from the Gutenberg inserter.