I’ve found myself with the time on my hands lately to start digging into the WordPress Gutenberg editing experience. I’ve heard lots of good things, and I was starting to get curious what all the fuss was about. Well, after digging into it and building a few custom blocks, I thought I would share my thoughts and experiences. I’m coming from a fairly extensive background working with the traditional WordPress editor and development experience. I’ve also had a good bit of experience working with WordPress as a headless CMS.
Something I always strive to achieve in my site builds that are backed by a CMS is pushing the power to build the site back into the end-users hands. Continually asking myself, “Who will be editing this content, and why?” This can be vitally important when making decisions surrounding CMS choice. When I first looked into the Gutenberg editing experience I immediately noted the power and extensibility it offered to both the end-user and the developer creating that end-user experience. That said the choices made with Gutenberg are still important, as WordPress developers we often ride a fine line between offering the user the ability to change everything, and keeping the choices the user can make inside the scope of our structure and layout.
In the past I found myself achieving this with plugins like Advanced Custom Fields, and page-types. Essentially offering a form filling experience on the back-end so the user had complete control of the content. But no matter what the user was still stuck within the structure of any given page template.
Enter Gutenberg… The Gutenberg blocks system offers the user unlimited ability to customize any post or page, while also offering the WordPress developer the ability to explicitly design the tools the user has at their disposal. The reason I see this as so different and groundbreaking is that we can now empower the user to define their own page template, by just building a whole bunch of modular components. WordPress offers a number of basic components out of the box as soon as you have a Gutenberg compatible version of WordPress running. These are default blocks adapt easily to most existing designs and can also be easily tweaked with CSS to meet your needs. We’ve had this functionality in WordPress for some time now, available via plugins such as Elementor, and Divi. The void that I believe Gutenberg fills is that without the overhead and opinionated nature of these libraries we can offer the same, if not and easier to use functionality to our users.
Lets talk React… I haven’t gone too deep into the React/Gutenberg rabbit hole yet, and expect another post following up with my experiences there. But, so far I would call Gutenberg “React Lite.” If you have any exposure to React at all, you’ll feel right at home working with Gutenberg blocks. I found working with JavaScript and the WordPress editor a freeing and enjoyable experience.
One of the key concepts that eluded me early on having worked on React apps a good bit in the last year, was that we’re not writing JavaScript to display our site. What we’re actually writing when developing Gutenberg blocks is JavaScript to generate markup to be placed in our WordPress database. I think that’s one of the most impressive things I’ve noted about Gutenberg, and that’s also the intelligent way it gets around all of these Legacy systems that have always existed inside WordPress.
In my most recent WordPress theme, for my friend Mikey’s site catnipapawthecary.com the entirety of what actually lives inside the theme is some configuration for my WordPress install, a very basic style sheet, and a series of PHP files setting up Loops for different things (posts, pages, categories, navigation). The rest of the site exists entirely inside a plugin that generates my custom Gutenberg blocks.
More updates to come as a wrap up development on this project.