Developers · Gutenberg
Code Tabs block for WordPress
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
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
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
Inspector panels on this block: Code Tabs, Display. Those titles come from index.js, not from a shared template.
Behavior controls: “Language” options: JavaScript, TypeScript, Python, PHP, Ruby; “Theme” options: Dark (default), Monokai, Dracula, GitHub Dark, Nord; “Tab Style” options: Pills, Buttons, Underline; “Tab Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Developers → search “Code Tabs” (block name `blockenberg/code-tabs` in block.json). Style it in the sidebar after insert.
How to use Code Tabs block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Code Tabs”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Code Tabs. Set “Tab Label”, “Language”, “File Name (optional)”, “Theme”.
- Check the published page. The view script reads HTML data attributes: data-code, data-opts, data-rendered, data-tab-style. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tab Label | Text field in the inspector. |
| Language | Select control; the chosen value is saved on the block. Options: JavaScript; TypeScript; Python; PHP; Ruby; Go; Rust; Java; C#; C++. |
| File Name (optional) | Text field in the inspector. |
| Theme | Select control; the chosen value is saved on the block. Options: Dark (default); Monokai; Dracula; GitHub Dark; Nord; Light; GitHub Light; Solarized Light. block.json default: dark. Saved as `theme`. |
| Tab Style | Select control; the chosen value is saved on the block. Options: Pills; Buttons; Underline. block.json default: pills. Saved as `tabStyle`. |
| Tab Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `tabAlign`. |
| Show Line Numbers | On/off toggle in the inspector. On by default. Saved as `showLineNumbers`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopyButton`. |
| Show File Name | On/off toggle in the inspector. On by default. Saved as `showFileName`. |
| Show Language Badge | On/off toggle in the inspector. On by default. Saved as `showLangBadge`. |
| Max Height (0 = auto) | Numeric range control in the inspector. Range 0–800. block.json default: 0. Saved as `maxHeight`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Page Background | Color control in the inspector. Saved as `bgColor`. |
| Header Background | Color control in the inspector. block.json default: #1e1e2e. Saved as `headerBg`. |
| Code Background | Color control in the inspector. block.json default: #13131f. Saved as `codeBg`. |
| Active Tab Background | Color control in the inspector. block.json default: #6366f1. Saved as `tabActiveBg`. |
| Active Tab Text | Color control in the inspector. block.json default: #ffffff. Saved as `tabActiveColor`. |
| Idle Tab Background | Color control in the inspector. block.json default: #2d2d3f. Saved as `tabIdleBg`. |
| Idle Tab Text | Color control in the inspector. block.json default: #a0a0c0. Saved as `tabIdleColor`. |
| Line Number Color | Color control in the inspector. block.json default: #4a4a6a. Saved as `lineNumColor`. |
| Copy Button Background | Color control in the inspector. block.json default: #2d2d3f. Saved as `copyBg`. |
| Copy Button Text | Color control in the inspector. block.json default: #a0a0c0. Saved as `copyColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-code, data-opts, data-rendered, data-tab-style.
- Keyboard handlers move focus between items.
When this is the right block
- Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more — that is the job of Code Tabs, not a generic content block.
- Use it when you need the editor control labeled “Tab Label”, which exists on this block’s inspector.
- It matches pages about code, tabs, syntax.
- 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 Code Tabs block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Code Tabs”. It sits under Developers. After insert, open Code Tabs and set “Tab Label”, “Language”, “File Name (optional)”, “Theme”.
What makes Code Tabs different from other Blockenberg blocks?
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more. Inspector labels on this block include “Tab Label”, “Language”, “File Name (optional)”, “Theme”.
Is the Code Tabs Gutenberg block free?
Yes. Code Tabs ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Code Tabs 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: Code Tabs, Display).
Related developers blocks
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.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
JSON Formatter
Validate, format (pretty-print), and minify JSON with syntax highlighting and one-click copy.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Code Tabs from the Gutenberg inserter.