First Gutenberg Plugin

Kebo Code Editor Split View

As Gutenberg’s release approaches, with the release client for WordPress 5.0 set for a weeks time, I wanted to get to grips with what this meant for WordPress development.

I settled for scratching a personal itch for my first project and created Kebo Code, a syntax highlighting plugin which processes the highlighting live in the editor, storing static HTML for use on the frontend. This seemed both simple enough for an introduction to Gutenberg and solved my distaste for existing plugins which often require JavaScript libraries on the frontend and/or tracking scripts for external services.

A split of the two initial themes for the plugin, mimicking the Github and VSCode Dark+ styles.

While a relatively mundane and simple plugin it did allow me to use the main advantage of Gutenberg, a more dynamic and relevant UI. When you select the Kebo Code block you see a plain text editor for adding your code, and when you move off the block you see exactly what it will look like on the frontend. This flexibility plays to the strengths of Gutenberg, allowing users to more easily craft content from the editor.

Seen above is the main difference to most syntax highlighters, it is using CodeMirrors runMode function to process the highlights on any change, allowing you to preview changes live in the editor.

Overall I am pleased with the plugin, it certainly serves its purpose and has fulfilled my requirements, but what about the experience of developing with Gutenberg?

I went into this project quietly confident, I have made a website with React prior to this and have written a library in TypeScript, however I was surprised by how challenging it was at times.

I love Gutenberg for the potential it has for user experiences and I do believe it is a necessary step forwards for WordPress, but I am apprehensive about the barriers it raises for WordPress development. Knowing JavaScript and React well almost feels a requirement, to be able to reason about problems and troubleshoote them.

Part of the problem is Gutenberg being so new, lacking proper documentation and community guides, yet even considering that I believe that WordPress developers are going to need to transition to a more JavaScript centric role, which is going to be difficult for many.

It is going to be easy for developers with little to no previous JS/React experience, who do not have SCRIPT_DEBUG set to true, to see a console error message like t is not a function and have no idea what that means or where to go from there.

In short, Gutenberg is exciting and offers great potential but there will be some hard work and frustration ahead for most of us.