If you are not yet familiar with the Gutenberg WordPress block editor, which was designed to replace the classic WP editor, this short guide should help you to understand how it works and what you can do with it. It is not a detailed tutorial (you can find Tutorials here) but once you have a good understanding of the basic functionality that Gutenberg has to offer, it should be much easier for you to start using it to edit your WordPress websites.
For simplicity’s sake, we are going to approach the topic assuming no prior knowledge but if you have edited WordPress pages in the past, perhaps with the classic editor or a third-party page builder such as Elementor, you will undoubtedly be able to grasp the essentials of Gutenberg more quickly.
How Gutenberg Works: A Basic Primer
In this section, we are going to focus on the main points of interest for anybody who is coming to Gutenberg with little or no previous knowledge of how it works.
- It Works with Blocks of Content – The first thing you need to know about Gutenberg is that it is a WordPress block editor rather than a text editor: it breaks the content in your pages down into blocks, which can be added, removed or moved around at will. There are separate blocks for titles, paragraphs, buttons, audio content, videos, lists, galleries and much more besides.
- You Can Choose Which Type of Blocks to Use – By default, every new page you create with Gutenberg will start with a title block and the next block will be a paragraph block. However, if this is not how you wish to start your new pages in WordPress, you can use the ‘add new block’ button at the top of the page on the left-hand side (the button looks like a plus sign inside a circle). The blocks are organised into different categories to make it easier to find what you want: common blocks, formatting blocks, widget blocks, layout blocks etc. There is also a separate tab for embeds, which are blocks that you use to embed audiovisual content in your pages or content from social media platforms.
- It Features Reusable Blocks to Save Time – If you use the same content snippet on multiple pages, you can create a reusable block in Gutenberg. Every time you are writing a new page, you can simply add the appropriate reusable block to save yourself from having to rewrite the same content over and over again.
- You Can Use a Custom CSS Plugin – If you are currently using custom CSS on your WordPress websites, you will be pleased to learn that there is a free Block CSS plugin that works with Gutenberg. You can use this plugin to apply your own CSS code to any blocks that you create with the editor.
- Cover Blocks Make It Easy to Insert Background Images – If you like to use background images with overlaid text on your websites, you can use cover blocks in Gutenberg to insert these images. When you insert a new cover block, you can adjust alignment, opacity and other properties to your liking.
- Custom HTML Blocks Can Be Added to Every Page – If you often write HTML code for the pages on your website, you can use the custom HTML blocks to insert this code into each page that you create. This makes it much easier to control the HTML on your sites as you don’t have to go hunting for it as you would if you were using a simple text editor rather than Gutenberg.
- Shortcodes have Their Own Blocks – Inserting and editing shortcodes with Gutenberg is very easy as there is a native shortcode block designed for just this purpose.
- Drag-and-Drop Functionality – We mentioned at the beginning of this article that it is possible to move blocks around in Gutenberg to create layouts that match your needs and preferences. All you need to do is to click on the blocks you would like to move and then drag them to their new positions.
As you delve deeper into Gutenberg, you will find there are many other features but those listed above are enough to get you started. Now we are going to take a look at some of the most useful plugins available for the WordPress block editor.
Popular and Powerful Gutenberg Plugins
Depending on the type of websites you normally create and how you like to organise your content, some or all of the following plugins may be of interest to you.
- WPForms – It is a simple matter to insert forms anywhere in your website pages using this plugin. It utilises the WP editor’s widget blocks to help you create any type of form you may need, quickly and easily.
- Block Lab – Developers who would like to create their own custom Gutenberg blocks will find Block Lab to be an invaluable plugin. With it, you can code your own blocks from the admin interface in WordPress, using PHP and HTML.
- Yoast SEO – This plugin provides you with a rich set of tools to optimise your sites so that they rank well in search engine results pages. It is the most comprehensive SEO plugin currently available for the latest WordPress editor and will help you to organise meta data, clean up broken links, set up redirects and perform many other essential SEO tasks on the pages you create and maintain.
- CoBlocks – This is a very useful plugin that turns Gutenberg into a competent page builder as well as a first-class editor. If you are not keen on using other solutions in tandem with Gutenberg to create new pages for your websites, this is probably an essential tool for you to have. With it, you can build blocks that enable to you fine-tune settings such as margins and padding, at the page level rather than the block level.
There are numerous excellent plugins available for Gutenberg, as you would expect from the WordPress platform. As you become more familiar with its functionality, you can explore all of the other plugins at your leisure.
