WordPress Gutenberg Blocks

WordPress Gutenberg Blocks
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 17/12/2023

What are WordPress Gutenberg Blocks?

WordPress Gutenberg Blocks are small, bite-sized elements that you can mount to your Edit screen to create content layouts. Each block allows you to add small snippets of code without any prior knowledge of coding. You can add a wide range of content such as titles, paragraphs, images, videos and much more.

If you haven’t got a WordPress install and want to edit along with this tutorial, WordPress has created a free sandbox Gutenberg Blocks editor.

Classic Editor vs Block Editor (Gutenberg)

After version 5.0, WordPress has given its out-the-box editor a facelift. The new block editor is known as Gutenberg, named after Johannes Gutenberg who invented a type of printing press over 500 years ago. In this article, we will weigh out the pros and cons of WordPress’ new facelift and provide a comprehensive tutorial on how to use the Gutenberg block editor.

Source: kinsta.com

Before we start rummaging around under Gutenberg’s bonnet, let’s understand the difference between the two styles.

For the most part, you would have already installed a later version than WordPress v5.0 – and if you haven’t, you probably should update this now! If you have, you probably wouldn’t have seen what the classic editor looks like.

Recommended Reading: Updating Plugins

On the surface, these two editors look similar; but in fact their way of working is very different. The classic editor works very similar to Microsoft Word. You type as you go and fill out the page or post as if you were writing an essay. This has made creating sites in this way very rigid and look unappealing.

WordPress block editor, as the name suggests, consists of ‘blocks’. This new approach offers a simple, streamlined way to lay out your page. Previously if you wanted to add features like columns or buttons you would either have to install additional plugins or write code. With the new structure, these things can be easily added.

Creating a new Blog Post or Page

To create a blog or page, you first need to create the page for it. For blogs, head to your WordPress dashboard and in the black column on the left hand side Posts>Add New. To add a website page Pages>Add New.

Creating a new WordPress post

How to Add a Block in Gutenberg

Adding a Post-title

The first block at the top of every page or post is the title. The title is important and must give your visitor a clear idea of what your page or blog is about. For example, if your blog post is about renewable energy, there’s no point writing “Welcome” as the title. A better title would be “Renewable Energy: What’s available in 2023” as this is a front-loaded title. At a glance it gives the reader an overview of the topic, what the article might explore and the year, which tells us it’s a current article. Simply hover your cursor over where it says “Add Title” and type in your new title. 

That’s your header finished and looking great! Now, how do we add something other than a header? This too is simple. Hover your mouse under the title and click the black box. This will open the blocks panel and you will see other blocks such as paragraphs and images. You can also click the blue box “+” in the top left of your screen to add a new block.

Adding a new Gutenberg block

Adding an Image

Select the top left blue box with the “+” symbol or the black box as illustrated in the image above. A small window will pop up and you can type which element you require in the “search for block” box and select the block you need. Let’s try searching for and adding an image! 

If you haven’t uploaded any images yet, you will need to select “Upload”. Another window will open and you will be able to find the file on your computer. If you have already uploaded your images, click “Media Library” to find your previous uploads. 

Recommended Reading: Optimising Web Images

Adding a Paragraph

Repeat this process with “Paragraph” to create sections of text within your page or blog. Gutenberg has a shortcut for Paragraph blocks and they are placed by default. Clicking below the previous block and start typing to add your paragraphs. To start a new paragraph, hit enter on your keyboard – like you would a Word document. You can also copy and paste text from other files into the browser to speed things up!

Once you have your text in place, you can change the colour and background of this block. To access the settings, click the kebab menu highlighted by Arrow 1 and the side panel will open, where you can change your colours and fonts.

Changing text colour and size in Gutenberg blocks

The advantage of working in blocks is that you can drag and drop your elements into different orders, or use the up and down arrows to move them in the page hierarchy. Try selecting your image and clicking the up or down arrow to reorder its location on the page.

Saving and Reusing Blocks in Gutenberg

As we build our pages and blogs, we might want to save sections so we can quickly access these at a later date. This can dramatically speed up the build process as well as provide continuity across your website or post.

To do this, select your element and click the kebab menu icon. Select “Add to reusable blocks”. At this point, you will be asked to give this new block a name and hit Save when you’re done. This new block will now be saved in your database and can be pulled up anytime whilst building your website.

To add this new block to your page, add a new block as before and search for saved block’s name in the search bar and select it.

These blocks are stored in your database and can be recalled and edited when needed. To edit your saved blocks, select add new block and click “Manage All Reusable Blocks”

Publishing and Managing Settings in Editor

Congratulations! You’ve created your very first blog post. Now we want this to be visible on your website, which web designers call the “frontend”. By clicking Publish, this will now make your post ‘live’, to preview this – click Preview. 

Category gives you the ability to group your posts to make it easier for visitors to find related articles. 

Tags should be used to describe your post’s theme – this is mainly to assist Google with categorising your page.

Featured image is an image that will appear by your link on Google. To set this click “Set featured image” and choose an image the same way as you did previously.

Discussion gives your visitors the ability to comment on your post. To turn this on or off select the drop-down arrow on Discussion and tick the boxes to allow this feature.

Web Hosting

From £19.95 /mo