Gutenberg building blocks
Gutenberg (the WordPress editor) was released in late 2018. It drastically changed how users edit WordPress. More than that, it dramatically changed how developers built for WordPress.
The old editor is now referred to as ‘the classic editor’. It worked almost like Microsoft Word with a WYSIWYG editor. With plugins like ACF (advanced custom fields) you could add whatever fields you wanted, and editing a site was a case of filling in these fields.
The Gutenberg editor was more a shift towards something visual. Almost akin to a page builder – just not complete trash like Divi and Elementor.
Too much Javascript
Initially, Gutenburg involved lots of JavaScript and was a bit of hard left turn for WordPress. Relying on the javaScript framework React in an eco system that up to that point was primarily PHP was an odd move. It would be fair to say it received a mixed reaction at the time:
“They said Gutenberg was ‘simpler for beginners’. B*llshit. It’s simpler like a minefield is simpler than a maze. At least in the maze you know you’re lost.”
— A user on WordPress.org Support Forums
It even spawned some classic reddit user handles such as ‘GutenbergIsActualCancer‘. That’s the internet for you.
Even now, seven years later some developers still hate Gutenburg and prefer to use the classic editor or even the devil spawn that is Elementor and Divi.
“Gutenberg is the One Ring of page builders. It promises power but slowly corrupts your soul, makes everything you touch worse, and can only be destroyed in the fires of Mount Doom (also known as ‘reinstalling Classic Editor’).”
— A user on the r/ProWordPress subreddit
I’ve always believed that the best tools are the ones that make the end users life easier – not necessarily the developers. There are some limits to how much hell I will put myself through though.
So with that in mind, what are the options for using and developing in Gutenberg so we can make a decent, easy-to-user site at the end of it? How do we make it a useful tool that doesn’t take forever to whip into shape?
Just learn React?
The hardcore option. Build blocks with React. Using React you can create and style blocks in the backend. If you are not using React in the front end then guess what? That’s essentially two websites for you to build and two eco systems for you to master and maintain!
This is a dumb idea. Most WordPress sites are brochureware. Sure, you get decent ecommerce, memberships sites and all sorts, but very rarely are you using WordPress for some sort of dashboard or insurance portal. That is what React is for! If you’re building some complex web app with React, more power to you. If you are building an 8 page website with React – just… why?
This is one the main bugbears with Gutenberg. If I wanted to be coding in React all day I’d work for an insurance company or Real Estate or something that actually needed React. Do you know how many WordPress developers I know who user Gutenberg this way? Zero.
If using React is massively overkill then what can we do?
ACF to the rescue
Advanced custom fields has been the backbone of WordPress since I can remember. It is effectively what makes WordPress a flexible and useful tool and a decent site editor. I really hope Elliot Condon is sat on a beach somewhere drinking Piña Coladas.
ACF adapted their plugin so you can build reusable Gutenberg blocks in PHP and not have to use React. This means you get all the benefits of the modular approach of ‘blocks’ with none of the React headache.
Building blocks
Using this method building sites in WordPress shifts away from hard coded templates and moves towards flexible reusable modular blocks. Like Lego bricks.
A hero, a text and image block, a testimonials block, a newsletter signup block etc. you can easily add these things to a page and reorder them at will.
It works really well and makes building pages intuitive. We’re back to it being like a page builder, but once again, not complete and utter trash. Opinions are split but some developers now love it.
Whilst it was a bumpy ride getting to grips with Gutenberg, I don’t think I could go back to the old way of editing now. Gutenberg very much changed the mental model of sites to be reusable blocks – even if most developers aren’t building them in the way WordPress intended.
All of the sites I build follow this mental model of each part of the page being a block, and building pages out of these blocks. It allows for far greater flexibility and allows users to construct brand new pages out of existing bits of the site. Since version 6.0 of ACF (released 2022) you can even copy and paste blocks which makes editing even easier.
The one thing slightly lacking in Gutenberg with this simpler ACF approach is the styling of the backend. Out of the box (and without React) you get quite a basic looking block whilst in the WordPress backend. There are several ways to solve this that I’ll talk about soon.