---
title: "Alert Block"
description: "Learn how to create a custom Alert block using the Lazy Blocks WordPress plugin with customizable styles and dismissible options."
url: "https://www.lazyblocks.com/docs/examples/alert-block/"
lastUpdated: 2026-01-12
source: "examples/alert-block.mdx"
---
# Alert Block
This guide demonstrates how to create a custom Alert block using the Lazy Blocks plugin. The block supports multiple alert types, dismissible functionality, and custom content.
## Creating the Alert Block
### Step 1: Basic Block Configuration
Configure the essential block settings in the Lazy Blocks builder:
1. Set block name, slug, and icon
2. Choose appropriate category
3. Add description and keywords for better discoverability
4. Configure Style Variations for different alert types (Info, Success, Warning, Error)
### Step 2: Adding Controls
Configure the following controls in the block builder:
1. **Alert Title** (Text control)
- Allows users to input an optional alert title
2. **Alert Content** (Rich Text control)
- Allows users to input the main alert message with rich text formatting
3. **Dismissible** (Toggle control)
- Enables/disables close button functionality
### Step 3: Block Code
Add the template code in the Block Code section. This code will automatically work for both editor and frontend rendering. Choose either PHP or Handlebars template:
```php title="PHP Template"
>
```
```hbs title="Handlebars Template"
{{#if alert-title}}
{{alert-title}}
{{/if}}
{{{alert-content}}}
{{#if dismissible}}
{{/if}}
```
### Step 4: Block Styles
Add the CSS styles in the Block Styles section of the Lazy Blocks builder:
```css
.wp-block-lazyblock-alert-block {
display: flex;
padding: 16px;
border-radius: 4px;
position: relative;
background-color: #f3f3f3;
border-left: 4px solid #b3b3b3;
color: #4a4a4a;
}
.wp-block-lazyblock-alert-block .alert-content {
flex-grow: 1;
}
.wp-block-lazyblock-alert-block .alert-title {
margin-top: 0;
margin-bottom: 8px;
font-size: 18px;
}
.wp-block-lazyblock-alert-block .alert-message p:last-child {
margin-bottom: 0;
}
.wp-block-lazyblock-alert-block .alert-dismiss {
background: none;
border: none;
cursor: pointer;
padding: 0;
position: absolute;
top: 16px;
right: 16px;
opacity: 0.7;
}
.wp-block-lazyblock-alert-block .alert-dismiss:hover {
opacity: 1;
}
/* Alert types */
.wp-block-lazyblock-alert-block.is-style-info {
background-color: #e8f4fd;
border-left: 4px solid #3498db;
color: #0c5d95;
}
.wp-block-lazyblock-alert-block.is-style-success {
background-color: #e8f8f5;
border-left: 4px solid #2ecc71;
color: #1b7943;
}
.wp-block-lazyblock-alert-block.is-style-warning {
background-color: #fef9e7;
border-left: 4px solid #f1c40f;
color: #9a7d0a;
}
.wp-block-lazyblock-alert-block.is-style-error {
background-color: #fdedec;
border-left: 4px solid #e74c3c;
color: #922b21;
}
```
## Style Variations
The Alert block comes with predefined Style Variations that can be applied in the WordPress editor. These are configured in the Basic Block Configuration step:
- **Info** - Blue styling for informational messages
- **Success** - Green styling for success messages
- **Warning** - Yellow styling for warning messages
- **Error** - Red styling for error messages
## Theme Integration
Add this code to your theme's functions.php or plugin file:
```php
add_action( 'lzb/init', function() {
lazyblocks()->add_block( array(
'title' => 'Alert Block',
'icon' => '',
'keywords' => array(
'alert',
'notice',
'message',
'notification',
),
'slug' => 'lazyblock/alert-block',
'description' => 'Attention-grabbing alert box, perfect for important announcements and notifications.',
'category' => 'design',
'category_label' => 'design',
'supports' => array(
'customClassName' => true,
'anchor' => false,
'html' => false,
'multiple' => true,
'inserter' => true,
'reusable' => true,
'lock' => true,
'align' => array(
'wide',
'full',
),
),
'controls' => array(
'control_d4aad34f6e' => array(
'type' => 'text',
'name' => 'alert-title',
'default' => 'Important Notice',
'label' => 'Alert Title',
'help' => 'Title of the alert (optional)',
'placement' => 'inspector',
'translate' => 'true',
),
'control_3ebbb94850' => array(
'type' => 'rich_text',
'name' => 'alert-content',
'default' => 'This is an important message that you should pay attention to.',
'label' => 'Alert Content',
'placement' => 'inspector',
'translate' => 'true',
),
'control_daeade4589' => array(
'type' => 'toggle',
'name' => 'dismissible',
'default' => 'false',
'label' => 'Dismissible',
'placement' => 'inspector',
'checked' => 'false',
'alongside_text' => 'Make alert dismissible',
),
),
'code' => array(
'output_method' => 'html',
'editor_html' => '',
'editor_callback' => '',
'frontend_html' => '
/* INSERT BLOCK CODE HERE */
',
'frontend_callback' => '',
'show_preview' => 'always',
'single_output' => true,
),
'style' => array(
'block' => '
/* INSERT BLOCK STYLES HERE */
',
'editor' => '',
),
'script' => array(
'view' => '',
),
'styles' => array(
array(
'name' => 'info',
'label' => 'Info',
),
array(
'name' => 'success',
'label' => 'Success',
),
array(
'name' => 'warning',
'label' => 'Warning',
),
array(
'name' => 'error',
'label' => 'Error',
),
),
'condition' => array(),
) );
} );
```
This implementation provides a fully functional Alert block that integrates seamlessly with the WordPress block editor with custom styling and multiple alert variations.
## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt