Content · Gutenberg
Alert / Notice block for WordPress
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
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
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Inspector panels on this block: Alert Type, Icon. Those titles come from index.js, not from a shared template.
Behavior controls: “Type / Preset” options: ℹ Info, ✓ Success, ⚠ Warning, ✕ Error, 💡 Tip; “Border Style” options: Left bar, Top bar, Full border, None; “Icon Style” options: Auto (matches type), Outline, Star, Heart, Shield; “Icon Vertical Alignment” options: Top (align to first line), Centre (middle of block).
Alert / Notice 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 → Content → search “Alert / Notice” (block name `blockenberg/alert` in block.json). Style it in the sidebar after insert.
How to use Alert / Notice block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Alert / Notice”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Alert Type. Set “Type / Preset”, “Border Style”, “Border Width (px)”, “Border Radius (px)”.
- 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 |
|---|---|
| Type / Preset | Select control; the chosen value is saved on the block. Options: ℹ Info; ✓ Success; ⚠ Warning; ✕ Error; 💡 Tip; 📝 Note; ■ Dark. block.json default: info. Saved as `alertType`. |
| Border Style | Select control; the chosen value is saved on the block. Options: Left bar; Top bar; Full border; None. block.json default: left. Saved as `borderStyle`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–12. block.json default: 4. Saved as `borderWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `borderRadius`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Style | Select control; the chosen value is saved on the block. Options: Auto (matches type); Outline; Star; Heart; Shield; Bell; Lock; Check; Zap / Lightning; Book. block.json default: auto. Saved as `iconStyle`. |
| Icon Vertical Alignment | Select control; the chosen value is saved on the block. Options: Top (align to first line); Centre (middle of block). block.json default: top. Saved as `iconPosition`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–64. block.json default: 22. Saved as `iconSize`. |
| Gap icon → text (px) | Numeric range control in the inspector. Range 0–48. block.json default: 14. Saved as `gapIconContent`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| HTML Tag | Select control; the chosen value is saved on the block. Options: p; h3; h4; h5. block.json default: p. Saved as `titleTag`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Body Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Gap title → body (px) | Numeric range control in the inspector. Range 0–32. block.json default: 4. Saved as `gapTitleBody`. |
| Override preset colors | On/off toggle in the inspector. Off by default. Saved as `useCustomColors`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–80. block.json default: 16. Saved as `paddingTop`. |
| Padding Right (px) | Numeric range control in the inspector. Range 0–80. block.json default: 20. Saved as `paddingRight`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–80. block.json default: 16. Saved as `paddingBottom`. |
| Padding Left (px) | Numeric range control in the inspector. Range 0–80. block.json default: 20. Saved as `paddingLeft`. |
When this is the right block
- Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS — that is the job of Alert / Notice, not a generic content block.
- Use it when you need the editor control labeled “Type / Preset”, which exists on this block’s inspector.
- It matches pages about alert, notice, warning.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Alert / Notice block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Alert / Notice”. It sits under Content. After insert, open Alert Type and set “Type / Preset”, “Border Style”, “Border Width (px)”, “Border Radius (px)”.
What makes Alert / Notice different from other Blockenberg blocks?
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS. Inspector labels on this block include “Type / Preset”, “Border Style”, “Border Width (px)”, “Border Radius (px)”.
Is the Alert / Notice Gutenberg block free?
Yes. Alert / Notice ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Alert / Notice 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: Alert Type, Icon).
Related content blocks
Callout
Highlighted panel for tips, warnings or success messages with icon, title and dismissible option.
Content Box
Styled content container with optional icon/emoji, badge label, title, rich body text, style variants (info/warning/success/tip/quote), border, background, and rounded corners.
Chat Bubbles
Decorative chat-conversation UI — perfect for testimonials in a messaging format, product walkthroughs, or dialogue-based storytelling.
Content Warning
Editorial content advisory or sensitivity notice, optionally collapsible.
Info Cards
Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles.
Sticky Note
Colored post-it style note with optional rotation, shadow, curl corner and handwritten font.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Alert / Notice from the Gutenberg inserter.