Location
Shape Dividers should be placed in the editor root or within a Column, Group, or Cover block. Technically they can be placed anywhere but may not work as expected.
Masking
Shape dividers can be positioned over other blocks within a group. Multiple dividers can be layered to create more complex shapes.
Document Flow & Stacking order
A shape divider is positioned relative to its peer elements by default, but may be set to absolute top or bottom of the first relatively positioned ancestor element container. It may be necessary to add relative positioning to any element that will function as a container for a shape divider. The List View provides details about the stacking order, with elements higher in the list being placed further away from the viewer.
It is recommended to use the Spacer block when you need to control the gap between a shape divider and other blocks. Spacer blocks should appear before shape dividers in List View so the shapes are not obstructed in the block editor.
None
This shape divider has its Position set to None, which makes it use vertical space.
Top
The above shape divider has its Position set to Top, which makes it absolutely positioned and not use vertical space.
Bottom
The below shape divider has its Position set to Bottom, which makes it absolutely positioned and not use vertical space.
Height
The shape divider height can be set to % or px units. Use % to achieve a responsive behavior that scales proportionally with the shape container. When using % a minimum height, and optionally maximum height, can be set in pixels. Both of the examples below use the Fill setting for Fit.
Responsive (%)
Static (px)
Columns
The shape within a columns block should flow seamlessly into another column of the same color.
Notice how the background of the following column blends seamlessly into the shape divider in this column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Et ille ridens: Video, inquit, quid agas; Ita prorsus, inquam; Tum mihi Piso: Quid ergo? Nam quid possumus facere melius? Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete.
Fit
The fit of the shape to its container can be Fill, Contain, or Cover.
Fill
The shape stretches to fill its container completely. This can lead to the object being distorted if the aspect ratios of the shape and container do not match.
Think of it like pouring water into a container – the water fills up every bit of space in the container, no matter its shape.
Contain
The shape scales proportionally to fit inside the container completely, without being cropped or distorted.
Imagine trying to fit a large poster into a picture frame. If the frame is smaller than the poster, you’d shrink the poster down to fit inside, but you’d still be able to see the entire poster.
Cover
The shape scales proportionally to cover the entire container. If the object’s aspect ratio differs from that of the container, the object will be clipped.
Imagine you have a book cover that’s a bit too large for the book itself. When you wrap the book with this cover, you make sure that the entire front of the book is covered. However, to ensure it’s completely covered, some parts of the edges of the book cover design might be folded over to the back or even trimmed off.
Fit & Repeat
The fit of the shape affects the repetition of the pattern. All of the shapes below are repeated 2
times.
Fill
Contain
Cover
The scale of the shape affects the visibility of the pattern repetition. All of the shapes below are scaled horizontally 200%.
Dimension
Shapes can repeat as a row or a grid. The examples show a star repeated 2 times, one as a row and the other as a grid.
Animation
The animation attributes are stored within the shape. Animations are triggered when the shape comes into view.
