Developers · Gutenberg
Code Comparison block for WordPress
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
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
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
Inspector panels on this block: Left Pane (Before), Right Pane (After), Diff & Display, Layout, Theme. Those titles come from index.js, not from a shared template.
Behavior controls: “Language” options: JavaScript, TypeScript, PHP, Python, CSS; “Language (Right Lang)” options: JavaScript, TypeScript, PHP, Python, CSS; “Highlighted Line Numbers (comma-separated)” (e.g. 2,5,7 — marks those lines as changed in both panes); “Preset Theme” options: Dark (Catppuccin), Light, Dracula, GitHub, Custom.
Where to find it
Gutenberg inserter → Developers → search “Code Comparison” (block name `blockenberg/code-comparison` in block.json). Style it in the sidebar after insert.
How to use Code Comparison block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Code Comparison”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Left Pane (Before). Set “Label”, “Language”, “Code”, “Label (Right Label)”.
- Check the published page. The view script reads HTML data attributes: data-code, data-opts, data-side. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. block.json default: Before. Saved as `leftLabel`. |
| Language | Select control; the chosen value is saved on the block. Options: JavaScript; TypeScript; PHP; Python; CSS; HTML; Bash / Shell; SQL; JSON; Ruby. block.json default: javascript. Saved as `leftLang`. |
| Code | Multiline text field in the inspector. block.json default: function greet(name) { return 'Hello, ' + name; } // Call the function const msg = greet('World'); console.log(msg);. Saved as `leftCode`. |
| Label (Right Label) | Text field in the inspector. block.json default: After. Saved as `rightLabel`. |
| Language (Right Lang) | Select control; the chosen value is saved on the block. Options: JavaScript; TypeScript; PHP; Python; CSS; HTML; Bash / Shell; SQL; JSON; Ruby. block.json default: javascript. Saved as `rightLang`. |
| Code (Right Code) | Multiline text field in the inspector. block.json default: const greet = (name) => { return `Hello, ${name}!`; }; // Call the function const msg = greet('World'); console.log(msg);. Saved as `rightCode`. |
| Highlighted Line Numbers (comma-separated) | Text field in the inspector. e.g. 2,5,7 — marks those lines as changed in both panes. Saved as `diffLines`. |
| Show Diff Markers (+/−) | On/off toggle in the inspector. On by default. Saved as `showDiffMarkers`. |
| Line Numbers | On/off toggle in the inspector. On by default. Saved as `showLineNumbers`. |
| Wrap Long Lines | On/off toggle in the inspector. Off by default. Saved as `wrapLines`. |
| Copy Buttons | On/off toggle in the inspector. On by default. Saved as `showCopyButtons`. |
| Language Badge | On/off toggle in the inspector. On by default. Saved as `showLanguageBadge`. |
| Draggable Divider | On/off toggle in the inspector. On by default. Saved as `draggableSplit`. |
| Left Pane Width % | Numeric range control in the inspector. Range 20–80. block.json default: 50. Saved as `splitRatio`. |
| Max Height (0 = unlimited) | Numeric range control in the inspector. Range 0–1000. block.json default: 0. Saved as `maxHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Preset Theme | Select control; the chosen value is saved on the block. Options: Dark (Catppuccin); Light; Dracula; GitHub; Custom. block.json default: dark. Saved as `theme`. |
| Font Size (px) | Numeric range control in the inspector. Range 10–22. block.json default: 13. Saved as `fontSize`. |
| Left Pane Background | Color control in the inspector. block.json default: #1e1e2e. Saved as `bgLeft`. |
| Right Pane Background | Color control in the inspector. block.json default: #1e2e1e. Saved as `bgRight`. |
| Left Header | Color control in the inspector. block.json default: #ff6b6b. Saved as `headerBgLeft`. |
| Right Header | Color control in the inspector. block.json default: #6bcb77. Saved as `headerBgRight`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Code Text | Color control in the inspector. block.json default: #cdd6f4. Saved as `codeColor`. |
| Line Number Color | Color control in the inspector. block.json default: #6c7086. Saved as `lineNumColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-code, data-opts, data-side.
When this is the right block
- Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider — that is the job of Code Comparison, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about code, comparison, diff.
- 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 Comparison block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Code Comparison”. It sits under Developers. After insert, open Left Pane (Before) and set “Label”, “Language”, “Code”, “Label (Right Label)”.
What makes Code Comparison different from other Blockenberg blocks?
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider. Inspector labels on this block include “Label”, “Language”, “Code”, “Label (Right Label)”.
Is the Code Comparison Gutenberg block free?
Yes. Code Comparison ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Code Comparison 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: Left Pane (Before), Right Pane (After), Diff & Display, Layout).
Related developers blocks
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
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 Comparison from the Gutenberg inserter.