Play the Piano and Other Instruments via the WordPress Block Editor – WP Tavern


Justin Tadlock
Tetsuaki Hamano released the Piano Block plugin for WordPress on Monday. It allows users to insert a piano-based interface into the editor for playing music. Mostly, it is just a lot of fun.
Hamano launched RichText Extension, his first submission to the WordPress plugin directory, in the spring of 2020. At the time, block-related plugins were still scarce, but he has continued contributing extensions since that initial release. Flexible Spacer Block is invaluable for responsive vertical spacing. Flexible Table does the same for table elements, and his Custom HTML Block Extension is handy for anyone writing code regularly from the editor.
While his previous outings covered several vital features for different user groups, his latest is a bit more on the lighter side of things. 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 that I love about blocks is that they do not have to serve a vital function in producing content for a site. Sometimes, their purpose is to simply bring a little joy into our lives. That is what Piano Block does.
Hamano noted in the plugin description:
This plugin does not add any useful features to WordPress, nor does it add any useful blocks to help you write posts. Let’s insert this block and enjoy the music if you are stuck in writing an article or just want a little distraction.
The plugin merely adds a web-based musical instrument to the block editor, offering a change of pace from building content. It does not appear on the front end of the site.
The block offers a range of 14 instruments. The default is an acoustic piano, but users can switch between various keyboard, string, brass, and woodwind options. Plus, there is a xylophone.
Users can move up or down two octaves, change the volume, or toggle the sustain pedal on and off. Other than that, there are no other block-specific options.
The block’s keyboard mapping threw me off at first. I peeked under the hood and found the JavaScript code for assigning each key. I was tempted to clone the plugin’s GitHub repository, set up the build tools, and customize it. However, that seemed like a lot of work for a block meant to be a momentary distraction. It was not time for me to put on my developer hat.
So, I tickled the plastic keys of my laptop, trying to rewire my brain to a layout that did not match an actual piano. I just had fun with it, and that is kind of the point.
I rarely record videos, being much more comfortable tapping my laptop’s keys than doing anything on camera. Therefore, Tavern visitors are in for something of a treat today. I put together a short clip of me playing a song via the Piano Block:
That was tougher than it looked with the keys in odd places. Apologies if I missed any notes or lines. It has been a while since I have heard Twinkle, Twinkle, Little Star. I believe it goes a little something like that.
I am continually amazed at what some developers create 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?
A wonderfully useless and time consuming plugin that is so cool!!
I’ve struggled to find any use for the block editor, retrying it every few months, and had unfortunately found no use for it…until now. What a joy of a plugin. I’ll keep block editor active on a site just for the Piano Block.
…also, nice job playing, Justin. It sounds good, thanks for the demo. Thanks for looking out for those fun types of plugins.
Can’t think of any significant reason to implement this on a site other than just how cool it is. Maybe for some instrument lesson blogs, so that the learner could try something out immediately during the class?
Your email address will not be published.

document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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



Please enter your comment!
Please enter your name here