Play Piano and Other Instruments Through WordPress Block Editor – WP Tavern

Tetsuaki Hamano posted the piano block plugin for WordPress Monday. It allows users to insert a piano-based interface into the editor to play music. Above all, it’s just a lot of fun.

Hamano launched RichText Extension, its first submission to the WordPress Plugin Directory, in the spring of 2020. At the time, block-related plugins were still rare, but it has continued to contribute extensions since that initial release. Flexible Spacer Block is invaluable for responsive vertical spacing. Flexible board does the same for the table elements, and its Custom HTML Block Extension is handy for anyone who regularly writes code from the editor.

While its previous releases covered several vital features for different user groups, its latest is a bit lighter. More than anything, it serves as a brief distraction, a way to break up the day for people who spend a lot of time in the WordPress content editor.

One thing I like about blocks is that they don’t have to perform a vital function in producing content for a site. Sometimes their purpose is simply to bring a little joy into our lives. That’s what Piano Block does.

Hamano noted in the plugin description:

This plugin does not add any useful functionality to WordPress, nor any useful blocks to help you write articles. Let’s insert this block and enjoy the music if you’re stuck writing an article or just want a little distraction.

The plugin simply adds a web-based musical instrument to the block editor, providing a change of pace from content creation. It does not appear on the front-end of the site.

Piano Block in the editor.

The block offers a range of 14 instruments. The default is an acoustic piano, but users can switch between different keyboard, string, brass, and woodwind options. In addition, there is a xylophone.

Users can move up or down two octaves, change the volume, or turn the sustain pedal on and off. Other than that, there are no other block-specific options.

The block’s keyboard mapping initially put me off. I took a look under the hood and found the JavaScript code to assign each key. I was tempted to clone the plugin’s GitHub repository, configure the build tools, and customize it. However, it seemed like a lot of work for a block meant to be a momentary distraction. Now was not the time for me to put on my developer cap.

So, I tickled the plastic keys of my laptop, trying to rewire my brain to a layout that didn’t match a real piano. I just had fun with it, and that’s kind of the point.

I rarely record video, being much more comfortable pressing keys on my laptop than doing anything in front of the camera. Therefore, visitors to the tavern will enjoy themselves today. I’ve put together a short clip of me playing a song via the piano block:

It was harder than it looked with the keys in weird places. Apologies if I missed any notes or lines. It’s been a while since I heard Twinkle, twinkle, little star. I think it goes a little something like that.

I’m continually amazed at what some developers are creating on top of the block system. More than anything, I want to see some of the talented musicians in the WordPress community – I know some of you are out there – record themselves playing something with Piano Block. A little jazz, perhaps?

Esther L. Gunn