Turning a shortcode into a block

I’ve had a couple of folks either reach out to me or ask on Twitter if it’s easy to convert a shortcode into a block.

The irony is that during my trial at Automattic, that’s exactly what I created, a tutorial on taking an existing shortcode plugin and adding it as a block.

I am in the process of editing that video into one that is hosted on Learn WordPress, and the plan is to eventually make that part of a larger series on block development. However, for now, it might be useful to share the original video here, so folks can find it and use it. Once I publish the edited version on Learn WordPress, I’ll simply redirect folks from here.

The prerequisites

This video includes details on how to use the create-block tool to create a new, empty block, and then copy the relevant code over to your existing plugin to add block support.

What it doesn’t cover is:

• setting up the required Node development tools for installing the required dependencies and the running setup and build scripts like npm init and npm build
• using create-block to scaffold your first block plugin.

I plan to record that workshop soon.

My colleague Andy Peatling also recently recorded a video on setting up a WordPress development environment, and he covers the Node/NPM setup at 0:46.

The code

I uploaded the code for this workshop to a GitHub repo. The block support is viewable in the feature/block-support branch, which also includes instructions. The feature/workshop branch is the version that I live coded in the video.

The video

If you have any questions about this topic, please let me know in the comments, I’d love to help you convert your shortcodes into blocks. Links to WIP GitHub repositories are also welcome, as I can check out your code, and see what’s going on.