The Shape Divider Block for Gutenberg – and WordPress Version 5

shape dividers for gutenberg

With the release of Caxton 1.7.1 – our Gutenberg based plugin – we’ve introduced a brand new block, called the Shape Divider Block.

The Shape Divider Block makes it easy to create beautiful transitions between your Gutenberg rows. Below is an example 🙂

With this release we’ve introduced 5 styles of Shape Divider, including; Clouds, Waves, Pyramids, Tilt and Book.

The Shape Divider Block has lots of powerful customization options, and because it uses the new Gutenberg Editor it’s super easy to use.

The Shape Divider Block works great with our Caxton Layout Block that also comes as part of our Caxton plugin. The Layout Block makes it easy create complex grid layouts and add backgrounds (images and colors).

Here’s some examples of the Shape Divider Block for Gutenberg

Customization Options

The Shape Divider Block comes with a full range of customization options including

  1. Set to Full width
  2. Place Dividers above or below Blocks
  3. Change colors
  4. Flip Blocks
  5. Place Shape Dividers over blocks, to create cool cut out effects

Easy to use

Because the Shape Divider Block is based on the new WordPress Editor, Gutenberg, it means that using it is really simple. Here’s a little animated gif that shows you how to use the Shape Divider Block to add a shape above an existing row. 

The Shape Divider Block for Gutenberg - and WordPress Version 5 10

And here’s an animated gif that shows you how to add a Shape Divider Block to create a cool cut out effect on an existing row – in this case a photograph. 

The Shape Divider Block for Gutenberg - and WordPress Version 5 11

8 thoughts on “The Shape Divider Block for Gutenberg – and WordPress Version 5”

  1. I can see a thin orange line across the top of the shape in some views? Is this a rendering issue? Love the concept though 😄

    1. Hi Paul,

      Firstly thanks 🙂

      Could you let me know which views you see the thin orange line ? I’d like to replicate so we can fix up,


  2. How do you use the shape divider to ‘cut out’ the bottom the featured image? (e.g the bottom right screenshot)

    1. Hi,

      You can only cut out images that have been built with Gutenberg, i.e that are part of the page.(which featured images aren’t)

      So if you image is part of the page you are building, use the option to set the shape divider over previous block.


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top