If you’re in the WordPress community, you’ve probably been thinking and talking about Gutenberg for quite a while now. There seems to be a real mix of feelings within the community which range from excitement to worry. Unfortunately, the latter seems to be more prominent at the moment.
A feeling of worry isn’t a surprise though. The WordPress development ecosystem hasn’t really changed over its lifetime. We’ve had big additions over the years such as Custom Post Types and the incredible REST API, but generally, it’s been the same old loop. This is arguably one of the key reasons why Wordpress powers around 30% of the internet.
With a low barrier to entry, an approachable theme system and the famous 5 minute install, it’s easy to see why WordPress is so popular with developers from all ability levels. This is all potentially going to change though, because Gutenberg looks like it’s really gearing up to rock the boat.
About my experience with WordPress
Before we dive in, I thought it’d be useful to give you, the reader some context about my experience with WordPress.
I first picked up WordPress in 2010 when it was at about version 2.9 and I absolutely loved it. This feeling was stoked when I found Digging Into WordPress by Chris Coyier and Jeff Starr, which helped me learn fast to deliver a client project which I’d massively over-promised on…
Over the years I’ve dipped in-and-out of the WordPress world, working both on custom themes for websites and maintaining other developer’s work, so I’ve kept in tune with the API changes and community.
You could say…
( •_•)
( •_•)>⌐■-■
I’ve always been in the loop…
(⌐■_■)
Anyway…enough puns, let’s get cracking.
What’s Gutenberg?!?
Gutenberg is an all-immersive editor that allows an author to build out their content in easy to manage blocks in an almost distraction free setting. The block-based setup means that they can easily edit and rearrange content with no knowledge of HTML whatsoever.
It brings great power to content-producers, which are the heart of WordPress. It’s always worth remembering that WordPress’ largest sites are generally article based, so enhancing the production of articles needs to be the focus. I think Gutenberg is going to be a dream for content producers on that front.
Gutenberg feels really familiar to me because I’m a huge fan of Notion, which uses a similar, more advanced concept. It’s also similar to Dropbox Paper and Medium. It’s certainly a trend in content production that’s being capitalised on by the core WordPress team.
But, even with all of this exciting innovation, Gutenberg is not going down well with some of the WordPress community.
Understandable concerns
The main theme I’m picking up with the negative comments about Gutenburg is:
“What about our old sites? Why isn’t there an option to turn it off for them?”
I totally get that, because I’ve done a lot of work with WordPress, of which some has been maintaining some really creaky sites. This in my experience is usually caused by a developer or team of developers throwing multiple plugins at the site to make it do what they want it to do.
I get why they do that though. The platform enables it.
When I first started working with WordPress, websites were very much header, content, sidebar and footer only. The platform supported that with ease. As the web has developed though, the introduction of plugins such as ACF and Visual Composer have stepped in to help support that evolution.
The use of these plugins has however, made for a pretty janky user experience on the CMS-end and really adds weight to the front-end if not used responsibly. Because of this, it totally makes sense that WordPress would introduce Gutenberg into the CMS to flip that experience back around.
A change for me in custom WordPress development
Theme and plugin development within the WordPress ecosystem has always been a pain point for me. I’m not very strong with PHP and have always worked with it out of necessity rather than choice. Because of this, I’ve never enjoyed rolling out custom themes and plugins for WordPress.
I’ve also never been the biggest fan of the WordPress front-end either. I much prefer setups like Craft CMS and Kirby CMS because they tend to stay out of the way of my markup a lot more. This opinion and working within certain tech stacks in my day-job has seen me existing away from WordPress for quite some time now and if I’m really honest: I’ve not missed it’s workflow too much.
That opinion is changing though, thanks to Gutenberg and the power it gives to me, a front-end developer.
Modern JavaScript and design systems are suddenly first class citizens
Gutenberg brings in a heavy reliance on JavaScript for custom block development. To a JavaScript developer like myself, this is a dream scenario. What’s even better is that structure of a custom block is reminiscent of modern frameworks, which make it instantly recognisable and above all, attractive.
With a solid Webpack (or alternative) setup, we can be putting together custom blocks with ES6 and JSX. This is a world away from wrestling the jQuery-ridden spaghetti jungle of old and it’s a setup that’s making me want to come back to the WordPress community with arms-wide-open to give it a big hug. Gutenburg is more than a new editor because of this. In my opinion, it’s a movement.
Better theme development
This new infrastructure makes theme development more appealing to me too. I can see my template’s resembling something like this:
Mind blown, right? Abstracting the theme into blocks enables me to not work within the classic template system, which enables this sort of thing. This is also because Gutenberg’s block structure sits perfectly with component driven design systems, which is the way I love to work. This is true even for a small brochure site.
The patterns and components that I build with HTML and CSS can be translated into completely editable blocks of content by converting them into a compact, JSX driven component. This also means that the content producers have complete control with a tight style guide driven based system to work with which is incredibly easy to maintain.
With modern CSS and smart strategies to control rhythm and flow between components, there should be no reason that someone couldn’t fire up a new page and build it out from scratch. Importantly, this is done with all of the content being stored in one single column in one single table. Compared to the scattered and inefficient data-sets that custom field setups and plugins generate, this is massive in terms of performance and speed. Again, music to a front-end developer’s ears.
Gutenberg should give WordPress its identity back
From the outside, it’s seems like WordPress sites have been getting very bloated and very complex, both visually and technically. I understand that will largely be down to demand, but I can’t help think that it’s been pushed a bit too far at times.
With frameworks like Laravel around, it seems almost incomprehensible that someone would build something more complex than a content-based website with WordPress, but they do. I think this is contributing to an issue of a lack of identity where the lines between content management system and application framework are being blurred. This, in my opinion can have a negative impact to both new developers and “outsiders”, because it has an impact on searchable help content, such as within StackOverflow.
The way I see it with Gutenberg is that the WordPress core team have very much stuck a flag in the ground which screams content over anything else and they’ve produced one heck of a tool to push WordPress right back to the top with it too.
I want to help
So, aside from dumping my thoughts into this piece, I wanted to talk about how I hope that I can hopefully help the WordPress community in this transitional period. I’ve discussed the challenges of Gutenberg with a few friends who are working with WordPress daily about their worries and aside from legacy project issues, the main worry seems to relate to the modern JavaScript stack and the sudden reliance on it.
The modern JavaScript stack hasn’t made much ground in the WordPress world, which makes total sense based on the nature of WordPress development. I can only imagine how daunting some of the Gutenberg JavaScript stuff looks to someone who doesn’t work with that sort of structure on a regular basis too.
I hope to provide some remedy to this, because I’m going to create a reasonably in-depth tutorial on this stack and how you can work with it within the context of WordPress and Gutenberg. It’s currently being planned and revolves around custom block development, but starts by providing a primer to the modern JavaScript world to give developers a better core understanding.
Alongside this I have been planning a tutorial on developing a WordPress theme with Vue JS and the WordPress API. I’m going to pause that for a while so that I can push the former out as I think something related to Gutenberg will be more useful to the WordPress community. I do think a Vue JS based theme tutorial will provide some great knowledge to WordPress developers who are learning JavaScript though.
I think longer-term, some tutorials on custom theme development with custom Gutenberg blocks will be useful too. I think that’s a while off for now, but certainly being thought about.
If any of this stuff can even help just one WordPress developer get their head around this new situation, I’ll be super happy, so I’m looking forward to digging in.
For now though, stay tuned. I’ll report progress on Twitter as and when it’s appropriate to do so.
Wrapping up
Even though some of my comments could be deemed as harsh, I make them with the best intentions. I love WordPress and its community because they gave me so much, early in my career. I just want to provide an alternative viewpoint on Gutenberg and also offer my help.
I imagine some developers feel like I did when Apple announced that they wouldn’t support flash anymore. It was a worrying time then and I totally feel your pain now. I was lucky enough to be able to pickup JavaScript and develop a more sustainable skillset. I hope I can help you folks do that too :)
If you liked this post, give it some claps so it can reach others in the WordPress community. If you’ve got a comment, add a response or hit me up on Twitter.
