Blog · Gutenberg
Release Notes block for WordPress
Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated.
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
Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated.
Inspector panels on this block: Release Info, Introduction, Change Sections, Links, Header & Structure Colors, Section Type Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Type” options: 🚀 Major, ✨ Minor, 🐛 Patch, 🔥 Hotfix.
Where to find it
Gutenberg inserter → Blog → search “Release Notes” (block name `blockenberg/release-notes` in block.json). Style it in the sidebar after insert.
How to use Release Notes block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Release Notes”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Release Info. Set “Product Name”, “Version”, “Type”, “Release Date”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Product Name | Text field in the inspector. block.json default: Acme App. Saved as `productName`. |
| Version | Text field in the inspector. block.json default: 2.5.0. Saved as `version`. |
| Type | Select control; the chosen value is saved on the block. Options: 🚀 Major; ✨ Minor; 🐛 Patch; 🔥 Hotfix. block.json default: minor. Saved as `releaseType`. |
| Release Date | Text field in the inspector. block.json default: February 24, 2026. Saved as `releaseDate`. |
| Show Meta | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show Type Badge | On/off toggle in the inspector. On by default. Saved as `showReleaseType`. |
| Show Introduction | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Show Links | On/off toggle in the inspector. On by default. Saved as `showLinks`. |
| Full Changelog URL | Text field in the inspector. Saved as `changelogUrl`. |
| Compare Changes URL | Text field in the inspector. Saved as `compareUrl`. |
| Title / Version | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Body Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Product Name Size (px) | Numeric range control in the inspector. Range 10–22. block.json default: 13. Saved as `productNameSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Item Spacing (px) | Numeric range control in the inspector. Range 2–16. block.json default: 6. Saved as `itemSpacing`. |
| Block Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header & Structure Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Intro BG | Color control in the inspector. block.json default: #f8fafc. Saved as `introBg`. |
| Intro Text | Color control in the inspector. block.json default: #374151. Saved as `introColor`. |
| List Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Accent (links) | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Added BG | Color control in the inspector. block.json default: #dcfce7. Saved as `addedBg`. |
| Added Text | Color control in the inspector. block.json default: #14532d. Saved as `addedColor`. |
| Changed BG | Color control in the inspector. block.json default: #dbeafe. Saved as `changedBg`. |
| Changed Text | Color control in the inspector. block.json default: #1e3a8a. Saved as `changedColor`. |
| Fixed BG | Color control in the inspector. block.json default: #fef9c3. Saved as `fixedBg`. |
| Fixed Text | Color control in the inspector. block.json default: #713f12. Saved as `fixedColor`. |
| Removed BG | Color control in the inspector. block.json default: #fee2e2. Saved as `removedBg`. |
| Removed Text | Color control in the inspector. block.json default: #991b1b. Saved as `removedColor`. |
| Security BG | Color control in the inspector. block.json default: #f3e8ff. Saved as `securityBg`. |
| Security Text | Color control in the inspector. block.json default: #581c87. Saved as `securityColor`. |
| Deprecated BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `deprecatedBg`. |
| Deprecated Text | Color control in the inspector. block.json default: #475569. Saved as `deprecatedColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated — that is the job of Release Notes, not a generic content block.
- Use it when you need the editor control labeled “Product Name”, which exists on this block’s inspector.
- It matches pages about release, changelog, 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 Release Notes block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Release Notes”. It sits under Blog. After insert, open Release Info and set “Product Name”, “Version”, “Type”, “Release Date”.
What makes Release Notes different from other Blockenberg blocks?
Structured software or product release notes with versioned sections: Added, Changed, Fixed, Removed, Security, and Deprecated. Inspector labels on this block include “Product Name”, “Version”, “Type”, “Release Date”.
Is the Release Notes Gutenberg block free?
Yes. Release Notes ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Release Notes 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: Release Info, Introduction, Change Sections, Links).
Related blog blocks
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Update Notice
Editorial article update and correction notice with date, summary, and change history.
Footnotes
Academic-style footnotes with numbered inline markers and a full reference list.
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.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Release Notes from the Gutenberg inserter.