Layout · Gutenberg
Shape Divider block for WordPress
SVG shape dividers — wave, curve, triangle, tilt, zigzag — to create seamless section transitions.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
SVG shape dividers — wave, curve, triangle, tilt, zigzag — to create seamless section transitions.
Inspector panels on this block: Shape, Layers & Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Shape” options: Wave, Wave Alt, Wave Small, Curve Down, Curve Up; “Position” options: Bottom, Top; “Layers” options: 1 layer, 2 layers.
Shape Divider has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Layout → search “Shape Divider” (block name `blockenberg/shape-divider` in block.json). Style it in the sidebar after insert.
How to use Shape Divider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Shape Divider”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Shape. Set “Shape”, “Position”, “Height (px)”, “Width %”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Shape | Select control; the chosen value is saved on the block. Options: Wave; Wave Alt; Wave Small; Curve Down; Curve Up; Triangle; Tilt Left; Tilt Right; Zigzag; Mountains. block.json default: wave. Saved as `shape`. |
| Position | Select control; the chosen value is saved on the block. Options: Bottom; Top. block.json default: bottom. Saved as `position`. |
| Height (px) | Numeric range control in the inspector. Range 20–300. block.json default: 80. Saved as `height`. |
| Width % | Numeric range control in the inspector. Range 100–200. block.json default: 100. Saved as `width`. |
| Flip Horizontal | On/off toggle in the inspector. Off by default. Saved as `flipHorizontal`. |
| Flip Vertical | On/off toggle in the inspector. Off by default. Saved as `flipVertical`. |
| Layers | Select control; the chosen value is saved on the block. Options: 1 layer; 2 layers. block.json default: 1. Saved as `layers`. |
| Layer 2 Offset (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `layer2Offset`. |
| Animate (wave scroll) | On/off toggle in the inspector. Off by default. Saved as `animate`. |
| Animation Speed (s) | Numeric range control in the inspector. Range 2–30. block.json default: 8. Saved as `animationSpeed`. |
| Z-Index | Numeric range control in the inspector. Range 0–100. block.json default: 1. Saved as `zIndex`. |
| Shape Color | Color control in the inspector. block.json default: #ffffff. Saved as `color`. |
| Layer 2 Color | Color control in the inspector. block.json default: rgba(255,255,255,0.4). Saved as `layer2Color`. |
| Background Color | Color control in the inspector. Saved as `bgColor`. |
When this is the right block
- SVG shape dividers — wave, curve, triangle, tilt, zigzag — to create seamless section transitions — that is the job of Shape Divider, not a generic content block.
- Use it when you need the editor control labeled “Shape”, which exists on this block’s inspector.
- It matches pages about shape, divider, wave.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Shape Divider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Shape Divider”. It sits under Layout. After insert, open Shape and set “Shape”, “Position”, “Height (px)”, “Width %”.
What makes Shape Divider different from other Blockenberg blocks?
SVG shape dividers — wave, curve, triangle, tilt, zigzag — to create seamless section transitions. Inspector labels on this block include “Shape”, “Position”, “Height (px)”, “Width %”.
Is the Shape Divider Gutenberg block free?
Yes. Shape Divider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Shape Divider to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Shape, Layers & Animation).
Related layout blocks
Separator / Divider
Decorative divider: line, wave, zigzag or dot pattern, optionally with an icon or text in the centre.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Section
A container section for organizing content with rows and columns.
Skewed Section
A content section with diagonal/angled top and/or bottom edges created via CSS clip-path. Place any blocks inside.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Shape Divider from the Gutenberg inserter.