Green Clook

WordPress content blocks and how to use them (Gutenberg)

WordPress has become one of the most commonly used CMS to build your website. Over the years we have seen them make many advancements to their web builder capabilities. Since 2018, WordPress features a block system (Gutenberg) that allows you to design pages and posts without needing to know how to code.

In this article, we’ll give you a quick run-through of how to use it. With no coding knowledge needed, you’ll be able to build visually engaging posts and pages.


Gutenberg Logo
Experience the flexibility that blocks allow using Gutenberg for WordPress

What is Gutenberg

Gutenberg is the codename for WordPress’s site-building and publishing tool. WordPress’s very handy tool is currently in its 2nd phase of four and already gives a fantastic publishing experience. Gutenberg comes with ready-to-use, blocks, patterns and layouts for your WordPress website design.


The Classic Editor

If you’ve used WordPress before, you’ll probably be able to recognise its ‘Classic Editor’. The original editor was made up of a singular WYSIWYG. For many years before popular plugins such as Elementor and DIVI arrived, WordPress authors would have very basic options for populating their websites. When using the Classic editor you would be working in the backend of WordPress and unable to see what the page would look like until you click save.

Gutenberg now empowers everyone with no coding knowledge to create content and visually see how the page will look once live.


Drag n drop editing

Nearly all CMS and many online applications use a ‘Drag and Drop’ system for content creation. It simply means that you grab pre-coded elements from an online toolbar onto your page layout. Once moved, each block can have a whole range of settings applied such as padding, margin, colouring and typography.

Gutenberg makes great use of this system with its easy-to-use editor and toolbars.

drag and drop
Drag and drop editing allows you to design layouts without you knowing how to code

Getting started with Gutenberg

One of the first things to check is that your WordPress core is up to date with the latest release and your theme supports the ‘Blocks’ function.

You will also need to install the Gutenberg plugin that is available in the Add new plugin section of the WordPress dashboard.

Once you’ve got the plugin downloaded and activated, you’re good to go.


Creating a new post or page

Let’s create a new page/post to work on. From the main WP dashboard select post/pages and click ‘Add New’.

add page post
In the WP Dashboard select: posts > Add new
add page post 2
In the WP Dashboard select: posts > Add new

Choose a page title

Your chosen page title will automatically become your page URL (aka Slug). This can be changed in the settings if it needs to be more SEO-friendly.

add page post title
Add your page title in the section that’s right at the start of your page
add page post title 2
The title will become the URL/Slug of your page

Adding a blocks

It’s time to add a block and these can be found in the ‘Blocks’ sidebar. There’s a whole host of blocks to choose from with the following categories:

  • Text
  • Media
  • Design
  • Widgets
  • Theme
  • Embeds

Start by choosing the type of block you would like to use by clicking and dragging it onto your page. In the example below, we have chosen the paragraph block.

add paragraph block
In the page edit, select the blocks sidebar on the top left
add paragraph block 2
In this section, you’ll be able to choose from a variety of blocks

Once you’ve added the block you’ll be able to add content to it. Each block has its own settings and styling options. You can access these in the sidebar on the right.

paragraph block styling
Use the inline editor to style your text
paragraph block styling 2
To style a block use the right-hand sidebar

There are a lot of different types of blocks with a variety of functions. Experiment with different combinations and create some interesting and engaging layouts.


Adding a Columns

Columns are the best way to break up content to make it look interesting, easier to read and stand out to the reader.

A popular combination is a 2 column layout with a paragraph of text next to a supporting image.

The column block will automatically order your columns depending on the viewer’s device. If the viewer is on a mobile device the columns will stack neatly on top of each other.

To use the ‘Columns’ block follow these steps:

  • Select the Block menu button in the top left of the editor.
  • Scroll down the menu to the ‘Design’ blocks.
  • Select the ‘Columns’ block.
  • Drag the block other to where you want it on your page.
  • Select which column layout you want to use:
    • 100
    • 50/50
    • 30/70
    • 70/30
    • 33/33/33
    • 25/50/25
  • Columns will now show on your page, ready for blocks to be dragged into them.

columns block
From the block sidebar, select Columns
columns block 2
Your columns will appear and you’ll be able to add blocks to them
columns block 3
Adding columns to your layout allows you to stylishly break up content.

Reusing blocks you’ve created

Gutenberg allows you to save any layout groups you have created and styled. This is a great time saver and helps you keep your website design consistent.

Keeping your website looking consistent is crucial for a good user experience. This doesn’t mean your website pages have to look exactly the same. You can still create interesting-looking designs that differentiate from each other but still follow your branding style.

To save a layout, follow these steps:

  • Select the wrapping layout of the group you’d like to make reusable.
  • Click the three-dotted menu.
  • Scroll down and select ‘Add to reusable blocks’.
  • In the popup menu, give your menu a name
  • Click save
  • Your layout will now be selectable in the block menu

From the block sidebar, you can manage your ‘reusable blocks’ and change their styling in one place.

save reuseable block
Using the three-dot menu and select ‘Add to reusable blocks’
save reuseable block 2
Name your reusable block and click save

The different types of blocks in Gutenberg

There is a whole range of blocks to choose from in the Block sidebar. Some you will use more often, and others have helpful and dynamic functions. The following is a list of the core blocks you can use:

Text

  • Paragraph
  • Heading
  • List
  • Quote
  • Classic Block
  • Code
  • Preformatted
  • Pullquote
  • Table
  • Verse

Media

  • Image
  • Gallery
  • Audio
  • Cover
  • File
  • Media and Text
  • Video

Design

  • Buttons
  • Columns
  • Group
  • Row
  • Stack
  • More
  • Page Break
  • Separator
  • Spacer

Widgets

  • Archives
  • Calendar
  • Categories
  • Custom HTML
  • Latest Comments
  • Latest Posts
  • Page List
  • RSS
  • Search
  • Shortcode
  • Social Icons
  • Tag Cloud
  • Contact Form 7

Theme

  • Navigation
  • Site Logo
  • Site Title
  • Site Tagline
  • Query Loop
  • Posts List
  • Avatar
  • Post Title
  • Post Excerpt
  • Post Featured Image
  • Post Content
  • Post Author
  • Post Date
  • Post Categories
  • Post Tags

Embeds

  • Embed
  • Twitter
  • Youtube
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Issuu
  • Kickstarter
  • Reddit
  • Scribd
  • TikTok
  • Tumblr
  • Pinterest

Summary

Building a website in WordPress and not needing any coding knowledge has become very easy over the last few years. There are a few online website builders now such as Wix, Squarespace and many others. The reason to choose WordPress is the scalability options that come with it.

WordPress is a very powerful web builder and 43% of all websites are built with it. WordPress is a standalone framework making it easier for you to move your website if you need to. If your website has grown and needs a new set of requirements from your hosting provider, your website can be moved to a better server quickly and easily.

WordPress puts you back in control of your website.

About The Author

Scott is a UX Designer and Developer at Clook. He’s passionate about UI Design, WordPress Development and Marketing.

Working on the creative, branding and marketing side of Clook. He's involved in creating a variety of digital and print designs for us.

Connect on Linkedin

Clook Logo

Get regular tips, tricks and updates!

Signup today for our awesome newsletter and recieve monthly emails with all sorts of helpful articles on hosting and web development.