Developers · Gutenberg
Browser Mockup block for WordPress
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
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 realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Inspector panels on this block: Browser Frame, Bookmarks, Page Sections (' + a.sections.length +, Frame Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Browser style” options: Chrome (light), Chrome (dark), Arc (sidebar), Minimal; “Type” options: Nav bar, Hero / Banner, Feature grid, Content / Text, CTA strip; “Title Font Weight” options: 400, 500, 600, 700.
Where to find it
Gutenberg inserter → Developers → search “Browser Mockup” (block name `blockenberg/browser-mockup` in block.json). Style it in the sidebar after insert.
How to use Browser Mockup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Browser Mockup”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Browser Frame. Set “Browser style”, “URL”, “Tab title”, “Show tabs”.
- 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 |
|---|---|
| Browser style | Select control; the chosen value is saved on the block. Options: Chrome (light); Chrome (dark); Arc (sidebar); Minimal. block.json default: chrome. Saved as `browserStyle`. |
| URL | Text field in the inspector. block.json default: https://yoursite.com. Saved as `url`. |
| Tab title | Text field in the inspector. block.json default: My Awesome App. Saved as `tabTitle`. |
| Show tabs | On/off toggle in the inspector. On by default. Saved as `showTabs`. |
| Show URL bar | On/off toggle in the inspector. On by default. Saved as `showURL`. |
| Show bookmarks bar | On/off toggle in the inspector. Off by default. Saved as `showBookmarks`. |
| Corner radius | Numeric range control in the inspector. Range 0–28. block.json default: 12. Saved as `borderRadius`. |
| Type | Select control; the chosen value is saved on the block. Options: Nav bar; Hero / Banner; Feature grid; Content / Text; CTA strip; Footer. Saved as `sections`. |
| Label / text | Text field in the inspector. Saved as `sections`. |
| Height (px) | Numeric range control in the inspector. Range 32–400. Saved as `sections`. |
| Font size | Numeric range control in the inspector. Range 10–20. block.json default: 13. Saved as `fontSize`. |
| Title Font Size (px) | Numeric range control in the inspector. Range 10–20. block.json default: 13. Saved as `titleFontSize`. |
| Title Font Weight | Select control; the chosen value is saved on the block. Options: 400; 500; 600; 700. Saved as `titleFontWeight`. |
| Title Line Height | Numeric range control in the inspector. Range 0.8–2.5. Saved as `titleLineHeight`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials — that is the job of Browser Mockup, not a generic content block.
- Use it when you need the editor control labeled “Browser style”, which exists on this block’s inspector.
- It matches pages about browser, mockup, screenshot.
- 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 Browser Mockup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Browser Mockup”. It sits under Developers. After insert, open Browser Frame and set “Browser style”, “URL”, “Tab title”, “Show tabs”.
What makes Browser Mockup different from other Blockenberg blocks?
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials. Inspector labels on this block include “Browser style”, “URL”, “Tab title”, “Show tabs”.
Is the Browser Mockup Gutenberg block free?
Yes. Browser Mockup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Browser 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: Browser Frame, Bookmarks, Page Sections (' + a.sections.length +, Frame Colors).
Related developers blocks
Markdown Preview
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
Open Graph Preview
Preview how your page looks when shared on Twitter/X, Facebook, LinkedIn, and Slack.
Terminal Mockup
A realistic terminal / CLI window with typewriter animation, coloured prompt, command & output lines. Great for dev-tool landing pages.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Browser Mockup from the Gutenberg inserter.