/
Separator Block
Separator Block
A horizontal divider rendered as a div with border-top — not an <hr>. Use it to visually separate content sections with full control over line weight, style, and color.
VISUAL PREVIEW
Thin solid — 1 px
Thick dashed — 3 px
Colored — 2 px solid
When to use this block
- Visually break up long content sections
- Add decorative rules between headings, cards, or text blocks
- Create subtle or bold horizontal accents in layouts
Line Style
Control width, style, and color through the WP core BorderControl. Defaults: width 1px, style solid, color currentColor. If neither color nor width is set, the inner div is not rendered.
Border
Sidebar Panel
Width
px
Style
Color
currentColor
STYLE COMPARISON
Solid
Dashed
Dotted
Spacing
Padding adds space around the line inside the block wrapper. Margin controls the distance from surrounding blocks. Both use per-breakpoint objects with top/right/bottom/left values.
Responsive: Mobile Tablet Desktop
All Available Controls
Border Width, style & color
border: object from WP core BorderControl with three fields. border.width: line thickness (default 1px). border.style: solid, dashed, or dotted (default solid). border.color: any CSS color (default currentColor). If neither color nor width is set, the inner div is not rendered and no line appears.
Spacing Padding & margin, responsive objects
paddingMobile/Tablet/Desktop: per-breakpoint objects with top/right/bottom/left. Adds internal space around the border-top line. marginMobile/Tablet/Desktop: per-breakpoint objects with top/right/bottom/left. Controls external spacing from neighboring blocks.