Gutenberg is the core WordPress block editor. While it provides a lot of powerful features, it also has quite a steep learning curve. So, if you're new to Gutenberg, this post should help you get to grips with it.
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.
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:
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.
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.
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:
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.
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.
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 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.
To make your page or post more engaging, you are likely to use pictures. The WordPress Gutenberg editor has several options for adding media:
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.
Now, as we’ve looked at the basic Gutenberg functions, let’s explore its advantages and disadvantages.
It’s worth mentioning that Gutenberg has various useful features that facilitate website creation for people with minimum experience in this sphere.
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.
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.
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.
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.
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.
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.
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.
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.
Although the WordPress Gutenberg editor has numerous attractive features, it also has a few drawbacks. Let’s talk about them.
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.
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.
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.
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.
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.
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.
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 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
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 (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:
In short, Spectra Gutenberg blocks greatly enhance the website’s design and functionality.
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.
WordPress Gutenberg is different from the previous default editor (the Classic editor) and WordPress page builders. Gutenberg provides much more flexibility than the Classic editor, which mainly looked like a text editor. However, the Gutenberg editor doesn’t function as page builders that give you full control over the front end of your website. You still have to use the WordPress admin panel to edit the website layout.
A block is the main element of the WordPress Gutenberg editor that lets you create various content layouts. Using blocks, you can add images, videos, texts, buttons, and numerous other items. Each block also functions as a styling and resizing tool. When you add a block to the page, you are free to customize its content and appearance as you find the most appropriate. Developers can also design custom Gutenberg blocks for more specialized purposes.
Yes, it is. Gutenberg features drag-and-drop functionality, like many page builders, to provide users with a comfortable website editing experience. So, you can arrange blocks by moving them to the desired place with your mouse. Additionally, there are controls on the Gutenberg panel to change the position of blocks.
Yes, the WordPress Gutenberg editor is free. You can create various pages and blog posts using the multitude of blocks completely for free. If you lack specific features, it’s possible to install plugins that will extend the functionality.
Yes, Gutenberg is compatible with all WordPress themes. However, some themes might provide extra styles for blocks to integrate them seamlessly into the theme design.
Gutenberg comes pre-installed with WordPress versions 5.0 and later. If you’re using an older version, you can install the Gutenberg plugin through the WordPress plugin directory.
Yes, if you prefer the Classic editor, you can disable Gutenberg. Simply install and activate the Classic Editor plugin from the WordPress plugin directory.
Yes, there are various plugins available that add new blocks and extend the functionality of the Gutenberg editor. Examples include Stackable, Ultimate Addons for Gutenberg, and CoBlocks.
Yes, developers can create custom Gutenberg blocks. This requires knowledge of JavaScript, React, and the WordPress Block API.
Yes, Gutenberg is SEO-friendly. It doesn’t directly improve your SEO, but its clean and efficient coding standard makes it easier for search engines to read and rank your website.
The Gutenberg editor is compatible with WordPress 5.0 and later versions. It may require updated versions of PHP and MySQL as per WordPress’ updated requirements.
Support for Gutenberg is available on WordPress support forums and through community resources like the WordPress Stack Exchange. There are also numerous online tutorials on YouTube and blogs to help you understand its functionality better.
Yes, Gutenberg is designed with a responsive layout that works on desktops and mobile devices. Nevertheless, the experience of editing on smaller screens may differ.
Transitioning from the Classic editor to Gutenberg can involve a learning curve, especially for those not familiar with block-based editors. However, the intuitive design of Gutenberg, backed by a plethora of online tutorials and resources, makes the switch easier and worthwhile for most users.
Yes, accessibility is a key concern for the WordPress community and our team, too, and efforts have been made to ensure Gutenberg is accessible for users with disabilities. Features such as keyboard navigation through blocks, screen reader compatibility, and high-contrast mode for better visibility are some of the ways Gutenberg aims to be accessible to all users. However, it is always wise to check with your specific accessibility tool or assistive technology for compatibility.
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.
In this post, we discuss one of our WordPress development projects: the customization of an existing theme. You will learn about the challenges we faced and the solutions we provided.
Searching for robust BigCommerce shipping apps to make your fulfillment process easy and trouble-free? Read our review of the best 3 solutions for a start. For every online merchant, there’s nothing more important than customer satisfaction. One of the vital facets of e-commerce that can make consumers happy or otherwise is shipping. In this post, […]
If you're new to setting up WordPress themes and want to get the hang of it, this article is your guide.
