Woooo this weekend I made a Gutenberg Block Kit plugin called vrk-richtext-code!!

So it all started because I’m trying to blog more, and to help with this, I wanted to start doing this thing where I blog about new coding/tech things I learn.

Last Friday I was drafting a blog post about Vue.js, and when I wanted to add a code snippet in my blog post, I noticed the default Gutenberg code block doesn’t support any rich text formatting. This was very annoying, because I wanted to highlight a keyword in my code snippet!

The problem

Here’s a video of the problem, where you see rich text formatting is not available for code blocks.

Also, notice that when I try to copy/paste the HTML snippet into a regular paragraph, the HTML is rendered instead of escaped:

So of course that meant I stopped learning Vue.js, I stopped writing my blog post, and instead spent part of my weekend implementing a Gutenberg code block that supports rich text!

The solution

Here’s a video of my plugin in action! See how you can copy/paste like a champion, and you can bold/italic/underline/link to your heart’s content.

You can play around with it and/or download it here:

Making the plugin (a teaser!)

To make a new Gutenberg plugin, in general:

  • I remixed the Glitch Gutenberg Block Kit and did all my development in the remix. This worked really well! The live preview worked flawlessly, and it looks & behaves exactly the same after installation.

As for implementing the RichText code block itself:

  • Oh boy, this was tricky! I used the RichText component underneath the covers, which almost worked out of the box, but the last 10% was absolutely brutal. Getting copy/paste to work was a mess, and HTML entities don’t escape properly yet because of this issue and this issue I just filed against Gutenberg lolol.

I’ll do another blog post with the technical details soon — this took a surprising amount of hackery to get working, which is always fun to share. Plus I’ll get to use my new plugin in my write-up, I’m sure!

Stay tuned!!

(And try out my plugin if you’d like! )