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.

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.

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’.

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.

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.

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.

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.

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.

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:

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.