Developers · Gutenberg
Code Block block for WordPress
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
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
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Inspector panels on this block: Code & Language, Appearance, Controls, Custom Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Language” options: JavaScript, TypeScript, JSX / TSX, HTML, CSS; “Highlight Lines (e.g. 1,3-5)” (Comma-separated line numbers or ranges); “Theme” options: Dark (Night Owl), Light (GitHub), Ocean, Monokai, Custom.
Where to find it
Gutenberg inserter → Developers → search “Code Block” (block name `blockenberg/code-block` in block.json). Style it in the sidebar after insert.
How to use Code Block block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Code Block”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Code & Language. Set “Language”, “File Name (optional)”, “Highlight Lines (e.g. 1,3-5)”, “Starting Line Number”.
- Check the published page. The view script reads HTML data attributes: data-copied-label, data-copy-label. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Language | Select control; the chosen value is saved on the block. Options: JavaScript; TypeScript; JSX / TSX; HTML; CSS; SCSS / Sass; PHP; Python; JSON; Bash / Shell. block.json default: javascript. Saved as `language`. |
| File Name (optional) | Text field in the inspector. Saved as `fileName`. |
| Highlight Lines (e.g. 1,3-5) | Text field in the inspector. Comma-separated line numbers or ranges. Saved as `highlightLines`. |
| Starting Line Number | Numeric range control in the inspector. Range 1–999. block.json default: 1. Saved as `startLine`. |
| Theme | Select control; the chosen value is saved on the block. Options: Dark (Night Owl); Light (GitHub); Ocean; Monokai; Custom. block.json default: dark. Saved as `theme`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `borderRadius`. |
| Max Height (0 = unlimited) | Numeric range control in the inspector. Range 0–1200. block.json default: 0. Saved as `maxHeight`. |
| Word Wrap | On/off toggle in the inspector. Off by default. Saved as `wordWrap`. |
| 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 Language Badge | On/off toggle in the inspector. On by default. Saved as `showLanguageBadge`. |
| Copy Label | Text field in the inspector. block.json default: Copy. Saved as `copyLabel`. |
| Copied! Label | Text field in the inspector. block.json default: Copied!. Saved as `copiedLabel`. |
| Font Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 14. Saved as `fontSize`. |
| Line Height (%) | Numeric range control in the inspector. Range 120–250. block.json default: 175. Saved as `lineHeight`. |
| Code | Multiline text field in the inspector. Saved as `code`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-copied-label, data-copy-label.
When this is the right block
- Syntax-highlighted code block with copy button, line numbers, and multiple themes — that is the job of Code Block, not a generic content block.
- Use it when you need the editor control labeled “Language”, which exists on this block’s inspector.
- It matches pages about code, syntax, highlight.
- 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 Block block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Code Block”. It sits under Developers. After insert, open Code & Language and set “Language”, “File Name (optional)”, “Highlight Lines (e.g. 1,3-5)”, “Starting Line Number”.
What makes Code Block different from other Blockenberg blocks?
Syntax-highlighted code block with copy button, line numbers, and multiple themes. Inspector labels on this block include “Language”, “File Name (optional)”, “Highlight Lines (e.g. 1,3-5)”, “Starting Line Number”.
Is the Code Block Gutenberg block free?
Yes. Code Block ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Code Block 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 & Language, Appearance, Controls, Custom Colors).
Related developers blocks
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
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.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Playground
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
File Tree
Display a visual file and folder tree structure — ideal for documentation, project overviews, and tutorials.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Code Block from the Gutenberg inserter.