Title: Alerts DLX – Alert Block, Alert Box, Callout Box, and Notifications Author: Ronald Huereca Published: September 10, 2022 Last modified: July 3, 2026 --- Search plugins ![](https://ps.w.org/alerts-dlx/assets/banner-772x250.png?rev=3418859) ![](https://ps.w.org/alerts-dlx/assets/icon-256x256.png?rev=2782634) # Alerts DLX – Alert Block, Alert Box, Callout Box, and Notifications By [Ronald Huereca](https://profiles.wordpress.org/ronalfy/) [Download](https://downloads.wordpress.org/plugin/alerts-dlx.2.4.0.zip) [Live Preview](https://scn.wordpress.org/plugins/alerts-dlx/?preview=1) * [Details](https://scn.wordpress.org/plugins/alerts-dlx/#description) * [Reviews](https://scn.wordpress.org/plugins/alerts-dlx/#reviews) * [Installation](https://scn.wordpress.org/plugins/alerts-dlx/#installation) * [Development](https://scn.wordpress.org/plugins/alerts-dlx/#developers) [Support](https://wordpress.org/support/plugin/alerts-dlx/) ## Description Elevate your WordPress site’s content and user engagement with AlertsDLX, a versatile plugin offering beautifully styled alerts, callouts, and notification boxes for Gutenberg, Full-Site Editing, Classic Editor, and beyond. Compatible with most page builders and supporting blocks and shortcodes. If you need an alert block solution for the block editor, AlertsDLX features four easy-to-use, yet extremely versatile, alert blocks inspired by the most popular (and best looking) UI libraries. AlertsDLX is designed to be lightweight, user-friendly, and highly customizable. It saves you the time needed to craft your own alert notifications out of blocks, and is flexible enough to quickly match most theme designs. Stop digging for that alert in a block suite, and install a dedicated notifications solution that works almost anywhere. Coupled with a free plugin like [Block Visibility](https://blockvisibilitywp.com/), your imagination can really go wild. For example, you can create an “Empty Cart” callout for WooCommerce or Easy Digital Downloads when a cart is empty. For site- wide notifications, most themes and builders (including FSE) allow for site-wide template parts. Just add the notification to it, make it dismissible, and you now have a site-wide callout or notification that can be hidden when dismissed. ### Quick Links [AlertsDLX Docs](https://docs.dlxplugins.com/product/alertsdlx/) | [AlertsDLX Home](https://dlxplugins.com/plugins/alerts-dlx/) | [Shortcode Usage](https://docs.dlxplugins.com/product/alertsdlx/alertsdlx/) | [Support](https://dlxplugins.com/support/) ### Major features 1. Four modern alert blocks and styles: Material, Bootstrap, Chakra, and Shoelace. 2. Use pre-selected colors, styles, and variants, or choose custom for your own branded colors. 3. Add your own SVG icons, or choose from the ones included. Include a custom image if desired. 4. Add dismissible notification and callout boxes, and have it remember the user’s choice. 5. Add an optional title, description, and button to the alert block. 6. Mark an Alert Block as Editorial, and have it only visible in the block editor. 7. Shortcode/page builder support: use beautiful callouts and notifications anywhere shortcodes are supported. 8. Site-wide settings for headline tags, custom title classes, enabled alert themes, and more. 9. Lightweight: the plugin only loads what is needed where it’s needed. Blocks are styled with inspiration from these beautiful UI libraries: * [Material UI Alerts](https://mui.com/material-ui/react-alert/) * [Chakra UI](https://chakra-ui.com/docs/components/alert) * [Bootstrap](https://getbootstrap.com/docs/5.0/components/alerts/). * [Shoelace](https://shoelace.style/) Each Alert block can have built-in icons or you can set your own with SVGs. Icons included are from: * [Google Fonts Material Icons](https://fonts.google.com/icons) * [Chakra UI Icons](https://github.com/chakra-ui/chakra-ui/tree/main/packages/components/icons/src)( GitHub) * [Bootstrap Icons](https://icons.getbootstrap.com/) ### Use cases AlertsDLX is more than just a beautiful alert block in post content. Here are some more popular ways to use it: * **Documentation and Knowledge Base alert callouts** — Tips, notes, warnings, prerequisites, and step summaries in tutorials and knowledge base articles. * **Editorial workflow** — Mark blocks as Editorial Only so author notes and review reminders stay in the block editor and never publish to the frontend. For example, your editor wants to add a note above a paragraph indicating it shouldn’t be edited for legal reasons. * **CTAs and promos** — Title, description, and button combinations for downloads, newsletter signups, event promos, or “read more” nudges. * **Branded message boxes** — Custom colors and four design-system themes (Bootstrap, Material, Chakra, Shoelace) allow for a customized consistent look. * **Flexible content panels (Advanced)** — Enable Flexible InnerBlocks to add lists, images, and other blocks inside the styled alert shell. Inner block styling beyond basic paragraph text may depend on your theme. * **Template and global messaging** — Place notifications in FSE template parts, headers, or footers for site-wide or section-specific notices. * **Shortcode embeds** — Output callouts in page builders, widgets, or form plugin areas (such as empty-cart or confirmation messages) anywhere shortcodes are supported. * **Conditional messaging** — Pair with plugins like [Block Visibility](https://blockvisibilitywp.com/) for logged-in-only notices, role-based messages, cart states, and scheduled promos. * **Compliance and disclaimers** — Reusable affiliate, legal, medical, or financial disclaimer boxes with consistent styling across your site. ### Future Features and Growth This plugin has a small (but growing) install base. Please help spread the word by leaving a feature, support request, or review, by [filing a GitHub issue](https://github.com/DLXPlugins/alerts-dlx/issues), or sponsoring the plugin monetarily [via a GitHub sponsorship](https://github.com/sponsors/MediaRon)( highly recommended and appreciated). Future plans include: 1. Consolidating all four alert blocks into one (one alert block to rule them all). 2. Providing global styles, so you can create a style, customize its colors and configuration, and use it on a block or shortcode to set global site-wide alert style that you can edit in one place. If inserting a block and adding a global style, the block is configured for you, with only the content parts editable. 3. Provide presets, so you can insert the block, click on a preset, and the block is configured for you, setting the icon, style (info, success), configuration ( left accent, right accent), and enabling/disabling other toggles. From there, you can edit as desired. 4. Admin shortcode builder. So users using page builders and widgets have a visual way of creating an AlertsDLX shortcode. 5. Lightbox support. Support being placed in a lightbox, with the dismiss and button click closing the encasing lightbox. Do you have other ideas for the plugin or ways to improve it? Please leave a feature request. All of the above features and your requests depend on continued support from the community. Thank you. ### Development Development happens on GitHub. Please [check out the GitHub code repository for AlertsDLX](https://github.com/dlxplugins/alerts-dlx). ❤️ Please help spread the word about this plugin [through your kind review](https://wordpress.org/support/plugin/alerts-dlx/reviews/#new-post). ## Screenshots [⌊Dismissible alert with custom image icon selected, and alert button displaying.⌉⌊ Dismissible alert with custom image icon selected, and alert button displaying.⌉[ Dismissible alert with custom image icon selected, and alert button displaying. [⌊Adding the alert box via the block editor shows four alert types.⌉⌊Adding the alert box via the block editor shows four alert types.⌉[ Adding the alert box via the block editor shows four alert types. [⌊Edit the icon, add an alert button, and create a dismissible alert easily in Gutenberg( the Block Editor).⌉⌊Edit the icon, add an alert button, and create a dismissible alert easily in Gutenberg (the Block Editor).⌉[ Edit the icon, add an alert button, and create a dismissible alert easily in Gutenberg( the Block Editor). [⌊Block editor sidebar options showing style, alert settings, variants, and custom colors.⌉⌊Block editor sidebar options showing style, alert settings, variants, and custom colors.⌉[ Block editor sidebar options showing style, alert settings, variants, and custom colors. [⌊Add a shortcode wherever shortcodes are supported, such as a form plugin, page builder, or widget.⌉⌊Add a shortcode wherever shortcodes are supported, such as a form plugin, page builder, or widget.⌉[ Add a shortcode wherever shortcodes are supported, such as a form plugin, page builder, or widget. [⌊Each alert type supports light and dark mode colors.⌉⌊Each alert type supports light and dark mode colors.⌉[ Each alert type supports light and dark mode colors. ## Blocks This plugin provides 4 blocks. * Chakra Alert An alert and notification block inspired by Chakra UI. * Shoelace Alert An alert and notification block inspired by Shoelace. * Bootstrap Alert An alert and notification block inspired by Bootstrap. * Material UI Alert An alert and notification block inspired by Material UI. ## Installation To get started, simply search for ‘AlertsDLX’ on the WordPress Add Plugins screen, install, and activate the plugin. If you have any issues with headlines being misstyled, please visit the admin options, and change the headline tag to something that conflicts less with your theme. If you need to, there is a force styles option that can be enabled to resolve most style conflicts. ## FAQ ### Does AlertsDLX work with the Classic Editor and Page Builders? Yes. AlertsDLX works with the Classic Editor [via its shortcode support](https://docs.dlxplugins.com/v/alertsdlx/shortcode-usage). ### Does AlertsDLX work with Elementor or Divi? Yes, via the [built-in shortcode](https://docs.dlxplugins.com/product/alertsdlx/alertsdlx/), you can output in just about any page builder, including Elementor and Divi. ### Does AlertsDLX work with shortcodes? Yes, via the [built-in shortcode](https://docs.dlxplugins.com/product/alertsdlx/alertsdlx/). ### Does this work with the Block Editor (aka, Gutenberg)? Yes, AlertsDLX comes with four blocks, one for each style of alert (Bootstrap, Chakra, Material, and Shoelace). The blocks are fully featured, and are native to the block editor. ### What alert styles does the plugin support? * [Material UI](https://mui.com/material-ui/react-alert/) * [Bootstrap](https://getbootstrap.com/docs/5.0/components/alerts/) * [Chakra UI](https://chakra-ui.com/docs/components/alert) * [Shoelace](https://shoelace.style/) ### Can I create dismissible notices? Yes, each alert can be dismissed, and can be set to expire after a certain amount of time. For example, create a terms of service alert on the homepage that can be dismissed, with the expiration lasting a week. ### Where are the admin settings? Go to **Settings AlertsDLX** in your WordPress admin. From there you can choose the headline HTML element, add custom headline CSS classes, force headline sizing over aggressive theme styles, enable or disable alert themes in the block inserter, and toggle debug mode. ### Does AlertsDLX work on Multisite? Yes. Admin settings are stored per site in the network. ### Can I use custom colors? Yes, you can customize the colors via the shortcode or built-in blocks by selecting“ Custom” as a block style. ### Can I use my own custom SVG icons? Yes. The icon picker allows you to enter an SVG. For the shortcode, you must supply your own SVG. ### Can I use my own custom images? Yes. It’s recommended to use a square image, and there is a built-in cropper available. Custom images look best center-aligned. ### What does Flexible InnerBlocks (Advanced) do? By default, the alert description is a single paragraph styled to match the alert. When you enable **Flexible InnerBlocks (Advanced)** in the block settings, you can insert any block inside the alert body (lists, images, columns, code, and more). AlertsDLX fully styles the alert shell — icon, title, colors, button, and default paragraph text. Other inner blocks may inherit styles from your theme or from the blocks themselves. For simple alert messages, leave Flexible InnerBlocks off. Users have used Flexible InnerBlocks to write a simple alert description followed by a code block, to show off code recipes. Others have used it to create checklists from list blocks, expandable disclaimers via accordion blocks, and even as a video container. ### Can I show alert callouts on specific posts or pages? AlertsDLX can be used in conjunction with free plugin [Block Visibility](https://blockvisibilitywp.com/) to display a notification under certain conditions. While AlertsDLX in itself is not a site-wide notification tool, it can be used as one if put in a global template such as with FSE. ### Does the plugin support countdowns? AlertsDLX does not support countdowns or auto-expiration. If you need an alert to auto-expire, I suggest using it with [Block Visibility](https://blockvisibilitywp.com/) and setting a date-based visibility setting. If you have a favorite countdown block, you can enable Flexible InnerBlocks (advanced) and add it as part of the alert description. ### Can I add star ratings to AlertsDLX, turning it into a testimonial or review box? Yes. If you have a favorite star rating plugin, you can disable the alert title and icon, and use Flexible Innerblocks (advanced) to add the star rating into the alert description. From there, add any additional blocks you need for the review, enable the alert button (or add your own in the description), and link out to the testimonial or review author. ### Can I disable the custom font used (Lato)? Yes, you can improve performance further by disabling the custom font supplied with AlertsDLX and supplying your own. Please see [disabling custom fonts in AlertsDLX](https://docs.dlxplugins.com/product/alertsdlx/custom-fonts/) ### How can I get support or leave a feature request? Please leave a note on [our support page](https://dlxplugins.com/support/) or leave a detailed support request here on .org. ## Reviews ![](https://secure.gravatar.com/avatar/91e15ee5cce05c354ea17ae779471f7b45e22b506049b6fa00b51c1f3a0d7a58? s=60&d=retro&r=g) ### 󠀁[Much Feature Rich Plugin of Its Kind](https://wordpress.org/support/topic/much-feature-rich-plugin-of-its-kind/)󠁿 [arjunarjun](https://profiles.wordpress.org/arjunarjun/) July 31, 2024 I tried quite a few plugins of this type but none matched its features. The first thing is that it can be used both as a block and as a shortcode. Next is that it has the dismissible feature with the ability to remember user’s behaviour. I highly appreciate the author’s creation. ![](https://secure.gravatar.com/avatar/b01f666c7bfd38ec5b3af66ca8e76482cf623f027de14e08d6de2825ed4a829a? s=60&d=retro&r=g) ### 󠀁[Nice block plugin](https://wordpress.org/support/topic/nice-block-plugin/)󠁿 [chinaraj](https://profiles.wordpress.org/chinaraj/) September 14, 2022 1 reply Nice, simple but effective block that works great and has great options for customisation. [ Read all 2 reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/) ## Contributors & Developers “Alerts DLX – Alert Block, Alert Box, Callout Box, and Notifications” is open source software. The following people have contributed to this plugin. Contributors * [ Ronald Huereca ](https://profiles.wordpress.org/ronalfy/) [Translate “Alerts DLX – Alert Block, Alert Box, Callout Box, and Notifications” into your language.](https://translate.wordpress.org/projects/wp-plugins/alerts-dlx) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/alerts-dlx/), check out the [SVN repository](https://plugins.svn.wordpress.org/alerts-dlx/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/alerts-dlx/) by [RSS](https://plugins.trac.wordpress.org/log/alerts-dlx/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.4.0 * Released 2026-07-03 * New: Added an admin settings panel under Settings AlertsDLX. * New: Choose the headline HTML element (h1–h6 or div) used for alert titles site- wide. This allows the alerts headline to match your site’s SEO structure, and can help reduce style conflicts with your theme. * New: Add custom alert title headline CSS classes for third-party integrations/ exclusions (such as table of contents plugins). * New: Option to force intended headline font size over aggressive theme styles. * New: Enable or disable individual alert block themes from displaying in the block inserter. For example, if you prefer Chakra, you can disable the remaining ones( shoelace, material, bootstrap). * New: Block toolbar style picker for quickly changing alert types (info, success, etc). Changing to “Custom” will select the styles panel of the block for you, allowing you to customize the colors. * New: Block toolbar toggles for icon, title, description, button, and close button visibility. This aims to put some sidebar visibility options in the toolbar for easier access. * New: Added a toolbar shortcut in all child blocks so that it’s easier to navigate between the alert and its innerblocks (the alert description). A shortcut to the parent’s settings and styles panels are included, and will take you to theh appropriate panel when clicked on, even if the sidebar is closed. * New: The alert’s button options have been duplicated in the sidebar for convenience and for cases where editing the button on the block isn’t obvious. You can change the button label, and button link from the sidebar. * New: The link selector for the button has been improved with better search, and it is now much more obvious when a link has been applied. * New: The icon picker has been redesigned into a tabbed interface, with one allowing you to select from available icons, and the otherh to set a custom SVG. This fixes the old design where users had to scroll all the way down the icon list just to set a custom icon. * Fix: Custom colors now show up under the block styles tab when “Custom” is selected. Before, they were in a separate tab, at the very bottom, so it wasn’t obvious how to set custom colors in the sidebar. * Update: Block editor sidebars are aligned across all blocks, with Appearance controls in the Styles tab. * Update: Advanced Flexible InnerBlocks toggle moved to the Settings sidebar panel for better visibility. * Update: Block alignment support has been restricted to center, wide, and full across all blocks to mimimize style conflicts. Existing blocks are unaffected. * Fix: Switching block styles via the native block style picker could corrupt the alert theme and break layout. * Fix: Custom color rendering for Chakra solid and Shoelace alert styles wasn’t working. * Misc: Safer block transform handling and internal architecture documentation. #### 2.3.1 * Released 2025-12-13 * Fix: Disabling the Lato font via filter wasn’t loading the alternate stylesheet font. #### 2.3.0 * Released 2025-12-08 * New: Added ability to add custom image via block or shortcode. * New: Can disable custom fonts and use your own via WP filters. #### 2.2.3 * Released 2025-12-06 * Fixed shortcode CSS not loading on the frontend. #### 2.2.2 * Released 2025-12-05 * Fixed frontend rendering for those not using footer hooks. * Fixed SVG default icon size, to prevent jumping when rendering. * Fixed shortcode not rendering due to editorial blocks parameter. #### 2.2.0 * Released 2025-11-13 * Consolidated light and dark stylesheets, saving over 200kb in size. * Tested with WP 6.9. #### 2.1.2 * Released 2025-09-06 * Bug fix: several fonts were out of proportion, so this has been addressed with this update. * Bug fix: several custom colors were missing for button styles. * Bug fix: section and font styles were being overridden by themes causing the boxes to look warped. #### 2.1.0 * Released 2025-08-10 * New feature: Place blocks in “Editorial Only” mode so they only show up in the block editor and not the frontend. * New feature: Thenme colors are now included when choosing custom colors. * New feature: Added block manifests to speed up block loading time and performance. #### 2.0.2 * Released 2024-08-23 * Some minor copy updates. #### 2.0.1 * Released 2024-08-22 * Fixing Shoelace dark mode styles not aligning properly. * Fixed Chakra UI styles where info icon was the wrong color. #### 2.0.0 * Released 2024-07-21 * New feature: Added a close button and dismissible alerts. You can set an expiration to hide the alert for a certain time after user action. * New feature: Advanced setting in the blocks to allow for custom inner blocks. * New feature: Custom colors. Set custom colors for eåçh alert type and variation. * Block tweaks: The options for showing sections in the block is now near the top and open by default. #### 1.4.0 * Released 2024-03-12 * Reworked markup for better style compatibility and less conflicts. * Testing with WP 6.5. #### 1.3.5 * Released 2023-12-09 * Selecting block styles resulted in a JS error. This has been fixed. #### 1.3.1 * Released 2023-10-21 * Several performance improvements to the frontend. Previously the frontend was loading all styles and scripts for all alert types. Now it only loads the styles and scripts for the alert type(s) being used on the page. #### 1.3.0 * Released 2023-09-23 * Added support for shortcodes. * [Read the announcement post](https://dlxplugins.com/announcements/alertsdlx-1-3-0-includes-shortcode-support/). * [See shortcode usage](https://docs.dlxplugins.com/product/alertsdlx/alertsdlx/). #### 1.2.5 * Released 2023-09-10 * Optimizing scripts and styles to only load when needed to prevent unnecessary style loading. #### 1.2.1 * Released 2023-04-16 * Hot fix for outputting the block description. #### 1.2.0 * Released 2023-04-16 * Added Shoelace alert styles. * Changing internal structure to innerBlocks. #### 1.1.0 * Released 2022-10-01 * Added Darkmode for Chakra and Material alert boxes. #### 1.0.5 * Released 2022-09-12 * Fixed “error” alert styles in the block editor/frontend. * Updated SVG icons for .org. #### 1.0.1 * Released 2022-09-11 * Added transforms to the blocks so that they are interchangeable. #### 1.0.0 * Released 2022-09-09 * Initial release. ## Meta * Version **2.4.0** * Last updated **2 weeks ago** * Active installations **80+** * WordPress version ** 6.8 or higher ** * Tested up to **7.0.1** * PHP version ** 8.0 or higher ** * Language * [English (US)](https://wordpress.org/plugins/alerts-dlx/) * Tags * [alert box](https://scn.wordpress.org/plugins/tags/alert-box/)[alerts](https://scn.wordpress.org/plugins/tags/alerts/) [callouts](https://scn.wordpress.org/plugins/tags/callouts/)[dismissible](https://scn.wordpress.org/plugins/tags/dismissible/) [Notifications](https://scn.wordpress.org/plugins/tags/notifications/) * [Advanced View](https://scn.wordpress.org/plugins/alerts-dlx/advanced/) ## Ratings 5 out of 5 stars. * [ 2 5-star reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/alerts-dlx/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/alerts-dlx/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/alerts-dlx/reviews/) ## Contributors * [ Ronald Huereca ](https://profiles.wordpress.org/ronalfy/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/alerts-dlx/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://github.com/sponsors/DLXPlugins)