If you are running a WordPress website or blog then with your WordPress 4.9.8 update you’ll be greeted by a suggestion on your dashboard asking if you’d like to install Gutenberg to your WordPress site to aid with testing prior to it being rolled out as default with all WordPress installations later this year.

‘Testing’ you say? Well, yes, although it has already been tested thoroughly in a closed beta, it’s now open beta time, which allows the developers to gather a lot more data about unexpected ways it can break with millions of websites using it in new and unexpected ways. 

So… Should I install Gutenberg or not?

From what we can see so far it seems pretty stable, and hasn’t caused behaved in any unexpected way on our site. The features (which I’ll go into a little bit below) make it worth the small risk. If it does behave unexpectedly on your site you can always deactivate it like any other plugin… And you should be regularly backing up your site anyway.

Gutenberg – The Features

This paragraph was added using the ‘insert block’ button shown below, which allows you to add blocks between other blocks. What is a block you ask? Awesome is what they are.

Gutenberg basically turns your standard WordPress post editor into something very similar to what you might see in a Visual Builder, think Visual Composer but nicer.

Blocks are exactly what they sound like, you build your post by adding blocks of content such as paragraphs, headings, images, etc etc. All the basic parts you’d expect are there, but also there’s a whole lot of extras that I didn’t expect and was pleasantly surprised by:

  • Lists and numbered lists
  • Images much like the original wordpress images option, as well as cover images (seen at the top of the post) and a lovely gallery option
  • Code – Finally a simple and tidy way to insert custom html, css, and JS code to your posts. 
  • Formatting blocks – Add page breaks, read more, line breaks, and even columns (which is one of the few elements still in testing (it might break a little bit))
  • Embed tools for an enormous range of sites including Facebook, Linkedin, Youtube, and a whole lot more.

You can find a comprehensive breakdown of the new features on the Gutenberg intro on the WordPress site. You’ll also get a intro post when you do install Gutenberg to your site.

Friendlier Features

Gutenberg also comes with some nice options for editing each block. Which you select an element you see a list of options to edit on that block on the right of the screen, allowing you to change things like font-size and colours, add a drop cap first letter like this paragraph (stylish hmm?) and most important – allows you to assign a custom css class to your block so you can literally do anything you want to it.

Like make a regular block of text stand out using a custom CSS animation! You can see the code used below – also displayed using one of the built in editor tools.

<style>
@keyframes growy {
0% { transform: scale(1);}
100% { transform: scale(1.1);} 
}
.css-test {
animation: growy 5s ease-in-out infinite alternate;
}
</style>

Autosave is here!

That’s right. Never lose your work on a post ever again, Gutenberg autosaves as you write, much like in Google Docs, so no more saving as draft – it’s automatically done as you write, until you hit that publish button.

(Gallery feature looking sweet!) I’ll show you how to make some cool poster images for your blogs in an upcoming article.

Reusable Blocks

Potentially most exciting is the ability to right click on any block you’ve created – it could be a block of text you often have to copy and paste, or a set of logos or testimonials you like to use occasionally – and hit ‘add to reusable blocks’ so you’ll be able to just add it to any post you make in the future. 

That might not sound super exciting but you can get pretty creative, especially with some custom html and css code blocks.

Overall, Gutenberg is a vast improvement over the previous WordPress editor, it’s better in every way.