Developers · Gutenberg
Terminal Mockup block for WordPress
A realistic terminal / CLI window with typewriter animation, coloured prompt, command & output lines. Great for dev-tool landing pages.
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
A realistic terminal / CLI window with typewriter animation, coloured prompt, command & output lines. Great for dev-tool landing pages.
Inspector panels on this block: Terminal Settings, Typewriter Animation, Appearance, Color Overrides, Lines. Those titles come from index.js, not from a shared template.
Behavior controls: “Color theme” options: Dark (Catppuccin), Monokai, Ocean (GitHub), Dracula, Light; “Line type” options: $ Command, Output, # Comment, Blank line.
Where to find it
Gutenberg inserter → Developers → search “Terminal Mockup” (block name `blockenberg/terminal-mockup` in block.json). Style it in the sidebar after insert.
How to use Terminal Mockup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Terminal Mockup”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Terminal Settings. Set “Color theme”, “Show window chrome (dots)”, “Window tab title”, “Prompt host”.
- Check the published page. The view script reads HTML data attributes: data-bkbg-fulltext, data-cursor, data-speed, data-typewriter. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Color theme | Select control; the chosen value is saved on the block. Options: Dark (Catppuccin); Monokai; Ocean (GitHub); Dracula; Light. block.json default: dark. Saved as `theme`. |
| Show window chrome (dots) | On/off toggle in the inspector. On by default. Saved as `showChrome`. |
| Window tab title | Text field in the inspector. block.json default: bash. Saved as `windowTitle`. |
| Prompt host | Text field in the inspector. block.json default: user@server. Saved as `promptHost`. |
| Prompt symbol | Text field in the inspector. block.json default: $. Saved as `promptSymbol`. |
| Show line numbers | On/off toggle in the inspector. Off by default. Saved as `showLineNumbers`. |
| Show blinking cursor | On/off toggle in the inspector. On by default. Saved as `showCursor`. |
| Typewriter mode (animates on scroll) | On/off toggle in the inspector. On by default. Saved as `typewriterMode`. |
| Typing speed (ms/character) | Numeric range control in the inspector. Range 10–200. block.json default: 40. Saved as `typewriterSpeed`. |
| Max width (px) | Numeric range control in the inspector. Range 300–1200. block.json default: 700. Saved as `maxWidth`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Window padding (px) | Numeric range control in the inspector. Range 8–48. block.json default: 20. Saved as `windowPadding`. |
| Terminal background | Color control in the inspector. Saved as `termBg`. |
| Command text | Color control in the inspector. Saved as `commandColor`. |
| Output text | Color control in the inspector. Saved as `outputColor`. |
| Comment text | Color control in the inspector. Saved as `commentColor`. |
| Prompt | Color control in the inspector. Saved as `promptColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingBottom`. |
| Line type | Select control; the chosen value is saved on the block. Options: $ Command; Output; # Comment; Blank line. |
| Lines — Text | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-bkbg-fulltext, data-cursor, data-speed, data-typewriter.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- A realistic terminal / CLI window with typewriter animation, coloured prompt, command & output lines. Great for dev-tool landing pages — that is the job of Terminal Mockup, not a generic content block.
- Use it when you need the editor control labeled “Color theme”, which exists on this block’s inspector.
- It matches pages about terminal, cli, command.
- 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 Terminal Mockup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Terminal Mockup”. It sits under Developers. After insert, open Terminal Settings and set “Color theme”, “Show window chrome (dots)”, “Window tab title”, “Prompt host”.
What makes Terminal Mockup different from other Blockenberg blocks?
A realistic terminal / CLI window with typewriter animation, coloured prompt, command & output lines. Great for dev-tool landing pages. Inspector labels on this block include “Color theme”, “Show window chrome (dots)”, “Window tab title”, “Prompt host”.
Is the Terminal Mockup Gutenberg block free?
Yes. Terminal Mockup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Terminal 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: Terminal Settings, Typewriter Animation, Appearance, Color Overrides).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Code Comparison
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
Code Playground
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Terminal Mockup from the Gutenberg inserter.