Dividers

Horizontal divider with optional icon, style variants, alignment, width presets, and scroll-to link support. It is shown in the block inserter as Canvas Divider and registered as canvas-core/divider.

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

The Dividers 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:

Content

  • IconDefaultbi bi-circle-fill

    The icon that sits in the break in the rule.

    Shown when Style is "Default (Icon)" or "Rounded (Circle Background)" or "Bordered (Outline)"

  • Icon LinkDefaultEmpty

    Wrap the icon in a link. Use #id for scroll-to behavior.

    Shown when Style is "Default (Icon)" or "Rounded (Circle Background)" or "Bordered (Outline)"

  • Smooth-Scroll TargetDefaultEmpty

    The in-page anchor the icon scrolls to. The link keeps its own URL, so a "back to the index" rule can point at a section without also becoming that section's permalink.

    Shown when Style is "Default (Icon)" or "Rounded (Circle Background)" or "Bordered (Outline)"

  • Link TargetDefaultEmpty

    Whether the icon link opens in the same tab or a new one.

    ChoicesSame Tab (empty)New TabShown when Style is "Default (Icon)" or "Rounded (Circle Background)" or "Bordered (Outline)"

  • Style

    Choose None when the framework supplies the whole class list itself (a .dropdown-divider inside a dropdown menu, for example), no base class and no Canvas width/margin modifiers are added.

    Default: Default (Icon). Choices: Default (Icon), Rounded (Circle Background), Bordered (Outline), Divider Line (Icon Gap), Section Line (Plain Rule), Section Line (Double Rule), Horizontal Rule (bare


    ), None (no base class).

Settings

  • Icon AlignmentDefaultLeft

    Where the icon sits along the rule, and so where the rule breaks.

    ChoicesLeftCenterRightShown when Style is "Default (Icon)" or "Rounded (Circle Background)" or "Bordered (Outline)"

  • WidthDefaultFull Width (100%)

    How far the rule runs across the space it sits in. A short rule reads as a flourish under a heading rather than a break between sections.

    ChoicesFull Width (100%)Small (55%)Extra Small (35%)

  • Thick BorderDefaultOff

    Use a 3px border instead of 1px.

  • Large MarginDefaultOff

    Increase vertical spacing (5rem instead of 3rem).

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, Dropcaps, Headings.

Was this page helpful?