Alert block provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Adding block

To add a alert message box, click on the Block Inserter icon and select the “Alert” block.

add-alert-block
Inserting alert block

Alternatively, you can start typing /alert in a new paragraph block, then press enter.

Editing block

You can write your alert message content like a regular paragraph, and it will automatically be turned into an alert block behind the scenes.

edit-alert-block
Writing an alert message content

Block interface

To reveal the block toolbar, you can click on the block, and the toolbar will display. Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

The alert block offers basic formatting options in its toolbar such as align text left, center, and right, and to format text as bold, italicize, hyperlinks, or strike through.

Predefined alert types

The predefined alert type provides 5 default alert message box styles: “Default”, “Success”, “Info”, “Warning”, and “Error”. Each of these styles provides a default icon and color.

Default

edit-alert-block
Default alert message style

Info

alert-block-info
Info alert message style

Success

alert-block-success
Success alert message style

Warning

alert-block-warning
Warning alert message style

Error

alert-block-error
Error alert message style

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

alert-block-sidebar-settings
The alert block settings in the sidebar

Icon settings

The icon picker control allows you to add an icon to the beginning of the alert message box content.

alert-block-icon-settings
Icon settings in alert block

If an alert style is provided, this will override the default type icon. Additionally, leaving the icon picker empty will remove the icon altogether.

Text settings

alert-block-text-settings
Text settings in alert block

On this tab, the controls allow you to change the icon and alert message content’s font size, either with relative percentages or down to the pixel.

Border settings

The border setting tab gives you the ability to add a simple border to the left side of the alert. This can be combined with different text and background colors, and alert type to provide unique accents to the message box.

alert-block-border-settings
Border settings in alert block

You need to specify the width of the border size by using one of the three predefined values: “Thin”, “Medium”, or “Thick”.

In addition to that, you can define the radius of the alert message box’s corners with selecting one of the two available predefined values: “Edge”, “Pill”. Unlike the border width setting, the changes applied by selecting any of the radius values will apply to all four sides of the message box.

Color settings

You can choose the text and background colors for your alert message content. Moreover, the icon and border color of the alert box is customizable and can be refined upon your choice.

block-color-settings
Alert block color settings

Selecting proper colors will help you to call attention to important content with a nice contrast for readability purposes.

Accessibility parameters are implemented within this color picker panel to warn you when the text may become illegible for persons with reading impairments.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 2 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept