The Blocks
It was a lot of fun creating this collection of blocks and the plugin that supplies them.
I decided on divergent approaches for developing the blocks so that I could learn more about different options.
- Rendering the php independently from the edit scripts with save.js returning null
- Rendering the php independently from the edit scripts with save.js returning the InnerBlocks with blockProps
- Rendering the php independently from the edit scripts with save.js returning the InnerBlocks with blockProps and using a script to add listeners to create the desired responsiveness and user interactions
- Setting up the same dom structure in save.js and edit.js and hydrating the front-end with the React components used in the edit panel
I think the more complex was using a script to hydrate the front-end with the same React components used in the edit panel. All approaches involved making sure the front-end and the edit panel render the same. Because the edit panel is javascript and the front-end delivery is html/php, there are maintainability challenges with all of the approaches I tried.
The Main Component Blocks
-
Circular Image Gallery
A fun way to show off images. Including a circular thumbnail surround when the screen is really small.
-
Curved Edge Sidebar
Add a little flare to your page or block. Includes an option to animate the curve.
-
Responsive Offset Block
Allows for the left or right margin to be adjusted responsively.
Bonus Blocks
-
Circular Image
A simple circular image with options similar to those found for images in the Circular Image Gallery.
-
Section Divider
A decorative, horizontally resizable, option to separate sections.