Skip to content
Guides

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.

Bootstrap Alert block frontend display
Frontend appearance of the Alert block
Bootstrap Alert block in WordPress editor
Alert block in the WordPress block editor

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

Step 2: Adding Controls

Configure the following controls in the block builder:

  1. Content (Textarea control)

    • Allows users to input alert message
  2. 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
  3. Dismissible (Checkbox control)

    • Enables/disables close button
Alert block configuration in Lazy Blocks builder

Step 3: Frontend Output

Choose either PHP or Handlebars template for frontend rendering:

PHP Template
<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">&times;</span>
        </button>
    <?php endif; ?>
</div>
Handlebars Template
<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">&times;</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">&times;</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.

Was this article helpful?