Blog · Gutenberg
Notification Feed block for WordPress
Styled activity or notification feed with icon badges, titles, descriptions, timestamps, and read/unread states. Great for changelogs, activity logs, and social feeds.
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
Styled activity or notification feed with icon badges, titles, descriptions, timestamps, and read/unread states. Great for changelogs, activity logs, and social feeds.
Inspector panels on this block: Feed Settings, Notifications. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Cards (spaced), List (bordered box).
Notification Feed 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 “Notification Feed” (block name `blockenberg/notification-feed` in block.json). Style it in the sidebar after insert.
How to use Notification Feed block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Notification Feed”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Feed Settings. Set “Feed Settings — Title”, “Show Title”, “Show Timestamps”, “Show Dividers”.
- 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 |
|---|---|
| Feed Settings — Title | Text field in the inspector. block.json default: Recent Activity. Saved as `title`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Timestamps | On/off toggle in the inspector. On by default. Saved as `showTimestamp`. |
| Show Dividers | On/off toggle in the inspector. On by default. Saved as `showDividers`. |
| Bold Unread Titles | On/off toggle in the inspector. On by default. Saved as `markUnreadBold`. |
| Layout | Select control; the chosen value is saved on the block. Options: Cards (spaced); List (bordered box). block.json default: card. Saved as `layout`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1200. block.json default: 600. Saved as `maxWidth`. |
| Item Padding | Numeric range control in the inspector. Range 8–40. block.json default: 16. Saved as `itemPad`. |
| Icon Size | Numeric range control in the inspector. Range 28–72. block.json default: 42. Saved as `iconSize`. |
| Time Font Size | Numeric range control in the inspector. Range 9–16. block.json default: 11. Saved as `timeFontSize`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Title Color | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Body Color | Color control in the inspector. block.json default: #4b5563. Saved as `bodyColor`. |
| Time Color | Color control in the inspector. block.json default: #9ca3af. Saved as `timeColor`. |
| Divider Color | Color control in the inspector. block.json default: #f3f4f6. Saved as `dividerColor`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Unread Dot | Color control in the inspector. block.json default: #4f46e5. Saved as `unreadDotColor`. |
| Notifications — Title | Text field in the inspector. |
| Body Text | Multiline text field in the inspector. |
| Timestamp | Text field in the inspector. |
| Mark as Unread | On/off toggle in the inspector. |
When this is the right block
- Styled activity or notification feed with icon badges, titles, descriptions, timestamps, and read/unread states. Great for changelogs, activity logs, and social feeds — that is the job of Notification Feed, not a generic content block.
- Use it when you need the editor control labeled “Feed Settings — Title”, which exists on this block’s inspector.
- It matches pages about notification, feed, activity.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Notification Feed block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Notification Feed”. It sits under Blog. After insert, open Feed Settings and set “Feed Settings — Title”, “Show Title”, “Show Timestamps”, “Show Dividers”.
What makes Notification Feed different from other Blockenberg blocks?
Styled activity or notification feed with icon badges, titles, descriptions, timestamps, and read/unread states. Great for changelogs, activity logs, and social feeds. Inspector labels on this block include “Feed Settings — Title”, “Show Title”, “Show Timestamps”, “Show Dividers”.
Is the Notification Feed Gutenberg block free?
Yes. Notification Feed ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Notification Feed 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: Feed Settings, Notifications).
Related blog blocks
Daily Schedule
A time-blocked daily schedule — share your ideal day, work routine, or time-management system with a visual timeline.
Horizontal Timeline
Horizontal scrolling timeline with draggable track, alternating items above/below the line, animated entry, and rich styling options.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Notification Feed from the Gutenberg inserter.