Effects · Gutenberg
Notification Toast block for WordPress
Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc.
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
Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc.
Inspector panels on this block: Notifications (, Behaviour, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Bottom Left, Bottom Right, Top Left, Top Right; “Animation” options: Slide in, Fade in, Pop in; “Toast Style” options: Shadow (elevated), Bordered, Flat (minimal).
Where to find it
Gutenberg inserter → Effects → search “Notification Toast” (block name `blockenberg/notification-toast` in block.json). Style it in the sidebar after insert.
How to use Notification Toast block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Notification Toast”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Notifications (. Set “Name”, “Message”, “Time label”, “Position”.
- 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 |
|---|---|
| Name | Text field in the inspector. Saved as `notifications`. |
| Message | Text field in the inspector. Saved as `notifications`. |
| Time label | Text field in the inspector. Saved as `notifications`. |
| Position | Select control; the chosen value is saved on the block. Options: Bottom Left; Bottom Right; Top Left; Top Right. block.json default: bottom-left. Saved as `position`. |
| Interval between toasts (s) | Numeric range control in the inspector. Range 1–20. block.json default: 4. Saved as `interval`. |
| Display duration (s) | Numeric range control in the inspector. Range 1–10. block.json default: 3. Saved as `displayDuration`. |
| Animation | Select control; the chosen value is saved on the block. Options: Slide in; Fade in; Pop in. block.json default: slide. Saved as `animateType`. |
| Loop notifications | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Show each session only once | On/off toggle in the inspector. Off by default. Saved as `showOnce`. |
| Toast Style | Select control; the chosen value is saved on the block. Options: Shadow (elevated); Bordered; Flat (minimal). block.json default: shadow. Saved as `toastStyle`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–500. block.json default: 320. Saved as `maxWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Show avatar | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Avatar Size (px) | Numeric range control in the inspector. Range 28–60. block.json default: 40. Saved as `avatarSize`. |
| Show icon/emoji | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show time label | On/off toggle in the inspector. On by default. Saved as `showTimeAgo`. |
| Icon Size (px) | Numeric range control in the inspector. Range 12–40. block.json default: 20. Saved as `iconSize`. |
| Time Size (px) | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `timeSize`. |
| Toast Background | Color control in the inspector. block.json default: #ffffff. Saved as `toastBg`. |
| Toast Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `toastBorder`. |
| Name Color | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Message Color | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Time Color | Color control in the inspector. block.json default: #9ca3af. Saved as `timeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- It uses sessionStorage (tab session only).
When this is the right block
- Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc — that is the job of Notification Toast, not a generic content block.
- Use it when you need the editor control labeled “Name”, which exists on this block’s inspector.
- It matches pages about toast, notification, social proof.
- Inserter grouping: motion, overlays, and visual treatments.
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 Notification Toast block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Notification Toast”. It sits under Effects. After insert, open Notifications ( and set “Name”, “Message”, “Time label”, “Position”.
What makes Notification Toast different from other Blockenberg blocks?
Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc. Inspector labels on this block include “Name”, “Message”, “Time label”, “Position”.
Is the Notification Toast Gutenberg block free?
Yes. Notification Toast ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Notification Toast 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: Notifications (, Behaviour, Appearance).
Related effects blocks
Floating Stats
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Modal Window
A button or trigger that opens a customizable popup modal overlay.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Notification Toast from the Gutenberg inserter.