From React to Gutenberg, a beginner’s journey
Later this year, Wordpress will introduce one of the biggest changes since it’s launch.
It’s not an overhaul of the front-end, or anything that an average website user will even see. It’s an overhaul of the website author’s publishing experience.
At the moment, that experience looks something like this:
But, as of autumn 2018, it’ll look, well, a bit more like Medium. Or Squarespace, or Wix, or whatever other drag-and-drop publishing platform takes your fancy.
It will take that big, empty, familiar content editor box and turn it into a series of blocks. Blocks are intended to be simple and reusable. Developers can even create their own, as an alternative to drowning users in a sea of custom fields and meta boxes.
Given that Wordpress now runs over a quarter of the web, it’s critical to get such a foundation-shaking change right.
Since its inception, Wordpress has been all about PHP, for better or worse.
Wordpress already made one giant step toward modernity when it gained its own REST API — opening up the platform and making it possible to create an entire multi-app publishing ecosystem, with Wordpress at the centre.
Now, React is notoriously tough for beginners to wrap their heads around. It requires a heck of a lot of tooling and configuration just to get up and running. Whole projects have been created to simplify this burden.
In fact, to many people, React is everything that’s wrong with modern web development. It’s unwieldy, confusing overkill.
Now, Gutenberg has tried to deal with this by providing their own, simpler API on top of React’s complexity for developers. Perhaps the pure-PHP developers that make up the bulk of the Wordpress community will feel better with that than if they were told to start learning React in order to continue customising their favourite tool?
But, two days into creating some custom blocks, it’s all starting to click. Comfortingly, you don’t need to know that much React to make Gutenberg work for you.
It’s still a massive change from the “traditional” methods of Wordpress theme and plugin development. Registering a custom widget or meta box with PHP feels very different to working with Gutenberg, and not just because of the language difference.
Learn JSX if you don’t already know it. You don’t need it to develop Gutenberg blocks, but without JSX, you’ll be making obscure function call after obscure function call without really understanding why. With JSX, a simple block might look like:
But without it, you’ll be faced with something like:
el( 'p', 'Hello world.' );
The latter style quickly becomes tough to read and interpret, especially with more complicated blocks.
I ran into a lot of issues around block validation errors. Gutenberg still spits out plain old HTML markup when a post is saved. When the user clicks the “Edit Post” button, it walks the HTML, teasing out which blocks are which. This is particularly tough if the custom blocks you define have user-editable fields.
On my first go, it took me about ten tries to show Gutenberg exactly how to take its plain HTML and turn it back into a block for editing.
Resources for learning block development
Gutenberg is still in beta, and so the official Wordpress Handbook documentation for creating your own blocks is a fair place to start, but is very brief.
I found the docs in the Gutenberg Github repo infinitely more useful, especially when trying to understand how to make my blocks user-editable.
Creating your custom block involves a fair amount of PHP and JS overhead. To eliminate this overhead, I really enjoyed using create-guten-block, which creates all the boilerplate code in a single terminal command.