Canvas Docs

Process Steps

Numbered or icon step indicators with dashed connector lines. Optionally enables Bootstrap 5 tab content with prev/next navigation. It is shown in the block inserter as Canvas Process Steps and registered as canvas-core/process-steps.

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

The Process Steps settings in the block editor sidebar

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:

Steps

  • StepsDefaultEmpty

    The stages in the process, in the order a visitor works through them. Nothing is shown until you add at least one.

    Each row of Steps takes:

    • LabelDefaultEmpty

      Number or short text. Leave empty to auto-number or show icon.

    • Icon ClassDefaultEmpty

      Bootstrap icon class (e.g. bi-cart). Used when label is empty.

    • TitleDefaultStep Title

      Name of this stage, shown under its marker.

    • Indicator ClassesDefaultEmpty

      Replaces the derived indicator classes for this step, so one row can mix bordered and filled steps.

    • Column ClassesDefaultEmpty

      Classes on this one step column, so a row of five can share the width evenly instead of falling back to the standard twelve-column split.

    • Tab ContentDefaultEmpty

      Shown as a tab pane when "Enable Tabs" is on.

Settings

  • Step ShapeDefaultCircle

    Shape of the marker that carries each step number or icon.

    ChoicesCircleRounded

  • Step StyleDefaultBordered

    Whether each marker is an outline or a solid colour block.

    ChoicesBorderedFilled

  • Active StepDefault1

    1-based index of the initially active step.

  • Columns OverrideDefault0

    Set to 0 to auto-derive from step count.

Tabs

  • Enable Tab ContentDefaultOff

    Clicking steps reveals corresponding content panes via Bootstrap tabs.

  • Wrapper ClassesDefaultEmpty

    Replaces the default class on the tab wrapper. Enter "none" for an unclassed wrapper.

    Shown when Enable Tab Content is on

  • Tab Content ClassesDefaultEmpty

    Classes on the panel below the steps that holds the content of the step a visitor has opened.

    Shown when Enable Tab Content is on

  • Show Prev/Next ButtonsDefaultOn

    Adds buttons under the panel so a visitor can move through the steps in order instead of clicking each marker.

    Shown when Enable Tab Content is on

  • Previous Button TextDefaultPrevious

    Wording on the button that goes back a step.

    Shown when Enable Tab Content is on

  • Next Step Button TextDefaultNext Step

    Wording on the button that moves forward a step.

    Shown when Enable Tab Content is on

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: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?