Getting started with Gutenberg. A Beginners Guide.

You may have heard of Gutenberg if you are a WordPress user. After all it has been a heated topic for over a year now, with the WordPress 5.0 release getting closer and closer it is time to really get to grips with the new WordPress editor.

In this short guide I will cover the very basics of Gutenberg and hopefully help ease the transition from the classic editor to the new Gutenberg editor.

  1. Gutenberg Editor Overview
  2. Using Blocks
  3. Creating Layouts
  4. Block Settings
  5. Categories, Tags & Feature Images
  6. Gutenberg Tools
  7. Gutenberg Settings
  8. Advanced features
  9. Common Questions

A basic overview of Gutenberg

Gutenberg is a completely new editor made for WordPress, is currently available as a plugin. Think if Gutenberg as a page builder compared to the classic editor. Gutenberg is focused on making rich layouts by using an array of blocks. Blocks are the core of Gutenberg and once you get your head around them it makes a lot of sense.

The Gutenberg Editor
The Classic Editor
Add Blocks Panel

Everything from a new paragraph to column layouts are added using blocks. That doesn’t mean you have to click add block each time you add a new paragraph, Gutenberg will automatically default to paragraph blocks so when you hit enter while typing a new paragraph block will be inserted. Likewise when pasting content from Google docs or Word the content will automatically be allocated blocks from each paragraph and heading.

Using Gutenberg Blocks

Blocks are actually pretty easy to use but do take a bit of getting used to. For me aligning images isn’t as intuitive as before but once you get the hang of things you will be pleasantly surprised with Gutenberg and welcome to the builder.

Gutenberg will automatically present you with a blank canvas. You can enter a title for your post and then hit enter to immediately start typing. Or you can click the ‘Add Block’ icon to add a different content block such as an image first. You will also notice some quick access blocks. The quick access blocks consist of your most frequently used blocks.

Every time you hit enter a new paragraph block will be inserted if you start typing. Or you will be presented with the option to add a different block or click a quick insert icon.

Layouts as blocks

Layouts can be created using blocks, this gives you the ability to add columns and more. Layouts will be limited by your theme, as Gutenberg progresses we should see much better integration from theme developers. At the moment we recommend you stick to 2 columns unless you know your theme supports more.

You can create really rich layouts if your theme offers more support for Gutenberg. Take the Uncode theme for example, by taking advantage of page options on your post to remove the sidebar, this will allows you to use the fullwidth Gutenberg settings and add more columns and layout elements. With a sidebar, the full-width settings tend to break the layout and overlay the sidebar.

Block settings

Most blocks have some additional settings or at least the ability to add a class to the block. Standard paragraph blocks give you some great settings to changes font-sizes, colours and even add a drop-cap to your paragraph.

Paragraph text settings
Paragraph colour settings

You can access the block settings by clicking the cog icon next to ‘Publish’ in the top right corner. There are two main setting tabs for Document and Block. Block settings are for the block that you have selected. If you don’t see block settings click on the block you want to edit.

The settings will vary from block to block, images have useful settings that allow you to add alt text quickly and even adjust the width of the image. Advanced settings usually give you the option to add a class to the block should you want to add CSS later and target the block specifically.

What about post categories, tags, feature images, etc?

Document settings

This is a very good question as this is the biggest change when you first start using Gutenberg. Not just the WYSIWYG editor has changed the entire post edit screen is different. Don’t panic as things move forward there will be more support from 3rd part plugins and themes. For now you can access all the usual stuff such as post categories, tags, publishing options and much more by clicking the cog icon next to ‘Publish’ in the top right corner.

What about other things like Yoast SEO and other meta boxes?

Yoast, in particular, has already adapted to support Gutenberg as have many other SEO tools and also other plugins and themes. Other meta boxes that usually appeared below the classic editor can still be found below the main Gutenberg editor.

META boxes with Gutenberg
Meta boxes below the Gutenberg editor

Other useful tools that come with Gutenberg

Gutenberg also has other useful features that will make creating great content easier than before. At the top of the Gutenberg panel you will see an ‘i’ icon, this gives you an overview of your content. This is very useful for SEO as you can see exactly what header tags have been used and the content for each one. 

Gutenberg Information
Gutenberg info panel

Next to the information panel you will also see a block navigation panel, this allows you to quickly jump to different blocks in your document.

Gutenberg Navigation Panel

Gutenberg Settings

One of the great things about Gutenberg is the additional settings and ability to customise the builder to your preferences. As development progresses we imagine that there will be more settings but for now you can access the available settings by clicking the settings menu next in the top righthand corner (next to the cog icon).

The settings menu has a few quick access features which make things easier such as ‘Unified Toolbar’, ‘Spotlight mode’ and ‘Fullscreen mode’.

Unified toolbar positions the main toolbar you see above each block, at the top of the viewport.

Inline toolbar

Spotlight mode is a great feature that fades out the blocks that you aren’t working on giving you a distraction free editing experience.

Gutenberg Spotlight Mode

Fullscreen mode is just that, a full-screen version of Gutenberg that hides away all the stuff that you don’t need to see when working on your content.

Getting advanced with Gutenberg

Gutenberg HTML Editor Options

HTML Editor

One of the things I love about Gutenberg is the code and visual editor, you can switch between the two seamlessly.

The HTML editor gives you the raw output from Gutenberg so you can make adjustments to fine-tune elements of your content if you are comfortable with HTML. I haven’t tested this in-depth so I’m unsure if you will loose formatting or classes as was the case with the classic editor.

Gutenberg HTML Editor Options
What a standard paragraph block looks like in the HTML view.

After making changes to the HTML you can switch back to the visual editor, to see the changes you have made.

Make your own reusable block

A really handy feature of Gutenberg is the ability to create reusable blocks. For example you have a layout that you will use time and time again, rather than adjusting this each time you can just save the block.

To create a reusable block simply select the block you want to save and click the settings icon on the block. Next click ‘Add to Reusable Blocks’.

In this case I’m going to save a 45px spacer as a reusable block. I can simply give the block a name and click save.

To access your reusable blocks simply click the add a block icon and scroll down to the ‘Reusable Blocks’ section, here you will see all your saved blocks. You can also click ‘Manage All Reusable Blocks’ to manage your blocks.

Manage Reusable Blocks

Common questions

How to align images with Gutenberg

One of the most common issues we come across is aligning images. This isn’t very intuitive at all so we will explain how you can align an image left or right in a paragraph block.

Gutenberg how to align an image

First type your text in a standard paragraph block, hit enter to then start a new block and select image block.

Upload your image, now align the image either left or right. You will also want to resize the image so it can fit within a paragraph block and not take up too much space.

Gutenberg how to align an image

Once you have aligned the image hover over the block positioning icons and click move up. The image will then align next to the paragraph above.

Your image and text will now be nicely aligned next to each other. Don’t forget to preview your content and adjust the image size.

If you have any questions please leave them in the comments below. Do you need support with your WordPress site? Check out our WordPress support & maintenance services.

Written By
Adam
Founder of WP Helper.
You will also like these articles

Relax Knowing Your WordPress Site Is Secure & Running Smoothly 24/7

Let us manage your WordPress site, everything from security to updates will be taken care of. Support plans also come with dedicated support so we can do anything from adding content to customising your site for you.

Same Day Professional WordPress Support

Get WordPress Support Today

Need help with a single WordPress problem, today? We can help with anything from adding analytics tracking code to site hack recovery. Full money back guarantee on all jobs.

1. Submit a Support Request

Use our support ticket form below to send details of your problem to our developers.

2. Get a Quote

We will review your request and provide a quote within 24 hours (but usually within a few hours).

3. We fix your WordPress problem

Our team will begin fixing your WordPress problem the same day.

4. 100% Money Back Guarantee

If we can’t fix the problem for the amount quoted we will refund you 100%.

  • Do you have a screenshot of the issue or have a copy of the theme or plugin that is at fault? If you want to upload php, html or css please zip first.
    Drop files here or
    Accepted file types: jpg, jpeg, png, pdf, zip, gzip, rar, doc, txt, Max. file size: 15 MB, Max. files: 10.