This experimental WordPress block came from two sources of inspiration.
First, at WordCamp U.S. I attended the talk by Stephanie Stelzer about Disney’s creative approach to modular yet unique sites and how they inject play into each.
Second, Jack McDade’s “Radical Design” course. I’ve been a fan of both him personally and Statamic (his flat-file, Laravel-based CMS product) for awhile now, but his mission to build less boring websites has really been hitting home lately. (Yes, I know ironic for the ultra minimal theme of this blog, but hey, this is where I need to focus on just writing).
ScrapBlok is actually a pair of custom blocks: a canvas, as well as a pinned image component. The canvas also accepts any inner blocks so that it can wrap around arbitrary content.
Once the canvas is placed, pinned elements can be positioned freely using a bulletin board style approach to layer them however you desire!
I’ve also added the ability to add some parallax to these pinned elements, though at the moment the customization for this is a bit limited.
Because of it’s composable paired-block architecture, ScrapBlok can be used for a lot more than just full width collage-style layouts (though it excels in this department).
This block is a great way to add sticker/svg decoration elements to images in a flexible way. Simply wrap the image block with the ScrapBlok canvas, then add pinned elements and layer as desired!
I’ve found this to be really helpful for unlocking unique designs like the above, without needing to create a bunch of overwhelming options on a custom image block itself.
Future plans
I plan to add pinable text elements in the future as well, which will make creating live text+image diagrams possible to construct directly in the WordPress editor.
Right now, all the controls are housed in the inspector pane, including the positioning canvas.
I’d love to make this more interactive with drag/drop directly in the editor, but I’ve run into issues with layering when I attempt to handle positioning directly in the main editor.
If you think you have a good solution that keeps editing simple and easy, but feels more interactive, I’d welcome a fork / pull request on github!