Alerts

Alert and notification boxes using Bootstrap alert or Canvas style-msg system. Supports filled, bordered, and extended variants with optional icon and dismiss button. It is shown in the block inserter as Canvas Alert and registered as canvas-core/alert.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• Alert SystemDefaultBootstrap Alert

  Which of the two alert designs to draw. Bootstrap Alert is the plain notice bar; Canvas Style Box is the boxed message with its own title bar. Several settings below apply to one design only.

  ChoicesBootstrap AlertCanvas Style Box

• VariantDefaultInfo

  What the alert is telling the reader, which decides its colour: a confirmation, a piece of information, a caution, a failure, or one of the palette tones. Choose None for a plain box whose colour comes from Custom Background Color instead.

  ChoicesNone (custom colour) (empty)SuccessInfoWarningError / DangerPrimarySecondaryLightDark

• TitleDefaultHeads up!

  The bold heading at the top of the alert. Leave it empty for a one line notice, where the message and icon sit on a single row and the list and closing note are not shown.

• Title TagDefaultH4

  Heading level for the title, so the alert fits the page outline. Presentation is unchanged.

  ChoicesH2H3H4H5H6Shown when Alert System is "Bootstrap Alert"

• MessageDefaultThis alert needs your attention, but it's not super important.

  The body of the alert, shown under the title. Basic formatting such as bold text and links is kept.

• Closing NoteDefaultEmpty

  Adds a rule and a closing paragraph below the message (titled Bootstrap alerts).

  Shown when Alert System is "Bootstrap Alert"

• IconDefaultbi bi-info-circle

  The icon shown before the title, or before the message when there is no title. Clear it for an alert with no icon.

• DismissibleDefaultOff

  Show close button to dismiss the alert.

• PlacementDefaultEmpty

  Pin the alert bar to the viewport edge (Bootstrap alert system only).

  ChoicesInline (default) (empty)Fixed to TopFixed to BottomShown when Alert System is "Bootstrap Alert"

• Custom WidthDefaultEmpty

  Max-width for a compact notice instead of a full-width bar; with a fixed placement it docks to the corner instead of spanning the edge.

  Shown when Alert System is "Bootstrap Alert"

• Light TextDefaultOff

  White text for dark custom backgrounds (Canvas system only).

  Shown when Alert System is "Canvas Style Box"

• Custom BackgroundDefaultEmpty

  Overrides the variant background with a custom color (Canvas system only).

  Shown when Alert System is "Canvas Style Box"

• List TypeDefaultBulleted

  Whether the list is marked with bullets or numbered. Number it when the order of the points matters.

  ChoicesBulletedNumberedShown when Style is "Extended (With List)"

• List ItemsDefaultEmpty

  The points listed under the message, one row each, separated from it by a rule.

  Shown when Style is "Extended (With List)"

  Each row of List Items takes:

  • Item TextDefaultEmpty

    The wording of this point. An empty row is skipped.

• StyleDefaultFilled

  How the box is drawn: filled with its colour, transparent with a coloured outline, or extended so it can carry a list of points under the message.

  ChoicesFilledBordered (Transparent)Extended (With List)

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Buttons, Code Highlight, Counters, Dividers, Dropcaps, Headings.