How to Use the WordPress Gutenberg: A Beginner’s Guide to the WordPress Block Editor

How to Use the WordPress Gutenberg: A Beginner’s Guide to the WordPress Block Editor

WordPress 5.0 introduced a new content editor, Gutenberg. It provides a different editing experience than the classic WordPress editor many users have grown accustomed to.

While the new editor provided more flexibility, it also brought changes in the interface and new terms such as blocks, which may be unfamiliar to some WordPress users.

In this article, we’ll show you how to use the new WordPress block editor. We will cover all the features that Gutenberg offers to improve your content creation journey.

What Is Gutenberg?

Gutenberg is the new WordPress editor that comes pre-installed in WordPress 5.0 and higher versions. It introduces a new approach to the content creation process, giving you more control over your content’s visual aspect.

The block editor replaced the classic editor as the default content editor as it is now part of the WordPress core. However, WordPress users can still switch back to the classic editor after the WordPress 5.0 update by installing the classic editor plugin.

Classic editor option.

The new editor was developed to make WordPress as user-friendly as possible, providing a way for users of all skill levels to utilize its features without coding.

Gutenberg also strives to improve the overall editing experience by introducing the concept of blocks ‒ more on this later.

How Does the WordPress Gutenberg Editor Work

Before the WordPress 5.0 update, the classic text editor used TinyMCE (WYSIWYG). It focused solely on text editing and didn’t offer many customization options.

Compared to the text editor, the WordPress block editor works similarly to a page builder. It introduces blocks ‒ content fields for presenting various elements in posts and pages, such as texts, images, files, and links.

The Gutenberg blocks divide your content into elements. This new approach minimizes the risk of losing content or messing up the formatting during the writing or editing process.

With WordPress Gutenberg, customizing a paragraph or an element within a page won’t affect the rest unless configured differently.

As a result, WordPress users have total control over the visual aspect of their content. Plus, there’s no need to install a separate page builder plugin as Gutenberg already provides everything you need to improve your writing experience.

WordPress Gutenberg has a sleek and intuitive user interface that lets you easily insert blocks in a project. Access the available content blocks by clicking any of the “plus” buttons on the workspace.

Gutenberg block options.

How to Install the Gutenberg WordPress Editor

While the new block editor comes pre-installed in WordPress 5.0 and higher, users with older versions of WordPress can still use Gutenberg by installing its plugin.

The following steps will show you how to install the Gutenberg editor plugin.

  1. Navigate to Plugins -> Add New from your WordPress dashboard.
  2. Look for the keyword Gutenberg in the search bar and press Enter.
  3. The WordPress Gutenberg plugin should appear in the search results. Click Install Now.
  4. After installing the Gutenberg plugin, click Activate to complete the process.

Using the Gutenberg Block Editor

If you still have doubts about the new WordPress editor, the following section will explore all the essential features of the block editor to enhance your blogging experience.

1. New Blog Post or Page

Content creation begins by adding a new blog post or page using the Gutenberg block editor.

A blog post has a publication date, and posts appear in reverse chronological order. Meanwhile, a page is static and provides timeless information, such as the About, Privacy Policy, and Contact pages.

If you intend to create a new post, access Posts -> Add New from your WordPress dashboard.

Add new WordPress post.

Otherwise, to create a new page, navigate to Pages -> Add New.

2. Adding a New Block

Blocks are the core feature of the Gutenberg editor. Each block hosts an element, making creating custom content layouts for your posts and pages more accessible.

The block editor will provide the first block for the page or post title as you open it.

Title field in the Gutenberg editor.

Click below the first element or press Enter to create a new WordPress block. Gutenberg sets the paragraph element as its default block. It makes it easier to start the content creation process and add new elements in between paragraphs.

Click on any “plus” button on your screen to open the block directory and add a different element to your block. Some of the available options include list, quote, and image blocks to format different texts easily.

Gutenberg block elements.

3. Working With Blocks

Mastering how to work with Gutenberg blocks will improve your blogging experience and accelerate your workflow.

Similar to the classic editor, the block editor provides a toolbar for element formatting and alignment. It appears on top of the currently active block and consists of different tools depending on the block type.

For example, the paragraph block will have options to bold, italicize, and adjust the text alignment.

Gutenberg paragraph block.

Meanwhile, the image block lets you change the image alignment and switch to a different block type.

Gutenberg image block.

The Move up and Move down function is another Gutenberg block editor feature that you don’t find in the classic editor. Changing the block order is as simple as clicking a button.

Block order button.

4. Cover Text Options

Gutenberg gives more freedom in styling headings and paragraph blocks. You get to create drop caps and set custom colors for your text and block’s background. Keep in mind that cover text options are only available for text-based blocks.

This Gutenberg feature is accessible via Options -> Show more settings from the active block. The additional settings will appear on the right column of your screen.

Selecting show more settings.

In the Block section, you’ll find several options to customize the block. Typography controls the font size and line height, while color settings determine the text and background colors. Enabling the drop cap option will create a large capital letter at the beginning of a paragraph.

Block customization options.

Block patterns are also available in case you don’t have the time to customize each block. By clicking on the “plus” symbol at the top of the editor, you’ll find several pre-built block patterns in different styles.

Click on the dropdown menu to browse block patterns for buttons, columns, galleries, and headers.

Gutenberg block patterns.

5. Word and Block Counts

As the name suggests, the word count keeps track of the total number of words, headings, paragraphs, and characters you’ve written. Similarly, the block count gives you the total number of blocks the page has, helping you make a consistent layout.

Go to your top menu and click on the Details button to display this information.

Word count tool.

6. Table of Contents

The table of contents feature provides an easy way to manage your article’s outline. It creates links for each of the headings for easy navigation to any part of your content. We recommend using it on long posts and pages to improve readability and user experience.

This feature is available in the Details section.

Table of contents option.

7. Anchor Support

Anchors are links that let readers jump to a specific block in your WordPress content.

This feature helps highlight specific parts of your content and providing a better context for visitors.

When creating an anchor for your content in the new editor, keep in mind that:

  • It should be unique.
  • It’s case-sensitive.
  • It cannot include spaces but accepts the use of symbols, such as hyphens (-), underscores (_), colons (:), and periods (.).
  • It must start with a letter.

The following steps will show you how to create an HTML anchor in Gutenberg.

  1. Create a new block or choose one of the existing blocks.
  2. Click Options -> Show more settings.
Show more settings option in the pop-up menu.
  1. In the Block section, expand the Advanced menu.
Gutenberg's advanced menu.
  1. Add a unique HTML anchor to the HTML anchor textbox.
HTML anchor in the Gutenberg editor.

After creating the anchor, you only need to link it to the desired element.

  1. Highlight the piece of your content where you want to insert the anchor. This can be in the form of a text, an image, or a button.
  2. Click on the Link button in the toolbar of your block.
Highlighted link button.
  1. Insert a hashtag (#) followed by the desired HTML anchor, then press Enter or click Submit.
Highlighted HTML anchor link.

Keep in mind that anchor links will only work on published pages or posts.

8. Drag and Drop Images

The Gutenberg editor lets you drag and drop images anywhere on your content without creating a new block first.

You only need to open your file manager and drag and drop the chosen image to the Gutenberg workspace to add a new image. The block editor will automatically create an image block to host the file, which you can customize as needed.

Gutenberg also provides space for the caption below the image. Click on it to activate the space and add the text.

Image block caption.

9. Reusable and Recent Blocks

The Gutenberg block editor makes it easier to save a block and reuse it in other pages and posts. This feature is handy if you use the same block type repeatedly, saving you time from having to customize it over and over again.

Similarly, the recent blocks feature stores up to eight of the most recently used blocks. Therefore, you have plenty of shortcuts to add new blocks to your project.

Here’s how to save and reuse Gutenberg blocks.

  1. Select the block that you want to save and click Options -> Add to Reusable blocks.
Add to reusable blocks option.
  1. Enter a name for your block and click Save.
Create a Gutenberg reusable block.
  1. To reuse a block, create a new block first in the Gutenberg editor.
  2. Click the “plus” icon and then Browse all, then open the Reusable tab. You should find all your saved blocks in this section.
Reusable blocks tab
  1. Drag and drop the saved block that you want to use anywhere within the Gutenberg workspace.

Remember that deleting the page or post where the reusable block was first created will cause a reusable block error on other projects.

10. Table Blocks

Gutenberg revamps the WordPress table feature by eliminating the need to install a table plugin or know HTML.

Here’s how to create a table in the Gutenberg block editor.

  1. Drag and drop a table block from the block Directory to your Gutenberg workspace.
  2. Set the number of columns and rows that the table will have, then click Create Table.
Create table block.
  1. Gutenberg will create a new table with responsive column blocks.
Gutenberg table block

Like any other text editor, the WordPress editor provides a toolbar with customization options, including text formatting, row, and column insertion, and text alignment.

Pre-designed styles are also available in the Change block type or style menu at the far left of the toolbar, offering a quick way to style your table.

Table customization options.

11. Column Blocks

Column blocks present an easy way to format your content into up to three columns. The feature helps you improve content readability by adding visual elements next to text.

Alternatively, use this new block to improve your site’s space efficiency, displaying multiple content types without requiring visitors to scroll too far down.

The following steps will show you how to add a new column block to your site.

  1. Access your Block Directory -> Columns.
Columns block.
  1. Choose one of the available column patterns.
Column patterns.
  1. The Gutenberg block editor will generate new blocks based on the chosen style. Click on the “plus” symbol to add new elements to those blocks.
Column elements.

12. Live HTML Blocks

The new WordPress block editor has a live HTML block to preview your code. This feature lets you check if your code is working correctly on the WordPress site without switching back and forth between the visual and text editors.

Here’s how to use the Gutenberg editor live HTML block to insert custom code.

  1. Access Block Directory -> Custom HTML.
Custom HTML block.
  1. Insert your custom HTML in the block that appears.
HTML block.
  1. Click Preview to see what the code looks like on your WordPress site.
Preview button.

13. Embed Options

Displaying visual content from sites like YouTube, Reddit, and Twitter can improve your content. Plus, they help to build an audience base and make for an interesting look for your site.

The WordPress block editor makes it easy to embed posts from other websites into yours. Here’s how to use Gutenberg embed options to embed visual content into your site.

  1. Access Block Directory -> Browse all. Scroll down to the Embeds section to see all the various websites that Gutenberg supports.
Gutenberg embed options.
  1. Choose the website from which the visual content originates. If the website is not listed there, then use the Embed block.
  2. Copy and paste the URL of the media you want to embed on the provided textbox.
Embedding media URL.
  1. Click Embed, and the media will appear on your WordPress page or post.
Gutenberg media block.

14. Buttons

Insert buttons anywhere with the WordPress block editor and help visitors interact with your site. Some of the many benefits of having a button on your site include growing your audience base and improving conversion rates. Buttons can also help generate revenue if you embed them with referral links.

Here’s how to insert a button in the WordPress editor.

  1. Navigate to your Block Directory -> Buttons.
Gutenberg buttons.
  1. Type the label in the button block. For example, we’ll be making a subscription button.
Button block.
  1. Click on the “link” symbol on the toolbar to embed a link to the button, therefore redirecting visitors to the targeted web page. The WordPress editor also gives you the option to open the link in a new tab, reducing your bounce rate.
Adding link to button block.
  1. Click Submit to save the changes. You can edit the link later by clicking on the Edit button next to it.
Edit button option.

15. Pull Quotes and Block Quotes

With Gutenberg, it’s easier to create block quotes for citations taken from external sources. Additionally, the new pull quote block helps to emphasize important information from your WordPress page or post.

Here’s how to create a pull quote with WordPress Gutenberg.

  1. Navigate to Block Directory -> Pullquote.
Gutenberg Pullquote block.
  1. Write down the pull quote you want in the block that appears along with its citation.
Example of a pull quote block.
  1. Adjust the pull quote’s style using the tools provided on the toolbar. WordPress Gutenberg currently offers only one additional style, called Solid Color.
Pull quote style options.
  1. Change the alignment of your pull quote so that it fits your body text. Other than the standard settings, Gutenberg also offers alignment at full and wide width.
Alignment button.

The steps for adding a block quote are similar to that of a pull quote block. The only difference is that it uses the Quote block.

Gutenberg quote block.

What Do We Think of the WordPress Gutenberg Editor?

The Gutenberg WordPress editor is a development that outclasses the classic WordPress editor regarding customization flexibility. However, the Gutenberg editor still has its pros and cons.

Pros

  • Minimize coding. Gutenberg’s drag-and-drop feature makes content creation and editing in WordPress easier, even for people new to the platform. Coding is no longer necessary with WordPress blocks, even though it’s still supported.
  • Mobile-friendly. Compared to the classic editor, Gutenberg offers better responsiveness. Having the ability to publish content on the go can improve your workflow, particularly if you travel frequently.
  • Fewer plugins. WordPress Gutenberg saves you from installing a page builder plugin, as it comes with plenty of text and visual editing tools. That said, using fewer plugins can help improve website speed for better SEO.
  • Flexible custom blocks. Gutenberg blocks not only simplify the use of widgets and shortcodes but also make for excellent design elements. Some plugins even come in a block version to adapt to Gutenberg’s workspace.
  • Meta box support. The Gutenberg editor is compatible with most meta boxes, ideal for creating custom fields and adding metadata to a post.

Cons

  • Learning curve. Users with no prior experience with a page builder or more accustomed to the classic WordPress editor may need time to get used to the new layout and tool placement.
  • Compatibility issues. Not all developers have made their plugins and themes compatible with Gutenberg. Therefore, users with older WordPress versions should test their plugins and themes with the block editor before moving to WordPress 5.0 or higher.

While Gutenberg provides more freedom in customizing your project, it’s not a page builder. Understandably, WordPress blocks lack some of the design options that most page builders offer.

For example, the spacer block may take care of the spacing between WordPress blocks visually. However, it adds additional HTML to your WordPress page, making the web page bloated and slower.

Fortunately, there are plenty of block plugins available to extend Gutenberg’s functionality. Here are some of the most popular block plugins worth considering.

  • Genesis Blocks. A free block plugin with testimonial, newsletter, and pricing blocks. It also provides post grid and container blocks to help divide content into sections.
  • Stackable. A freemium page-builder plugin that provides block designs and user interface kits. It lets you create hover animations and change block typography settings.
  • Gutenberg Blocks. Another free block plugin offering handy blocks to help you build forms, taxonomies, and timelines.
  • Orbit Fox. It provides everything you need to improve conversion rates, such as uptime monitor, Google Analytics integration, and sharing icons.
  • PublishPress Blocks. A free, versatile plugin that offers 20 new blocks and access control over your blocks.

By installing additional WordPress plugins on your site, Gutenberg will provide you an even better user experience and faster workflow.

Conclusion

Built with similar features as a page builder, WordPress Gutenberg editor introduces a new way of editing content with blocks.

Gutenberg brings many features that were missing in the classic WordPress editor, such as a drag-and-drop interface, block patterns to create instant layouts, and reusable blocks. The block editor aims to streamline your content production and minimize coding for beginners.

Despite some compatibility issues with WordPress themes and plugins, we think Gutenberg is a welcome change. For that, we are looking forward to its further development.

If you have any more questions regarding WordPress Gutenberg, feel free to leave us a comment below.

Author
The author

Liam Carberry

Liam is a WordPress fanatic that loves to write about web development and coding. When he's not working, he likes to help people create websites and applications. In short, his job is also a hobby!