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

WordPress introduced Gutenberg as its default editor in the 5.0 version. It provided a new interface and experience for content creation with the use of blocks.

The platform’s developers took the block editing concept to the next level by introducing full site editing in WordPress 5.9. Essentially, the block editor now replaces the WordPress Customizer as the main tool to edit the theme and site appearance.

This article will show you how to use the new Gutenberg WordPress block editor to customize your WordPress website.

How Does the WordPress Gutenberg Editor Work?

The Gutenberg WordPress editor uses the concept of content blocks to add and edit various elements in posts and pages, such as text, images, files, and links. The previous default WordPress editor, TinyMCE, focused on text editing instead.

After the WordPress 5.9 update, the Gutenberg editor works as more than just a content editor. It includes all aspects of site customization, including theme editing and page or post creation.

The new editor also provides a better visual representation of the page, making it more like a page builder than the previous WordPress editor.

It breaks down website elements such as the header, text, and images into blocks, making them more manageable and customizable.

Selecting any block, you can customize it individually, such as setting a different background color or typography without affecting other blocks or elements. This opens up more customization options and flexibility in site editing.

The new interface is user-friendly, allowing new users to learn how to use WordPress quickly. All the blocks are listed in a collapsible list according to their structure. Tweaking their position on the site is easy as users only need to drag and drop the individual blocks in the list view.

Users can add blocks by clicking the plus (+) button on the top bar or the page preview.

Each block has a different configuration and design tools. For example, paragraph blocks come with tools to change color and typography. On the other hand, the image block has tools to add alt text and adjust the image dimensions.

The new full-site editing approach also reduces the need for coding and custom CSS. The new block editor introduces the global styles panel, which controls the theme.json file. This lets users change styles for the entire site, like adding custom colors and changing typography straight on the default editor.

Using the Gutenberg Block Editor

The Gutenberg editor interface may be confusing for a first-time user or anyone used to working with the classic editor. Here are some guides on building your website and managing content via the Gutenberg editor.

1. Adding a New Blog Post or Page

Creating content for your website begins by adding a new post or page using the Gutenberg block editor.

A blog post has a publication date and usually appears in reverse chronological order on the site. 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 on your WordPress dashboard.

Once you’re in the default content editor, you’ll see a blank draft with placeholders for the post title and the first paragraph block. Add the post title and new blocks to create the content.

Find the post settings on the right sidebar. This is where you set the post author, template for the post, permalink, and post categories.

Creating a new page is a similar process. Navigate to Pages -> Add New, and you’ll see the same interface as the one for creating a post. The only difference is the Page Attributes setting in the right sidebar, which specifies the parent page and page order. There are also no categories or tags settings for pages.

2. Global Styles Interface

The current WordPress editor version has a Global Styles interface allowing you to customize colors, typography, and layout of the entire site without using a single line of code.

However, this feature is only available when using a block-based or child theme in WordPress 5.9 or higher.

First, go to the site editor by navigating to Appearance -> Site Editor and click the black-and-white contrast icon at the top-right corner of the screen. The Global Styles interface will appear on the right side of the window.

There’ll be five sections on the Global Styles interface – Browse styles, Typography, Colors, Layout, and Blocks.

See the available pre-defined style variations in the Browse styles section. Click on any variation to easily change the overall look of the site.

Once you’ve decided on a theme style, you can start customizing other aspects of the theme. Manage font family, size, line height, and font appearance for text and links in the Typography settings.

You’ll find two main items in the Color settings – Palette and Elements. The color palette shows available colors for website elements – the theme color palette and default colors can be used on the entire site. The custom color picker lets you add more colors to the palette.

The elements section for color customization comprises three aspects – background, text, and links. Click on any of them to customize its color.

The next item for Global Styles is the Layout. It lets you specify the padding properties for each website element.

The last item in the Global Styles interface is the Block tab, which lets you customize a specific block. When this option is selected, you’ll see a list of available blocks. Choose any block to start customizing it. Depending on the block type, you can modify its layout, color, and typography.

3. Template Editing Mode

The new WordPress block editor includes a template editing mode. Most block-based themes are compatible with this feature, so you can edit theme templates for posts, pages, or 404 pages using the block editor. It even allows you to create a new template.

Go to the site editor by navigating to Appearance -> Site Editor. Open the collapsible navigation sidebar by clicking the WordPress logo on the top-left corner of the screen and selecting Templates. You should see the list of available templates and an Add New button on the top-right corner.

4. Inserting a Block Pattern

Built-in block patterns are available if you don’t have the time to customize each block. Click on the “+” button at the top of the editor screen and select the Patterns tab to find several pre-built block patterns in different styles.

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

Another way to insert a block pattern is using the Inserter tool. However, this method only works in the site editor and if the Inserter is opened at the root level of the block content structure.

Hover around the content area and click the “+” button. A small pop-up will appear, showing pattern recommendations. Use the search bar in the pop-up to find a suitable pattern.

5. Adding a New Block

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

The WordPress block editor sets a paragraph block as the default content block if you add a new post or page. It makes it easier to start the content creation process.

To add more blocks to the content, press Enter, and the editor will automatically add another paragraph block, which is convenient for when you are typing a long text.

However, you may want to add other block elements to the text. To do so, click on the plus (+) button at the top-left corner of the screen and choose or search for the desired block.

Clicking the plus button on the content area will display a pop-up with six recently used blocks, making it easier to insert a frequently-used block. Alternatively, use the search bar to find a specific block.

6. Inserting Widgets

Widgets are now integrated into the Gutenberg editor, so adding widgets is the same as adding other blocks.

On the old WordPress core version, it was necessary to use the widget-specific page and the theme Customizer to manage them.

Click the plus (+) button at the top of the editor screen and select the Blocks tab. Scroll down to the Widgets section to find all available blocks for widgets.

7. Working with Blocks

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

The new editor provides a toolbar for element formatting and alignment like the classic editor. 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.

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

The up and down arrows let you move the block to rearrange the block order. Alternatively, click the List view icon at the top of the screen. It’ll display all content blocks in the order they appear on the page.

Drag and drop any block to move it to a new position on the list. This feature makes it easier to work with complex content structures, especially if there are several nested blocks.

Each block also has different design tools depending on the block type. Click on the Settings button at the top-right corner of the screen, and a sidebar will appear on the right side.

For example, the image block has a field to enter the alternative text, while the navigation block has layout and display settings.

It’s also possible to add blocks within blocks to create a unique content structure. This works with blocks like group, row, and columns as they act as a container for multiple blocks.

8. Locking a Block

The block locking feature prevents blocks from being moved or deleted accidentally. There are two ways to lock a block – the toolbar and the list view.

To lock a block from the toolbar, select the block and click on the three dots icon on the toolbar. Then, in the block options menu, select Lock.

A pop-up will appear, showing the lock attribute options – Disable movement and Prevent removal. Check on the attribute you want to apply or check the Lock all option to apply both attributes. Then, click Apply to save your preferences.

An alternative way to lock a block is using the List View panel. Find the block you want to lock and click the three dots icon next to it. Select the Lock option, and the same lock attributes pop-up will appear.

A locked block will have a lock icon on the block toolbar and the List View. To unlock it, click the lock icon on the toolbar, and the lock attributes pop-up will appear once more. Uncheck all lock attributes and click Apply to save the settings.

9. Content Details

To see the content details of posts and pages in the WordPress block editor, simply click the Details button.

You’ll see information about the number of words, characters, headings, and blocks on your content, helping you create an optimal content length.

Another piece of information that will appear is the Document Outline. This section is only available when you use more than one heading. It will show the headings structure, helping you organize the content and improve WordPress SEO.

10. Anchor Support

Anchors are links that let readers jump to a specific block in your WordPress content. This feature helps highlight specific parts of the content and provides a better context for site visitors.

It’s also useful as a quick navigation tool for long content. You can add navigation text at the beginning of the post that links to specific headings. The anchor support also works when sharing an URL directing to a specific heading.

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

1. Create a new block or choose an existing one.
2. From the block’s toolbar, click Options -> Show more settings.
3. In the Block tab, expand the Advanced menu.
4. Add a unique HTML anchor to the HTML anchor textbox.

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

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

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

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

11. Working with Image Blocks

When inserting an image block on the content, the WordPress block editor will give options to upload an image from your computer, pick one from the media library, or link to an image URL.

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

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

Opening the block settings, you’ll find a field for the image’s alt text and image size options.

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

You can set the image link and alignment in the image block’s toolbar. There’s also a duotone feature to transform the image color with any of the two-tone presets available.

Another way to work with images is using the image gallery block. This is a container block type for adding a group of images. You can set the column number for the gallery to create a nice grid-style display.

All image blocks inside a gallery will be counted as individual blocks. This way, you can customize each image with a unique border and alt text.

12. Reusable Blocks

The Gutenberg block editor makes it easier to save and reuse a block in other pages and posts. If you use the same block type repeatedly, it’ll save you time from having to customize it over and over again.

Here’s how to save and reuse Gutenberg blocks:

1. Select the block you want to save and click Options -> Add to Reusable blocks.

2. Enter a name for the block and click Save.

3. To reuse a block, create a new block in the Gutenberg editor.
4. Click the plus (+) icon and then Browse all. Open the Reusable tab, where you’ll find all reusable blocks.

5. Insert the block that you previously saved.

You can delete or edit any reusable block via the block manager. To do that, select Manage Reusable blocks in the Reusable tab.

13. Table Blocks

Gutenberg revamped the WordPress table feature by introducing the table block, which eliminates the need to install a table plugin or use custom HTML code.

Here’s how to create a table using 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, then click Create Table.
3. Gutenberg will create a new table with responsive column blocks.

The block toolbar has several customization options, including text formatting, row, column insertion, and text alignment.

Two pre-designed styles are available in the block settings panel. Additionally, this block comes with design tools to customize the color and border style.

Tables created with this block will have responsive column width by default. However, you can change that in the table settings. Scroll down the block settings panel, expand the Table settings section, and toggle on the Fixed width table cells option.

14. Column Blocks

Column blocks present an easy way to split the content into up to three columns. The feature helps improve content readability by adding visual elements next to the 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. Click the plus (+) icon and select the Columns block.

2. Choose one of the available column patterns.

3. The Gutenberg editor will generate new blocks based on the chosen style. Click on the plus (+) icon to add new elements to those blocks.

A good use for the column block is creating a sidebar. Choose the 30/70 or the 70/30 column variation and insert a query loop block in the bigger column. Use a group block in the smaller one to contain the sidebar’s widgets block.

15. Live HTML Blocks

The new WordPress block editor has a live HTML block for code preview. This feature lets you check if the 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. Click the plus (+) icon and find the Custom HTML block.

2. Insert the custom HTML in the block that will appear.

3. Click Preview to see what the code looks like on your WordPress site.

16. Embedding Elements

Adding audio or visual elements from your WordPress media library or other sites like YouTube, Reddit, and Twitter will help make your content more attractive.

The block editor makes embedding such elements into the content easier as plenty of media and embed blocks are available.

Embedding Media Files

The media blocks let you upload and display various files on the site, offering different block settings depending on the media. Select the correct block according to the type of file you want to upload.

Follow these steps to insert a media block:

1. Open the block inserter by clicking the plus (+) icon.
2. Scroll down to the Media section and choose the appropriate block.

We’ve discussed embedding images using the image and the gallery blocks. Now let’s see other media blocks.

• Video – embeds a video player in your content with configurable settings like playback controls, autoplay, and video loop. It also lets you display a poster image when the video is not played.
• Audio – adds an audio player with simple configurations for autoplay and loop.
• Cover – adds an image or video with a text overlay. This block is useful for creating a header or banner with an image or video background.
• File – adds a link to the media file with an option to include a download button. This block also supports a PDF viewer, so you don’t need a PDF viewer plugin to embed a PDF file.

Embedding External Content

The next group of blocks, the embed blocks, let you integrate content from external sites like YouTube, Twitter, and Spotify. Using an embed block is very easy, as you only need to copy and paste the desired URL.

1. Click the plus (+) icon and scroll down to the Embeds section.

2. If the website is not listed, use the Embed block. For this example, we’ll use the YouTube block.
3. Copy and paste the URL of the media you want to embed on the provided textbox.
4. Click Embed, and the media will appear on the WordPress page or post.

17. Buttons

Buttons let visitors interact with the site, whether for navigation or completing a specific action. They also help increase your conversion rates by using call-to-action buttons for signing up or purchasing items.

The Buttons block helps you insert buttons anywhere on the site, including posts. Here’s how to insert a button using the WordPress block editor:

1. Open the block inserter by clicking the plus (+) icon and selecting the Buttons block.

2. Type the label in the button block. For example, we’ll create a subscription button.

3. Click on the link icon to add a link to the button. The block editor also gives the option to open the link in a new tab.

4. Click Submit to save the changes.
5. To add more buttons to the group, click the plus icon at the bottom-right corner of the block group.

18. Pull Quotes and Block Quotes

With Gutenberg, it’s easier to create block quotes for citations 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.

2. Write down the pull quote in the block.

3. Change the alignment of the pull quote so that it fits the rest of the text. Other than the standard settings, Gutenberg also offers alignment at full and wide width.

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

What Do We Think of the WordPress Gutenberg Editor?

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

Pros

• Minimal coding. With the global styles interface, there’s no need to code to customize the theme’s appearance. The variety of blocks in the Gutenberg editor also makes content creation and editing easier.
• Mobile-friendly. Gutenberg offers better responsiveness than the WordPress classic editor. Having the ability to publish content on the go can improve your workflow, particularly if you travel frequently.
• Fewer plugins. Some blocks provide features that replace the need for additional plugins. If you think the default blocks are insufficient, you can install a block plugin to add many more options.
• Flexible custom blocks. Gutenberg allows developers to create custom blocks for themes and plugins, adding value to the add-ons and opening more customization possibilities.
• Meta box support. The Gutenberg editor is compatible with most meta boxes for creating custom fields and adding metadata to a post.

Cons

• Learning curve. WordPress users with no prior experience with a page builder or who are more accustomed to the old WordPress editor may need time to get used to the new layout and tool placement.
• Compatibility issues. The block editor is only available when using a block-based theme.

While Gutenberg provides more freedom to customize projects, it’s not a page builder. Understandably, WordPress blocks lack some of the design options that most page builders offer.

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

• 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.
• Spectra. Another free block plugin offering handy blocks to help you build forms, taxonomies, and timelines.
• Orbit Fox. It provides various tools to improve conversion rates, such as uptime monitoring, Google Analytics integration, and sharing icons.
• PublishPress Blocks. A free, versatile plugin that offers 20 new blocks and access control over your blocks.

Installing a plugin for the WordPress blocks will get you a better user experience and faster workflow.

Conclusion

The Gutenberg editor introduced a new way of editing content with blocks. It’s part of WordPress’s goal to implement full site editing and improve user experience.

The new block editor is integrated with the core software for WordPress 5.0 or higher. If you’re still using an older version of WordPress, install the Gutenberg plugin to utilize the editor.

Working with blocks will make site customization easier as you can easily restructure the website by moving blocks around. The block patterns available also let you change layouts instantly.

Blocks also help streamline your project with features like reusable blocks to avoid repetitive work. Additionally, the global styles panel lets you change the entire site’s design without any CSS code.

Lastly, don’t hesitate to install a WordPress block plugin. It will add more design options to your editor by introducing many new WordPress blocks to improve your workflow.