Using the Gutenberg Block Builder

Blogging, Website Design

So, you upgraded to WordPress 5.0 one day, logged in to write a blog post and….PANIC! Everything has changed! Yes, the Gutenberg Block Editor is here and it’s something to welcome to with open arms.

Right now, you might be pining for the good old, familiar Classic Editor. It was like a comfy pair of slippers, but it was also a bit of a pain, right?

It was difficult to get paragraph spacing to work well and formatting images and text together was really hard. If you flipped from Visual into Text view, it was a hot mess – you saw the whole damn page html in a long jumble.

Gutenberg Blocks are here to make your workflow easier. It might not feel like it to start with, but you’ll soon feel right at home.

How the Gutenberg Block Editor Works

Think of Gutenberg like a primitive page builder (or a less advanced version of Divi, Elementor or whatever your builder of choice is).

It’s not designed to rival those tools. It might do one day, but it’s nowhere near flexible enough for creating beautifully designed pages, but when it comes to writing blog posts, it’s a big improvement on the Classic Builder.

Whatever you need to do in Gutenberg, there’s a block for it. Need to add a Heading, paragraph, image or gallery? These are your core blocks. In fact anything that you used to see in the Classic Editor kitchen sink – bullets, buttons, quotes – all have a Gutenblock, ready to drop in.

New Features

So, what does Gutenberg give you over and above the Classic Editor.

1. Better and more styling options

Everything looks a little slicker out of the box. Buttons and pull quotes look more modern and you can easily change styles and colours. If you create a particularly handy block, you can save it to your block library as a ‘reusable’ block. Handy.

2. Layout tools

Columns and spacing blocks are a very welcome addition – perfect for laying text alongside images. No more hit and miss positioning, writing html tables or inserting divs to hold everything in place.

The block controls allow you to add and remove columns with a slider control.

Grab handles allow you to resize on the fly and captions and alt tags are easy to add.

3. Third Party Blocks

When Gutenberg was first released, there was a lot of talk about plugin authors not being ‘Gutenberg-ready’. The big hitters certainly are now.

New native integrations are popping up almost everyday (there are embed blocks for YouTube, Vimeo, Twitter etc), which is a huge timesaver.

And more popular plugins like WooCommerce have their own range of blocks. Dropping a product or grid of products into a blog post is now just a button click.

If you’re still not convinced about Gutenberg, then you can upload the Classic Editor plugin and keep it old school. (Note, Divi users can toggle Classic mode on in the Divi Theme Options > Builder area. No plugin required).

If you’re ready to give it a whirl but want to see where everything is, watch my video below. And yes, there’s a block for that!

Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.

3 Comments

  1. Christopher James Hall

    Thanks for the advice. Must admit I haven’t really tried the wordpress builder (perhaps I should give it a go) I prefer to keep to the theme that I am currently using and the tools it already has (nothing like sticking to your comfort zone).

    Chris

    Reply
  2. Brooks Conkle

    This is a great video! After building a handful of sites with Divi, I STILL wasn’t clear about how to build out sites, which builder to use (front or back-end), etc. —- this has been very helpful.

    Looking forward to build with confidence again 🙂

    Reply
  3. Crystal Lee

    I fought hard against this change for soooo long. But now I don’t know how I ever blogged without blocks!!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.