The Shape Divider Block for Gutenberg – and WordPress Version 5

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. 

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. 

5 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,

      Jamie

      1. I am seeing this on an iPhone 5 in portrait, this disappears when turning to landscape mode

        1. Thanks Paul, we’ll take a look and fix ;)

  2. I built the startpage with 18Tags and Pagebuilder Pro. How can I use Caxton and the Shape Divider Block? And does Caxton replace Pagebuilder?

Leave a Reply

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