Curved Edge Sidebar
Curves are fun
Wherever you see a curve, it was probably done with the Curved Edge Sidebar block – the title block above and the the curves on the sides of this page are examples.
Animation is also fun
Each Curved Edge Sidebar block has an animation option. The curves on the sides of this page morph from one SVG curve to another as you scroll down the page.
Sometimes you need a little space
Because responsiveness is important, I decided to add an option to allow the sidebar to take up less space on smaller screens. The admin sets the minimum sidebar width and the window width at which to start the reduction.
Here’s a little break before another block of text
The Idea
I like curves and animation and was curious how a javascript heavy component could be implemented with the Gutenberg block architecture.
The fun part
The fun aspect of the curved sidebar is the animation option. It uses the motion/react and flubber javascript libraries to transform from one SVG to another. So, I needed to make sure I could implement those outside of the edit panel.
To do that, I chose to set up the block front-end script to hydrate the DOM with the React components. The relevant attributes are added to the block’s containing div as a blockAttributes dataset. They are then parsed in the front-end script that hydrates the block with the appropriate React component.
The complications
One thing that I ran into regularly while attempting this implementation was the need to keep the edit.js output matching the save.js output. If this were more than a learning adventure, I might not use this approach. It doesn’t seem to lend itself to easily implementing improvements if there are existing instances of a previous block version.
Potential enhancements
- Give multiple SVG shape options
- Possibly provide options where the admin can mix and match the start and end options
- Allow the admin to supply the SVGs