Effects · Gutenberg
Perspective Device block for WordPress
CSS device mockup (browser, phone, tablet, laptop) with screenshot inside — perfect for hero sections.
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
CSS device mockup (browser, phone, tablet, laptop) with screenshot inside — perfect for hero sections.
Inspector panels on this block: Screenshot, Device. Those titles come from index.js, not from a shared template.
Behavior controls: “Device type” options: Browser window, Phone, Tablet, Laptop; “Perspective” options: Flat, Tilt left, Tilt right, Float (animated); “Device theme” options: Light, Dark; “Device — Alignment” options: Left, Center, Right.
Perspective Device 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 → Effects → search “Perspective Device” (block name `blockenberg/perspective-device` in block.json). Style it in the sidebar after insert.
How to use Perspective Device block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Perspective Device”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Screenshot. Set “Alt text”, “Device type”, “Perspective”, “Device theme”.
- 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 |
|---|---|
| Alt text | Text field in the inspector. block.json default: App screenshot. Saved as `screenshotAlt`. |
| Device type | Select control; the chosen value is saved on the block. Options: Browser window; Phone; Tablet; Laptop. block.json default: browser. Saved as `deviceType`. |
| Perspective | Select control; the chosen value is saved on the block. Options: Flat; Tilt left; Tilt right; Float (animated). block.json default: flat. Saved as `perspective`. |
| Device theme | Select control; the chosen value is saved on the block. Options: Light; Dark. block.json default: light. Saved as `deviceTheme`. |
| Show shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Show reflection | On/off toggle in the inspector. Off by default. Saved as `showReflection`. |
| Max width (px) | Numeric range control in the inspector. Range 320–1300. block.json default: 860. Saved as `maxWidth`. |
| Device — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingBottom`. |
| Section bg | Color control in the inspector. Saved as `sectionBg`. |
| Frame color | Color control in the inspector. Saved as `frameColor`. |
| Screen bg | Color control in the inspector. block.json default: #f1f5f9. Saved as `screenBg`. |
When this is the right block
- CSS device mockup (browser, phone, tablet, laptop) with screenshot inside — perfect for hero sections — that is the job of Perspective Device, not a generic content block.
- Use it when you need the editor control labeled “Alt text”, which exists on this block’s inspector.
- It matches pages about device, mockup, browser.
- Inserter grouping: motion, overlays, and visual treatments.
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 Perspective Device block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Perspective Device”. It sits under Effects. After insert, open Screenshot and set “Alt text”, “Device type”, “Perspective”, “Device theme”.
What makes Perspective Device different from other Blockenberg blocks?
CSS device mockup (browser, phone, tablet, laptop) with screenshot inside — perfect for hero sections. Inspector labels on this block include “Alt text”, “Device type”, “Perspective”, “Device theme”.
Is the Perspective Device Gutenberg block free?
Yes. Perspective Device ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Perspective Device 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: Screenshot, Device).
Related effects blocks
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Floating Stats
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Perspective Device from the Gutenberg inserter.