Canvas Docs

Shape Dividers

SVG decorative shape divider for section transitions. It is shown in the block inserter as Canvas Shape Divider and registered as canvas-core/shape-divider.

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

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

Settings

  • ShapeDefaultWave

    The silhouette drawn along the edge of the section, such as a wave, a slope or a set of triangles.

    ChoicesValleyValley 2Valley 3MountainMountain 2Mountain 3Mountain 4Mountain 5MountainsMountains 2Mountains 3Mountains 4and 28 more

  • PositionDefaultBottom

    Which edge of the section the shape sits on.

    ChoicesTopBottom

  • Fill ColorDefaultEmpty

    Colour of the shape. Set it to match the background of the section on the other side of the edge. Leave blank for the theme default.

  • Height (px)Default100

    How deep the shape reaches into the section, in pixels. Raise it for a more pronounced curve.

  • Width Scale (%)Default100

    Scale beyond 100% to prevent edge gaps.

  • Flip HorizontallyDefaultOff

    Mirror the shape left to right, so an asymmetric slope or wave leans the other way.

  • Flip VerticallyDefaultOff

    Turn the shape upside down, so a curve that bulged outwards scoops inwards instead.

  • In Front of ContentDefaultOff

    Raise the divider above the section content instead of behind it.

  • Outside SectionDefaultOff

    Overlap the section above/below rather than sitting inside.

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?