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.
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.
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.