Alert Block (Bootstrap)
This guide demonstrates how to create a custom Bootstrap 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:
- Set block name, slug, and icon
- Choose appropriate category
- Add description and keywords for better discoverability
Step 2: Adding Controls
Configure the following controls in the block builder:
-
Content (Textarea control)
- Allows users to input alert message
-
Type (Select control)
- Defines alert style variation
- Add the following choices:
primary : Primary secondary : Secondary success : Success danger : Danger warning : Warning info : Info light : Light dark : Dark -
Dismissible (Checkbox control)
- Enables/disables close button
Step 3: Frontend Output
Choose either PHP or Handlebars template for frontend rendering:
<div class="alert alert-<?php echo esc_attr( $attributes['type'] ); ?>
<?php echo ( $attributes['dismissible'] ? 'alert-dismissible fade show' : '' ); ?>"
role="alert">
<?php echo $attributes['content']; ?>
<?php if ( $attributes['dismissible'] ) : ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<?php endif; ?>
</div><div class="alert alert-{{type}} {{#if dismissible}}alert-dismissible fade show{{/if}}" role="alert">
{{{content}}}
{{#if dismissible}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{/if}}
</div>For the editor preview, use:
{{{content}}}Theme Integration
Add this code to your theme's functions.php or plugin file:
if ( function_exists( 'lazyblocks' ) ) :
lazyblocks()->add_block( array(
'title' => 'Bootstrap Alert',
'icon' => 'dashicons dashicons-warning',
'keywords' => array(
'bootstrap',
'alert',
),
'slug' => 'lazyblock/bootstrap-alert',
'description' => 'Implementation of Bootstrap Alert using Gutenberg and Lazy Blocks plugin',
'category' => 'widgets',
'supports' => array(
'customClassName' => true,
'anchor' => false,
'align' => array('wide', 'full'),
'html' => false,
'multiple' => true,
'inserter' => true,
),
'controls' => array(
// Control configurations...
// [Previous controls code remains unchanged]
),
'code' => array(
'editor_html' => '{{{content}}}',
'frontend_html' => '
<div class="alert alert-{{type}} {{#if dismissible}}alert-dismissible fade show{{/if}}" role="alert">
{{{content}}}
{{#if dismissible}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{/if}}
</div>
',
),
));
endif;Remember to include Bootstrap CSS and JS files in your theme for proper functionality of the alert component.
This implementation provides a fully functional Bootstrap Alert block that integrates seamlessly with the WordPress block editor while maintaining Bootstrap's styling and functionality.