WordPress: An Introduction To Gutenberg

WordPress recently launched its latest update, 4.9.8, which includes a call-to-action to try out its new visual editor ‘Gutenberg’. In our latest video, our CTO, Jamie, gives an introduction to Gutenberg and what you can expect from the new tool…

See below for a full video transcription.

VIDEO TRANSCRIPTION: 

Hi, I’m Jamie. I’m the CTO at Flaunt Digital, and today I’m just going to do a quick intro video into Gutenberg for WordPress.

So Gutenberg for WordPress is essentially a new editor experience. So if you ever used WordPress before, it’s a pretty basic CMS. You got your title box at the top and a huge content area that you dump your content in. So you can do HTML in there or you can use the…it’s like a WYSIWYG, what you see is what you get, editor experience. So you can, like, format things, but it’s quite basic. If you want anything a bit more advanced than that, you’re going to have to be reaching out for plugins or using the WordPress meta fields.

I know there’s a couple of plugins that actually do quite a few similar things to Gutenberg. One of those is Visual Composer, which you might have heard of. It’s very popular. And this is a developer’s nightmare because you can really mess up your pages and your page layouts using that plugin. Because you’re essentially hoping that the theme that you’re putting into it has got the capability of styling it correctly. So this is going to be a similar problem with Gutenberg, but obviously it’s a more standardized experience. It’s going to be built into WordPress.

So just recently, they’ve rolled out an automatic update to WordPress. I think it’s 4.9.8. And that’s got a massive, essentially, an advertisement, pushing Gutenberg and the progress of it on the WordPress Admin home screen. So this basically tells you that it’s coming soon, it’s a new experience, and it’s offering you the ability to try it out. So if you’ve updated your WordPress install recently, you should see that. And you can click the little button, and what it does is it installs Gutenberg as a plugin for you so you can try it before it’s built into WordPress.

So what’s going to happen is, once WordPress reaches version 5, which is going to be before the end of this year, Gutenberg will be the default editing experience and classic mode will be part of a plugin. So it’ll switch around, essentially. So you’ll still have the ability to upgrade WordPress to 5, install the classic plugin, and carry on editing as you used to, if your theme requires that. But by default, Gutenberg’s going to be in there. So I think, come WordPress 5 in a few months’ time, there’ll be a lot of people scrambling around, trying to figure out how it works, especially if they’re building a new site and they don’t want to be installing the classic plugin, which obviously they’re not encouraging people to do.

So the main new concept with Gutenberg as an editor is blocks. So traditionally in WordPress, you’ve got your big content block, and essentially you shove everything in there. You might have shortcodes in there, but essentially it’s one big content block. So Gutenberg’s going to have multiple blocks. So this concept’s been used quite a few times in CMS over the years. You’ll see it in places like HubSpot. A lot of enterprise-level CMS have this type of functionality, too, where you can add little sections and they’re totally independent of one another. And you can, sort of, edit them in situ and you can drag them around on the page or just move them up and down, etc.

So by default, Gutenberg’s going to offer a number of different types of blocks. So you’re going to have all the standard things, such as quotes, images, image galleries, separators, all sorts of stuff. And mostly, these things are already available within the current WordPress editor, but these are all going to be their own blocks now. And so it’ll be a lot easier for theme developers to style these things, or you can just leave it unstyled for, you know, simple things like separators or just images.

So as blocks are the new killer feature that are part of Gutenberg, they’re actually encouraging shortcodes to be moved into blocks. So I mentioned shortcodes as part of the existing editor in WordPress at the moment. Essentially, shortcodes are just little snippets of text that you put in there and WordPress knows to transform that into, essentially, a big snippet. So it’ll be, like, a big HTML block. So you commonly get shortcodes for things like galleries and other things. And they want people to move them into blocks so that you can go into Gutenberg and pick your custom block, which used to be a shortcode, and just insert that directly into your page.

So just going back to some of killer features of Gutenberg, in my opinion, with the new block system, this obviously brings in a few new concepts. One of them’s reusable blocks. This is a great feature. So if you’re creating your own blocks, let’s say it’s for, like, a call to action that you want to use across your site, you can create that in one page, put all your branding in it, put your message in it, put your button in it that goes to a contact page or whatever. And then you can save it as reusable block. And in another page, when you want to use that same block, you can just plant that straight in.

And this is a common concept, but the cool thing is that you can edit it in one place and it will take effect across the whole site. And this is another, sort of, enterprise-level CMS feature that you find in, sort of, Adobe CQ and other ones that, you know, have huge enterprise users. And what they do is, sort of, use this as sort of a centralized brand manager. So let’s say you’ve got loads of blocks with CTAs in them or you’ve got blocks with just short messaging bits or little branding blocks or little quotes, etc. You might want to update in one place and get it to update across your entire site.

Now this is something that WordPress has been lacking for quite a bit now. There’s not been, like, a standardized way to manage stuff like that, unless you were to go ahead and, sort of, create a custom post type. You know, there’s a couple ways you can achieve it, but there’s no standardized way. So that’s what Gutenberg’s all about, really. I mean, from what it seems like, WordPress have realized now that there’s a lot of plugins and a lot of awkward ways to do these things. So they’ve decided to standardize it all, which is going to make developers’ lives a lot easier when they’ve got to support these types of ways of using the CMS.

So we’re looking forward to trying it out at Flaunt Digital. It’ll more than likely be appearing in thousands or millions of websites pretty shortly because WordPress 5.0’s only a couple of months away, as far as I understand it. And this will be baked into the experience.

So one last thing to touch on is the other plugins that do similar things. So I already mentioned Visual Composer. And Gutenberg pretty much, from what I can see, does most of the stuff that that plugin does. But it’s got an absolutely huge user base, so I’ll be interested to see what direction they take, whether they try and augment Gutenberg’s functionality or whether they try and do something totally different and encourage you to essentially uninstall it and then use the Visual Composer stuff. So it’s going to be interesting to see what direction they take. Because it’d be awful for WordPress to come out with a big piece of functionality like that and just totally supersede some plugin developers. So we’ll see how that pans out. So that’ll be interesting.

So that’s it. That’s been our quick summary of Gutenberg for WordPress. So it’s exciting times in the WordPress world because this is a fundamental feature of the CMS and it’s something that’s going to change for years and years. So it’ll be interesting to see if people are willing to pick up and run with it or whether they’re going to be using these little ways to still use the classic editor, which would be a shame because the whole point is standardizing it. So if it ends up being fragmented two ways, it’s going to make developers’ lives worse. So hopefully people will pick it up and run with it and it’ll be the go-to way of managing your page and your posts in future in WordPress.

So that’s it. Thanks for watching. See you soon.