How to Use the WordPress Gutenberg: A Beginner’s Guide to the WordPress Block Editor
WordPress 5.0 introduced Gutenberg as its default editor. 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 for full site editing.
What Is Gutenberg in WordPress?
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 aspects.
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.
While the new block editor comes pre-installed in WordPress 5.0 and higher, users with older versions of WordPress can also use the block editor by installing the Gutenberg plugin. However, we highly recommend updating the core WordPress software to the latest version.
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.
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 has a global styles interface to customize the colors, typography, and layout of the entire site without coding.
However, the feature is only available when using a block-based theme in WordPress 5.9, including block-based child themes. Go to the site editor by navigating to Appearance -> Site Editor and click on the black-and-white icon at the top-right corner of the screen. The global styles interface will appear on the right side.
There’ll be four aspects to modify – typography, colors, layout, and blocks.
Manage the font family, size, line height, and font appearance for text and links in the typography settings.
In the color settings, you’ll find two main items – palette and elements. The color palette shows the colors available for the 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. Essentially, this lets you specify the padding for each website element.
The last item in the global styles interface is the blocks tab, which lets you customize a specific block. Selecting this option, you’ll see a list of available blocks. Choose any of them to start customizing. Depending on the block, you can modify its layout, color, typography, or all of these.
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 plus (+) button at the top of the editor screen and select the Patterns tab to find several pre-built block patterns in different styles.
Click on the dropdown menu to browse block patterns for buttons, columns, galleries, and headers.
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 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. 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. However, 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 side of the screen.
You’ll find several options to customize the block in the Block section. Typography controls the font size and line height, while color settings determine the text and background colors. Enabling the drop cap option will show a large capital letter at the beginning of the paragraph.
Another way to customize the text block is using the global styles panel. This method is handy for setting a specific typography and color configuration for all heading and paragraph blocks across the site.
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 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.
- Create a new block or choose an existing one.
- From the block’s toolbar, click Options -> Show more settings.
- In the Block tab, expand the Advanced menu.
- Add a unique HTML anchor to the HTML anchor textbox.
After creating the anchor, you only need to link it to the desired element.
- Highlight the piece of content where you want to insert the anchor. It can be text, an image, or a button.
- Click on the Link button in the block’s toolbar.
- Insert a hashtag (#) followed by the desired HTML anchor, then press Enter or click Submit.
Anchor links will only work on published pages or posts.
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:
- Select the block you want to save and click Options -> Add to Reusable blocks.
- Enter a name for the block and click Save.
- To reuse a block, create a new block in the Gutenberg editor.
- Click the plus (+) icon and then Browse all. Open the Reusable tab, where you’ll find all reusable blocks.
- 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.
Deleting the page or post where you created the reusable block will cause an error on other projects using the block.
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.
- Drag and drop a table block from the block Directory to your Gutenberg workspace.
- Set the number of columns and rows, then click Create Table.
- 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.
- Click the plus (+) icon and select the Columns block.
- Choose one of the available column patterns.
- 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:
- Click the plus (+) icon and find the Custom HTML block.
- Insert the custom HTML in the block that will appear.
- 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:
- Open the block inserter by clicking the plus (+) icon.
- 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 embeds 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.
- Click the plus (+) icon and scroll down to the Embeds section.
- If the website is not listed, use the Embed block. For this example, we’ll use the YouTube block.
- Copy and paste the URL of the media you want to embed on the provided textbox.
- Click Embed and the media will appear on the WordPress page or post.
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:
- Open the block inserter by clicking the plus (+) icon and selecting the Buttons block.
- Type the label in the button block. For example, we’ll create a subscription button.
- 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.
- Click Submit to save the changes.
- 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:
- Navigate to Block Directory -> Pullquote.
- Write down the pull quote in the block.
- 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.
- 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.
- 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.
- Gutenberg Blocks. 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.
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.