Alert block

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

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

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

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

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.

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.

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

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

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

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.

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.

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.

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.

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

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.