WordPress Gutenberg: A Beginner’s Guide to the Cutting-Edge Block Editor

In this post, we’ll talk about the WordPress Gutenberg editor. So, if you want to learn what Gutenberg is, what makes it different from the old WordPress editor, how it functions, and the advantages and disadvantages of using Gutenberg, this post is for you.

What Is Gutenberg?

Gutenberg is the new WordPress block editor available as part of WordPress 5.0 and later, which aims to facilitate users’ experience in creating websites. Gutenberg uses blocks to create various page layouts and add different content. As WordPress states, the editor suits media-rich pages and posts.

The release of the WordPress Gutenberg editor was inspired by user-friendly and intuitive website builders such as Wix or Squarespace. Likewise, the WordPress community has also stimulated the appearance of Gutenberg by creating such page builder plugins as Elementor and Divi.

Their priority is to empower customers who don’t have much website creation experience to make their web pages without any assistance. So, editing content with Gutenberg, you’ll see the page almost as it will look on the front end.

Here are some of Gutenberg’s most notable benefits:

1. Simplified content creation. Gutenberg’s block system simplifies the process of creating content. Each block can be customized independently, allowing users to create intricate designs without needing technical knowledge. This democratizes the process of web design, making it accessible to a wider range of people.
2. Reduced dependence on shortcodes and plugins. Gutenberg reduces the need for shortcodes and additional plugins. It houses a variety of inherent features that earlier required extra plugins or complex shortcodes. This leads to cleaner code and faster, more efficient websites.
3. Streamlined visual editing. With Gutenberg, what you see is what you get. The real-time editing feature offers a precise visual representation of the end product. This allows users to make changes and immediately see the result, increasing efficiency and reducing the margin for error.
4. Flexibility and scalability. Gutenberg blocks are reusable, which means you can save and reuse them for other posts or pages, saving valuable time. This also ensures consistency across your site, enhancing the user experience.
5. Mobile responsiveness. Gutenberg ensures your content looks great on all devices. As more and more people use their phones and tablets to browse the Internet, this mobile responsiveness is crucial for reaching a broader audience and enhancing their viewing experience.

In the following sections, we will delve deeper into each of these benefits, exploring how Gutenberg not only simplifies web design, but also improves efficiency and allows for a seamless mobile experience.

How to Install Gutenberg

If you have installed the latest WordPress version, you already have the WordPress Gutenberg editor. The default WordPress theme is Twenty Twenty–Two, and if you want to edit the site, the WordPress editor will greet you.

You can also reach the editor via the Appearance menu on your WordPress dashboard.

Alternatively, it’s possible to install and activate the WordPress Gutenberg plugin. It works with WordPress 5.8 and higher and got its last update in April 2022.

WordPress Gutenberg Editor: Interface Overview

To get the most out of the WordPress Gutenberg editor, you should use a compatible theme. Besides the default Twenty Twenty Two theme, you can choose another one that suits your needs best. For instance, Palmeria is good for hotel booking websites.

Once you’ve chosen the theme, you can select a page or post that you wish to edit. Also, you can create them from scratch. The interface will be similar in these cases.

Let’s look at the Gutenberg block editor interface. You’ll work with three areas while creating and editing the content:

1. Block Inserter
2. Block editor content area
3. Settings Sidebar

The main area that contains the content and basically represents the page is the Block content area.

Each piece of content (an image, a paragraph, etc.) is a block that you can select and edit.

On the left, you’ll see the Block Inserter that lets you find the necessary blocks.

You can bring the block inserter into view by pressing the ‘Toggle block inserter’ button on top.

There are several block categories, such as text, media, design, widgets, theme, and embed. They let you work with the content more easily.

The third part of the Gutenberg interface is the Settings Sidebar. It lets you adjust the settings of a specific block or the page in general. You’ll find this element on the right.

The settings will vary according to the block that you are editing. For instance, in the screenshot above, you can see a selected image and the rounded style applied to the image with the help of block settings.

How WordPress Gutenberg Works

Let’s see the basic things you can do with the Gutenberg for WordPress.

As we have already mentioned, Gutenberg uses blocks to create the page layout and design. Blocks let you not only add different types of content (such as texts and media) but also arrange the space (adding dividers, spacers, etc., and grouping blocks).

To make the process of block adding intuitive and straightforward, the editor shows the note ‘Type / to choose a block’ and the black add block button.

Another feature of the Gutenberg editor is the use of columns. Creating columns and rows allows you to modify the page layout according to your needs. This means greater flexibility while editing pages and posts.

You can find Columns in the section ‘Design’ in the list of blocks. It’s possible to choose from pre-designed column layouts or skip the stage. In the latter case, you’ll get a two-column row that you can adjust according to your desire.

After adding the column block, you can start adding the content. To do this, you should simply select the necessary block (images, paragraphs, lists, or any other.)

It is also easy to change the number of columns later if you decide to change the design. It’s only necessary to open the settings and adjust the number.

All columns in Gutenberg are responsive, so you don’t need to worry about the page appearance on mobile devices. Now, let’s dwell a bit deeper into website building with Gutenberg.

Adding New Pages

First, you can create new website pages with Gutenberg. Open Pages on your WordPress dashboard and press ‘Add new’.

Then, you’ll get a blank page to add all the elements you need. 

Add the page title and choose the next block. The good news is that Gutenberg includes premade patterns that combine several blocks. To use them, you should switch to the ‘Patterns’ tab in the Block Inserter, select the necessary category, browse available patterns, and insert it. 

For instance, in the screenshot above, we have used the pattern with three columns that contain images and texts.

Afterward, you can adjust the block elements, i.e., customize colors and use your images. Below, you can see that we have changed the block background color using the block settings on the right.

Similarly, you can change text blocks, selecting colors and sizes.

You should note that while editing the page, you won’t see the header (which depends on the theme you use). You can preview the page and make sure your page looks good after making all necessary changes. To view the page, choose ‘Preview’ in the upper panel.

Then, you’ll see the page as it will look after publishing.

If necessary, you can continue editing the page.

The WordPress Gutenberg editor lets you add blocks to groups and see them in a list view, which you can find in the upper panel.

In the list of blocks, you can select the necessary one and edit it. Namely, you can change the level of headings, set text alignment, typography, etc.

The above screenshot shows the paragraph and its customization options.

It’s also possible to edit general page settings, such as status, visibility, permalink, and page attributes.

Creating a Post

Creating and editing posts with Gutenberg is similar to creating pages. You should open Posts on the WordPress dashboard and press ‘Add New’.

Alternatively, you can find a standard ‘Hello World!’ post and press ‘Edit’.

You’ll see the post heading and a greeting paragraph.

Then, you are free to add the necessary blocks to your post. For instance, if you want to display a gallery, choose ‘Gallery’ from the list of blocks. You can upload images directly from your computer or select them in your Media Library.

Depending on the number of images you want to upload, you can create different gallery layouts. The Gutenberg editor adjusts to your needs and arranges images to make them look attractive. If you wish, you can adjust the number of columns and thus customize the gallery layout.

Moreover, you can add captions to each image (as shown in the screenshot above).

It’s also possible to insert other blocks typical for blog posts, such as paragraphs, quotes, etc. In the screenshot below, you can see a quote added after images. The settings let you choose the quote style, typography, and appearance.

When you’ve finished creating your post, you can preview it similarly to previewing the page (by clicking on Preview in the upper panel). The post usually will display a date, author, and category.

You can adjust the URL, category, tags, and featured image in the post settings. After finishing editing, you should publish your post. If you were editing the default ‘Hello world!’ post, you’d see the ‘Update’ button on top. If you created a new post, it’s necessary to press ‘Publish’ (instead of ‘Update’).

The featured image can be displayed in the post preview on the general blog page, depending on your theme. 

Adding Images with WordPress Gutenberg

To make your page or post more engaging, you are likely to use pictures. The WordPress Gutenberg editor has several options for adding media:

• a single image
• a gallery
• a cover (an image with the text overlay)

To add a single image, you should use the Image block. Afterward, it’s possible to select the image from a local drive, Media Library, or URL.

In the settings, you can customize the style (default or rounded), alt text, size, and dimensions to make your image look fantastic.

As for galleries, we have already touched upon them in post creation. Here, we’ll add that Gutenberg allows you to experiment with the layout, so you can choose the number of columns, image cropping, and image size to ensure your gallery displays the images to the best advantage.

In the screenshot below, you can see a 5-column layout with cropped images.

If you switch to a 4-column layout without image cropping, you’ll see that one image differs a lot from the rest (as shown below).

If necessary, you can use a block containing both an image and a text. It facilitates adjusting page layout, as you can quickly set the alignment and decide whether to show media on the right or left. Additionally, it’s possible to customize image cropping so that it fills the column, media width, and image size.

Another useful option is adding text over an image, which you can apply for headings, for instance. You can use the Cover block to create such an overlay.

In the settings, you can choose the type of background (fixed or repeated), the image focal point, and the overlay type. Particularly, it’s possible to apply the overlay of a specific color or a gradient, customizing its opacity.

The Pros and Cons of Gutenberg

Now, as we’ve looked at the basic Gutenberg functions, let’s explore its advantages and disadvantages.

WordPress Gutenberg Advantages

It’s worth mentioning that Gutenberg has various useful features that facilitate website creation for people with minimum experience in this sphere.

Block Functionality

As we’ve already said, block usage is the WordPress Gutenberg distinguishing feature that aims to provide a user-friendly experience. Indeed, Gutenberg has numerous blocks for different purposes, and you can preview the blocks before inserting them to get an idea of what they look like and do. 

Using the easy block search, you can find the necessary item faster. Furthermore, it’s possible to hide unnecessary blocks in Preferences. Thus, the blocks you use most will always be at hand.

Groups and Reusable Blocks

Gutenberg lets you create groups and reusable blocks for faster page editing. After selecting several blocks, you can add them to a group using the settings (menu).

Afterward, you can see the group and its elements in the List view. It also allows you to add the group to reusable blocks.

The great advantage of reusable blocks is the possibility of adding the layout that you often use with one mouse click. For instance, you can make your pages look consistent by using the same pricing blocks for services on various pages. 

After creating the design and selecting the blocks, you can open the settings and press ‘Add to Reusable blocks’.

Then, it’s necessary to name the block.

After that, you can open the page where the block should be added and find it on the Reusable tab in the list of blocks.

Simply drag and drop it to the place where you want it to appear.

The peculiarity of Reusable blocks in Gutenberg is the necessity to convert a reusable block to a regular one if you want to edit it.

If you edit the reusable block on the page without converting it, the changes will be saved automatically. As you can see in the screenshot above, our reusable block contains three columns with image blocks, headings, and text. If we substitute any element (for instance, add a picture), it will affect the reusable block itself, not only the one we inserted. So, if you need to customize reusable blocks, remember to convert them.

Easy Embeds

Without much trouble, you can embed various types of content. Namely, it’s easy to add media from third-party sources and social networks. Using standard Gutenberg blocks, you can incorporate content from YouTube, Vimeo, Spotify, SoundCloud, Twitter, and numerous other sources.

Drag-and-drop Functionality Without Page Reloading

One of the handiest Gutenberg editor features is its drag-and-drop interface. You can rearrange blocks into the desired layout by dragging and dropping them in the content area. Likewise, it’s possible to move and rearrange blocks in the List view.

Furthermore, Gutenberg features visual customization of many page items. In particular, you can create and adjust buttons without coding.

On top of that, you don’t have to reload the page to save the changes, as it was before. Gutenberg saves all the changes automatically.

Mobile Friendliness

Using the Gutenberg editor, you can create responsive websites. This is a big advantage, as more and more people use mobile devices to browse the Internet.

Code Editing and Developer’s Functions

There are two editing modes in Gutenberg: HTML and visual. Thus, you can edit the block coding if necessary, which is a useful feature in any white label WordPress development. The screenshot below shows two identical text blocks with a link presented in these modes. To change the coding, you should open the options of the necessary block and select ‘Edit as HTML’.

Besides, Gutenberg offers tools for developers to create their own blocks. 

Full Screen Editing Mode

For working without distractions, the WordPress Gutenberg editor offers a full-screen mode. If you don’t switch on this mode, you’ll see the WordPress dashboard.

When working in full-screen mode, you get more space for content editing.

Information Box 

The information box is a useful feature for those who need to check the number of words, characters, paragraphs, and headings. Press the ‘i’ icon, and you’ll see statistics and the document outline.

WordPress Gutenberg Disadvantages

Although the WordPress Gutenberg editor has numerous attractive features, it also has a few drawbacks. Let’s talk about them.

Getting Used to Gutenberg’s Block Editing

For a new user, it can be hard to master block development. For instance, after adding a gallery and inserting images, it can be challenging to select the whole Gallery block (not separate images) to customize the block. In this case, it’s a good idea to learn to use the List view function and select the required parent block using the list.

Furthermore, each paragraph in Gutenberg is a block. So, formatting and HTML editing should be applied to each piece separately, and you’ll need to switch the mode for each paragraph you wish to change. For long posts, it can be quite challenging.

Double Scrollbar and Sidebar

Finding necessary options is not always easy, either. The editor has a double sidebar and a double scrollbar, so it’s sometimes hard for beginners to get to the required settings.

Themes and Plugins Compatibility

There can be compatibility issues for various themes and plugins, as not all of them work seamlessly with the editor. Likewise, APIs for themes and plugins can be inaccessible in Gutenberg.

Shortcuts and Meta Boxes Limitations

Gutenberg doesn’t support all meta boxes, which can be challenging for developers. Also, some shortcuts don’t work. For instance, if you are used to changing heading levels with the Alt + Shift + number combination, you’ll have to change the block type.

Difference from Page Builders and the Classic Editor

It’s impossible to state that Gutenberg is a page builder where you can edit all content via the front end. You still have to work with the WordPress admin panel to adjust page elements.

Likewise, the WordPress Gutenberg editor differs from the previous editor – the TinyMCE editor or the Classic editor. So, as was mentioned, not all functions are intuitive, and you may need some time to learn the features.

Gutenberg versus Classic Editor: Main Differences

The Classic editor was the default WordPress editor before Gutenberg was introduced. One of the main differences between editors is their interface. The Classic editor looks like Microsoft Word and functions as a simple text editor with formatting options. 

The Classic editor has two modes: visual and text. The visual mode lets you see the text formatting and media.

In the text mode, you can see the page coding. As shown in the screenshot below, the bold text has <strong> attribute, and the image is presented with a link, settings, and dimensions.

Besides the interface, these WordPress editors vary in content editing and functionality. The limited functions of the Classic Editor provide an easy text editing experience. Yet, creating a page layout using the Classic Editor is not possible. If you create blog posts with the same design and don’t need to adjust page structure, the Classic editor will be enough for you.

Unlike the Classic editor, Gutenberg is the WYSIWYG (what you see is what you get) editor. Blocks available in Gutenberg let you add advanced features and view them on the page. With the Classic editor, you’ll need to have the minimum HTML knowledge even to insert a button (like ‘Read more’).

The good news is that you can use Gutenberg to edit the earlier content created with the Classic editor. Once you deactivate the Classic editor and open the page, it’s possible to convert the content to Gutenberg blocks.

Then, you can create the necessary layout and edit content with Gutenberg.

Useful WordPress Gutenberg Plugins

Although Gutenberg has numerous functions available for creating amazing websites, you may find that some functionality is not available. In this case, you can choose from plugins, addons, extensions, or even page builders that will help you add the necessary functions and customize the layout more easily. 

Basically, there are specialized plugins, such as WPForms, that serve a single purpose and multi-purpose plugins that include a collection of Gutenberg blocks. Depending on your needs, you can choose what to install.

Let’s look at some of the most useful Gutenberg plugins.

Gutentor – Gutenberg Blocks – Page Builder for Gutenberg Editor

Gutentor is a WordPress Gutenberg editor blocks collection that provides extended possibilities to design a website with its page-building functionality. This page builder is compatible with WordPress 5.0 and higher and has been tested up to 5.9.3. It has more than 50000 active installations and gets regular updates.

Once you install and activate the plugin, you’ll get access to the huge library that consists of

• blocks
• templates
• template kits
• patterns

Using Gutentor templates, you can quickly design a whole page. Simply browse the collection, preview the templates, choose the one that meets your needs, and insert it into the page. Then, you are free to edit each block using extended customization options.

The wide variety of templates suits different niches and businesses to facilitate website creation.

If you don’t need predesigned pages, you can take advantage of Gutentor blocks to add attractive page elements. There are image sliders, galleries, accordions, call-to-action, carousels, countdowns, progress bars, timelines, and many more. After importing the block, you should add your content and enjoy the design.

In general, there are 78 blocks in Gutentor now. This page builder is free, and you get a multitude of functions and designs for your site.

Spectra – WordPress Gutenberg Blocks

Spectra (formerly, Ultimate Addons for Gutenberg) is another powerful tool to facilitate website creation with the WordPress Gutenberg editor. With more than 300000 active installations, this plugin works with WordPress 4.7 or higher and has been tested up to 5.9.3.

Similarly Gutentor, Spectra provides various page templates and patterns that you can customize. Whether you need to create an organic products store, a digital agency website, or an online cooking course page, there is an appropriate template.

Besides ready-made templates, you can also work with blocks. You’ll find the Ultimate Addons Blocks in the full list of blocks in the editor. It’s possible to preview them before adding the desired one.

After inserting the block, you get numerous customization options. Mainly, you can adjust the background, typography, image size, etc.

You can deactivate the blocks you don’t need to find the necessary ones faster.

With Spectra WordPress blocks, you can: 

• add ratings and testimonials to increase page trust and attract more customers
• create interactive contact forms
• add and control animation
• enable schema support for reviews, How-to pages, and FAQ blocks
• insert multiple buttons in one block

In short, Spectra Gutenberg blocks greatly enhance the website’s design and functionality.

Getwid – Gutenberg Blocks

Getwid is a collection of more than 40 blocks for the WordPress Gutenberg editor. This plugin works with WordPress 5.5 or higher, and its versions have been tested up to 5.9.3. When you install and activate the plugin, you’ll see the list of Getwid blocks in the general list.

These blocks include common tools for working with images, posts, buttons, icons, and animation. They are suitable for various niches and let you create a unique website.

Various settings let you customize the block and its elements. For instance, you can select the image size, fit, captions, controls, etc., when editing an image slider.

Yet, you should note that sometimes customization options are limited. As an example, you can see that changing fonts in Tabs is not possible. You can only define the text type as a paragraph or headings. If you need to edit the style, you’ll have to add a custom CSS code. In case you don’t know how to do this, you can outsource WordPress development to the GetDevDone team who will be glad to assist you.

To sum up, plugins extend the functionality of the WordPress Gutenberg editor and provide more options for effortless, beautiful designing.

---

Superior WordPress Development Services from GetDevDone

While you’re getting to grips with Gutenberg, why not let our expert WordPress developers do some really amazing stuff with it for your WordPress website? With nearly two decades of industry experience and thousands of successfully completed WordPress projects to our credit, we know everything about the world’s most popular CMS and its core block editor.

Get in touch with us to handle any WordPress-related task for you: building a unique theme or modifying your current one, developing plugins., optimizing Core Web Vitals, and much more.