Automattic Releases Sketch Block for Drawing in the WordPress Editor

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:

Profile card in the WordPress editor, signature written beneath the profile photo.
Creating a profile card with Sketch Block

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.

"Justin" written in the Perfect Freehand demo, hand-drawn.
Drawing in the Perfect Freehand demo.

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.

8 responses to “Automattic Releases Sketch Block for Drawing in the WordPress Editor”

  1. I could see this being useful for maybe sketching a wireframe. Or, as a creator, maybe sketching part of a DIY project like woodworking.

    • 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.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: