Blog · Gutenberg
Changelog block for WordPress
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product 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
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Inspector panels on this block: Settings, Category Colors, Entries, v. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Timeline (left line), Cards, Minimal list; “Category” options: ✦ New, ↑ Improved, ✔ Fixed, ⚠ Deprecated, ✕ Removed.
Changelog has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Blog → search “Changelog” (block name `blockenberg/changelog` in block.json). Style it in the sidebar after insert.
How to use Changelog block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Changelog”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Settings. Set “Show section title”, “Section title”, “Show date”, “Show version badge”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Timeline (left line); Cards; Minimal list. block.json default: timeline. Saved as `layout`. |
| Show section title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Section title | Text field in the inspector. block.json default: What's new. Saved as `sectionTitle`. |
| Show date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Show version badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Max width (px) | Numeric range control in the inspector. Range 400–1200. block.json default: 760. Saved as `maxWidth`. |
| New | Color control in the inspector. block.json default: #10b981. Saved as `newColor`. |
| Improved | Color control in the inspector. block.json default: #3b82f6. Saved as `improvedColor`. |
| Fixed | Color control in the inspector. block.json default: #8b5cf6. Saved as `fixedColor`. |
| Deprecated | Color control in the inspector. block.json default: #f59e0b. Saved as `deprecatedColor`. |
| Removed | Color control in the inspector. block.json default: #ef4444. Saved as `removedColor`. |
| Version badge | Color control in the inspector. block.json default: #6c3fb5. Saved as `versionBadgeBg`. |
| Timeline line | Color control in the inspector. block.json default: #e5e7eb. Saved as `connectorColor`. |
| Version text | Color control in the inspector. block.json default: #111827. Saved as `versionColor`. |
| Date text | Color control in the inspector. block.json default: #6b7280. Saved as `dateColor`. |
| Item text | Color control in the inspector. block.json default: #374151. Saved as `itemColor`. |
| 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: 48. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
| Version number | Text field in the inspector. |
| Date | Text field in the inspector. |
| Badge label (optional) | Text field in the inspector. |
| Category | Select control; the chosen value is saved on the block. Options: ✦ New; ↑ Improved; ✔ Fixed; ⚠ Deprecated; ✕ Removed. |
| Description | Text field in the inspector. |
When this is the right block
- Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages — that is the job of Changelog, not a generic content block.
- Use it when you need the editor control labeled “Show section title”, which exists on this block’s inspector.
- It matches pages about changelog, release, version.
- Inserter grouping: posts, magazines, and editorial WordPress 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 Changelog block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Changelog”. It sits under Blog. After insert, open Settings and set “Show section title”, “Section title”, “Show date”, “Show version badge”.
What makes Changelog different from other Blockenberg blocks?
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages. Inspector labels on this block include “Show section title”, “Section title”, “Show date”, “Show version badge”.
Is the Changelog Gutenberg block free?
Yes. Changelog ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Changelog 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: Settings, Category Colors, Entries, v).
Related blog blocks
Release Notes
Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated.
Footnotes
Academic-style footnotes with numbered inline markers and a full reference list.
Horizontal Timeline
Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options.
Meeting Recap
Structured meeting notes with attendees, agenda, decisions, action items, and next steps.
Press Release
Structured press release with dateline, headline, body paragraphs, boilerplate, and media contact block.
Product Roundup
Ranked multi-product review section with ratings, pros/cons and CTAs.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Changelog from the Gutenberg inserter.