Justin Tadlock
Automattic released a new plugin titled Sketch Block earlier today. It is a one-off block that allows end-users to draw directly in the editor. The plugin is marked as a beta release and requires Gutenberg to be activated to use. It is a part of the company’s Block Experiments project.
To be perfectly honest, I spent an excessive amount of time playing around with this block plugin today. And, if I am going overboard with that honesty, most of that time was just trying to write out my name. It was hard not to. Drawing things directly in the editor is just kind of fun.
I am unsure how many practical uses the plugin actually has at its current stage, but not everything needs a purpose outside of pure entertainment. Like an embedded Block-a-saurus game and ghost-written headings, sometimes we just need reminders about the wild and whacky side of the web. We also need to experiment with new ideas from time to time, which can lead to unexpected discoveries, creating the foundation of future technological advancements.
Sometimes we just need to relieve some stress and sketch out our names in a new tool.
I tested the block using my laptop’s trackpad — not an ideal method for freehand drawing. Unfortunately, I did not have access to a larger touchscreen device for a more thorough test.
The block offers a limited number of controls as of version 1.0.7. Users can select between three different stroke widths and choose from their theme’s color palette. The block’s height can be resized, but there seems to be a minimum of 200px.
I did manage to break it a few times, running into the “This block has encountered an error and cannot be previewed” error. There also seemed to be an unknown minimum width, which could not be adjusted. My goal was to create a columnized team page with each member’s signature beneath their profile photo. However, the Sketch block kept breaking outside of my columns. In the end, I created a single-member bio section:
The plugin is built on top of the Perfect Freehand JavaScript library. When comparing Automattic’s block implementation to the library’s demo, the plugin falls short of offering the same experience in block form.
Perfect Freehand’s demo felt smoother. I was able to consistently draw with more accuracy using my laptop’s trackpad. I do not know if just the size of the drawing area made a difference or if the editor interfered with the feeling.
The JavaScript library has a ton of extra options too. Users can transform even the worst drawing into something a bit cleaner with the thinning, smoothing, streamline, and other controls. I would love to see the Sketch Block plugin integrate the full suite of tools available through Perfect Freehand.
Despite a few bumps, the plugin is a solid first release for a beta project. I am eagerly waiting for what future versions have in store. I also wonder what applications it might have outside of piddling around for fun, such as notetaking or animations.
I could see this being useful for maybe sketching a wireframe. Or, as a creator, maybe sketching part of a DIY project like woodworking.
Something like a draw.io (diagram drag and draw) block would be sensationally practical and useful!
It’s actually a lot of fun!
How does it render and handle alt text? Is the output accessible?
Let me know if you find this out and I will do the same!
It’s an <svg> element, so it would need a <title> and/or <desc> tag. However, there is no option for adding those. That might be a good request.
As for the accessibility of the rest of the output, feel free to ask about anything specific.
A description field is getting added soon. We were going back and forth in case we allowed turning the svg into an image (using alt text) as a fallback for the cases where an svg element cannot be rendered or is not suitable.
Version 1.0.9 of the Sketch Block plugin has been published with the inclusion of a description control which ends up rendering as the <title> inside the SVG element.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
