Section Divider

Why a custom section divider?

A simple line is appropriate for many applications, but can be bit boring. I thought it would be fun to create something that fit a little better with the overall aesthetic, so that’s what I did.

The tricky bit

Well, to be honest, it wasn’t all that tricky. It just required separate SVGs for the line and for the decoration so that the line could change width without affecting the decoration.

This is one of the blocks that renders the front-end, through render.php, completely independently from the edit panel through edit.js

Potential enhancements

  • Provide some options for the decoration
  • Allow the user to upload/enter a decoration SVG