What is Gutenberg? Step by Step Guide to the WordPress Builder

I think you’ll agree when I say that there are many steps to building a website. You have to choose a domain name, setup hosting, pick a theme and decide if you need plugins. With that done, your next step is to create content. And while there are many page and content builder plugins to choose from, WordPress already includes Gutenberg. This is a great option for new users as it’s built-in and is supported by many popular themes.

But what is Gutenberg for? And how do you get started with it? No problem, we’re here to help. There is a bit of a learning curve, but by the end of today’s post, you’ll have a good understanding of Gutenberg and how you can use it to create your WordPress posts and pages.

What is the Gutenberg Editor?

Gutenberg is WordPress’ default block-based content editor and page builder. The Gutenberg editor uses visual content blocks to make creating layouts and content easier. These content blocks include:

• Text Blocks: Paragraph, Heading, List, Quote, Classic, Code, Details, Preformatted, Pullquote, Table, Verse
• Media Blocks: Image, Gallery, Audio, Cover, File, Media & Text, Video
• Embed Blocks: Twitter, YouTube, Vimeo, WordPress, etc (full list of supported embeds)
• Design Blocks: Buttons, Columns, Group, Row, Stack, More, Page Break, Separator, Spacer
• Widget Blocks: Archives, Calendar, Categories List, Custom HTML, Latest Comments, Latest Posts, Page List, RSS, Search, Shortcode, Social Icons, Tag Cloud

Gutenberg can also be used for Full Site Editing (FSE). If you are using a FSE theme then you can use Gutenberg to design any part of your WordPress site, including the header, footer, page templates and more. For FSE you can also use the following blocks when creating template parts:

• Theme Blocks: Navigation, Site Logo, Site Title, Site Tagline, Query Loop, Posts List, Avatar, Post Navigation Link, Next Post, Previous Post, Read More, Comments, Post Comments Form, Post Comment, Login/out, Term Description, Archive Title, Search Results Title, Template Part

And depending on the plugins you have installed and active on your site you may have additional Gutenberg blocks related to those plugins. For example, WooCommerce adds a number of product blocks, Contact Form 7 adds a form block, Meta Slider will add a slider block, etc.

Is the Gutenberg Editor Free?

Gutenberg is included with WordPress – so yes, it is a free editor that you can use to build and customize your WordPress site.

Do I Need to Install Gutenberg?

Since WordPress 5.0 Gutenberg has been built into WordPress core, so there is nothing for you to install. Gutenberg is ready to use as soon as you created your site.

However, if you prefer a traditional WordPress experience, or if your theme is designed to be used with the original WordPress editor, then you can install the free Classic Editor plugin. This will disable Gutenberg and revert your posts and pages back to the classic tinyMCE editor.

What is the Difference Between Gutenberg and the Classic Editor?

As mentioned, Gutenberg is a visual front-end editor. This means you can see rendered versions of your blocks and customizations as you create your posts and pages. So if you insert a 3-column block you will see the columns, or if you customize a heading to use a larger font and red text you will see the styling applied to the heading. A benefit of using Gutenberg is that it is easy to design custom layouts on a per page (or even per post) basis.

The Classic editor is text based, back-end editor. With it you can certainly add and customize content, but you cannot see what your content will look like while you are adding it. For example, if you add a shortcode to display an image slider you will just see the shortcode text in the Classic editor, you will not see the actual images. In addition, the Classic editor do not include options for creating post or page layouts – it really is only for adding content to posts and pages that are styled by your theme. For more advanced options you really need to use a page builder in conjunction with the Classic editor.

In terms of functionality, the Classic Editor and Gutenberg do the same thing; both help you to create content without coding. But Gutenberg ships with more features than the Classic Editor, meaning you can create extraordinary layouts and rich-media content on the fly.

Should I Use Gutenberg?

That really depends on your personal preference and your WordPress theme. If you’re new to WordPress, you’re using a block theme, like creating your content in a visual builder, or simply like a cleaner more modern editor then Gutenberg is definitely for you! Truthfully the only reason to not use Gutenberg is if you are using a Classic theme that does not support block based editing.

Is Gutenberg Easy to Use?

Yes, Gutenberg is easy to use but like most software there is a learning curve when getting started. For the most part using Gutenberg is intuitive. It is a visual editor, so it’s much easier to see what your content looks like as you create it.

However, within Gutenberg there are many design options. Initially you may not know where to locate specific features or how to utilize settings that are available. In our opinion, if you set aside a bit of time to familiarize yourself with the editor you’ll be a Gutenberg pro in no time. Which brings us to the main focus of this article…

How to Use the Gutenberg Block Editor

To get started with Gutenberg you will first need to create a new Page or Post to edit.

So login to your WordPress dashboard navigate to your Pages or Posts (we’ll be using a post in our guide) and click Add New. Doing so leads you straight to the Gutenberg editor with a welcome message similar to what’s shown below.

From here you can close the message then take care of a few basic steps before creating your content.

For example you might want to click to add a Title (1), edit the URL slug (2) or even add categories and tags. And with that done it’s time to get into your content.

Inserting Gutenberg Blocks

With Gutenberg you create your content with Blocks. To insert your first block click the + Plus icon. The plus to the left opens a sidebar of all available blocks, while the plus to the right opens a quick modal window with your most used blocks as well as a search.

From here you can simply insert the block you’d like to use. But with so many to choose from, let’s take a look at the blocks and their options!

How to Add Text

There are a handful of core blocks that you can use to add text when building in Gutenberg. The first and default being the Paragraph block. This is a block you’ll use a lot, especially since just hitting “enter” when creating content in Gutenberg will insert a paragraph block automatically.

You can customize the text color, background color, link color (and hover color), font size, block paddings and margins using options in Settings sidebar menu. Or, within your paragraph block, you can use formatting options in the Gutenberg block toolbar for Align Text ≡, Bold and Italics, or the settings under More ▼ (highlight, strikethrough, footnote, etc).

And to add links, highlight your anchor text then click on the Link option in the block toolbar. Here you can add a URL in the field, or search your site to find an existing page or post to link to.

Heading

In addition to paragraphs, you’ll want to break up chunks of text with a Heading. This makes it easier for those reading your content, as well as for search engines, to understand the structure and key points.

The block includes easy options for block Align (if you want to make your heading pop-out further than the text), Change Level (select from H1, H2, H3, etc) and Align Text ≡. Just remember to use headings appropriately (e.g. a page should only have one H1, which is typically the post or page title, and all other headings should nest – think of it like creating a table of contents).

Then in the Settings sidebar menu there are similar options to paragraphs for colors, typography, block paddings and margins, and for headings you may also want to note the Advanced section where you can add a HTML Anchor (this is typically used if you want to link to a specific element or to add local scroll on a page).

List

In some cases you may also find the List block helpful. With it you can quickly add an unordered (dotted) or ordered (numerical) list by clicking on the parent List block icon. If you select an ordered list there are additional sidebar (1) Settings ⚙ to edit the start value and numbering style, and both lists can be customized using sidebar (2) Styles ◐ for colors, typography, paddings and margins.

Quotes

Similarly, the Quote, Pull Quote and Verse blocks all have their uses to add quotes, poems or song lyrics to your content. By default they may have styling a bit different from regular paragraphs so they stand out, though this will depend on your theme. In any case, you can click the Options ⋮ to the right of various block settings to view and edit options for fonts, margins, paddings and more.

Details

To add an FAQ or toggle then the Details block is what you’re looking for. When inserted it adds two sections – a summary which is always visible, and a type/hidden area where you can add other blocks that are visible when the details are toggled open. It’s worth noting that there is an option within the Settings ⚙ to have your details open by default, as well customizations in under Styles ◐ for colors, fonts and spacing between the summary and type.

Table

The last block for text we want to make sure you’re aware of is the Table block. Just like it sounds, it will insert a table into your content. When first inserted the block will prompt you to set the number of columns and rows you want in your table.

If you need to add or remove rows/columns simply click on the Edit table ⊞ option in the toolbar. You can use available Settings ⚙ to add a header, footer and fixed table cell widths for your table as a whole.

And you can switch to a stripe style and make other design focused customizations from the Styles ◐ tab.

Note: We did skip the Classic block, which will add a text area featuring the Classic Editor’s WYSIWYG editor in place of Gutenberg’s block options.

Insert Media

After text, your second most used blocks will likely revolve around media. WordPress supports many types of media and Gutenberg offers matching blocks for each. This makes inserting media into your content a breeze.

Image

When adding images with the Image block you can simply drag and drop in image files right from your desktop (tip – be sure to use supported file formats like jpg, jpeg, png, gif or ico) or select an existing image from your media library.

Once added you can use the Settings ⚙ to edit your image alt text (important for SEO and accessibility), the image aspect ratio and choose an image size (note – these options are based on your site’s set cropping sizes within your main WordPress dashboard under Settings > Media).

There are useful Styles ◐ options for round, duotone filters, borders and shadows. And from the toolbar when you select your image block you’ll find additional settings to add a link, text overlay and/or caption. There is a crop option as well, though we personally recommend cropping (and optimizing) images before you upload them to your WordPress site).

Gallery

Want to add multiple images together? That is exactly what the Gallery block was made for.

After inserting you can drag and drop in images for your gallery or select from your media library.

Drag in or select as many images as you’d like. They will be added to your gallery in the order your select them.

Next from Settings ⚙ you can choose the number of columns for your gallery (our example is 3 images in 3 columns, but additional rows are added to your gallery to form a complete grid), enable links to the media files, randomize your image order and more.

Then use Styles ◐ to adjust paddings and block spacing, or the toolbar to add more images or even captions. You can also click on each individual image in your gallery to customize it with the image options mentioned before (including cropping, duotone, etc).

Audio & Video

For Audio blocks you can choose to upload a self-hosted audio file in a supported format (mp3, m4a, ogg, wav) or you can use a link to an approved embed. If you upload your own audio file, there is a basic player built into WordPress that you can customize a bit with Gutenberg’s settings for autoplay, loop and preload.

Similarly with the Video block you can upload your own video file (mp4, mov, wmv, avi, mpg, ogv, 3gp, 3g2) then use available settings to semi-customize your block. For videos there are options to enable autoplay, loop, mute, controls, play inline, preload and an option to upload a featured poster image for your video.

Note – if using a link for the audio or video your block will be converted into the corresponding embed block. For example, if you add a link to a Soundcloud song Gutenberg will turn the Audio block into a Soundcloud block, and a link added for a YouTube video will change a Video block to a YouTube block. Specific embed blocks offer different settings than the self-hosted Audio and Video blocks.

File

Depending on your site content it may be necessary to add a document file to your website. For example, a doctor who wants new patient forms available for download, or a financial planner might want to share a spreadsheet to help customers create a monthly budget. In these cases the File block allows you to add documents such as pdf, doc(x), ppt(x), pps(x), odt, xls(x) and psd.

All files will display the file name and a download button by default, with the exception of PDFs that offer additional settings for the file preview.

Using Design Elements

Along with general text and media, there are a few more block elements you make want to make use of to enhance your content.

Buttons

The Buttons block is a great way to add links to other pages or important content when creating a design. With it you can insert a single button or multi-buttons (just use the “Copy” option in the toolbar).

There are options on the parent Buttons block for justification, orientation, wrap (if the buttons go onto a second line), margin and block spacing (the space between individual buttons). Then on individual buttons you can add a link, custom button width (by default buttons are the size of your button text, but you can have a set % of your site width instead), Fill or Outline style, typography (size, font, etc), paddings and margins.

Breaks

The More block is a functional element you can use to define a read more break point (the text before the more block is used as the excerpt for your content), while the Page Break block enables you to break your post into a new page after each instance.

Or you can create a visual break between sections using the Spacer and Separator block. As they sounds, the spacer adds a space (or gap) while the separator adds a visible divider (choose from a line or dots).

Gutenberg Embeds

You’ve probably come across a website before that has a YouTuber video or a Twitter (X) post embedded on a page. With Gutenberg you can do the same thing in WordPress, and it’s as easy as inserting a block. Just search for and use the specific platform or network embed block to add a link to the content you want to share (or you can use the Embed block to paste in the link and it should turn into the specific network embed block).

At the time of writing, Gutenberg supports 32 content sources for embeds. This includes SoundCloud, Youtube, Twitter, Pinterest, WordPress.com, Slideshare, TED and more.

Use or Display Code

There are a few ways you can add code within Gutenberg for your content.

The first is displaying code snippets with the Preformatted block or the Code block. This is not functional code, and is instead displayed on the front end so your readers can view or copy it. It’s especially useful when creating tutorial type blog posts.

If you want to add and apply custom code on the page (not just display it) then you’ll need to use the HTML block (though we really don’t recommend this unless you are familiar with code).

Shortcodes

Finally, even though Gutenberg is a block editor you can still use shortcodes related to your active WordPress theme or any plugins you have installed. Just insert the Shortcode block.

With it you can paste in the shortcode you want to use within the block, and the shortcode will be rendered on the frontend once your content is live.

How to Organize and Group Blocks

You can also use blocks to adjust the layout of your content or to group sets of blocks together.

Group, Row, Stack, Column

When inserting blocks you can use other blocks to organize them. This makes it much easier copy or move the blocks as a set.

All you have to do is select your blocks then click the toolbar option you would like to use. A Group puts your blocks into a container together as-is, a Row is a single horizontal container for your blocks and a Stack is a vertical container.

You can also use the Columns block to organize content horizontally using multiple containers, but unlike Rows which are always horizontal Columns can shift to a vertical layout on mobile when using the stack setting (which should be enabled by default).

You can always check how your columns, rows or stacks look on mobile using the preview option at the top of the editor. This can be a big help when deciding which grouping option you want to use.

Cover, Media & Text

There are a couple ready-made block groups included in Gutenberg. These are for very common block groups and just help speed up the page building process a bit.

Namely the Cover block, which is specifically designed for adding images (or videos) with text overlays.

And the Media & Text block, which adds two columns with media on side and a text block on the other.

How to Reorder Blocks

You can also reorganize blocks. One option is to use the Move Up ▲ or Move Down ▼ arrows available in the Gutenberg toolbar visible after clicking on/in a block. This will move the current block one space above or below it’s neighboring blocks.

Or in the same toolbar, you can use the Drag ⋮⋮ option to click and drag a block to a new location within your content.

Saving and Reusing Blocks

To reuse a single block you can simply Copy and paste or Duplicate it. This creates an exact copy of your block. Just click on the block you want to copy, and then click on Options ⋮ at the end of the visible Gutenberg toolbar. This will open up a drop down menu where you can Copy your block to paste somewhere else on your page, or Duplicate to insert an identical block right after the one you’re working with.

In the same Options drop down menu you’ll also find Copy Styles. This will copy any typography, color or other style settings you’ve customized for your block (it will not copy the content in the block). To reuse the style you copied, click on another block, open the Options drop down menu and click on Paste Styles. This should apply the style settings without effecting your block content.

If you’ve built a layout consisting of multiple blocks that you would like to reuse there are two options. First, if you just want to reuse your layout once you can click on Options ⋮ at the top right of the editor and under the Tools section click on Copy All Blocks. Now, open a new page and paste your blocks (command+V / windows+V).

However, if you’ve created a block layout that you’ll want to use repeatedly you should create a pattern.

Creating and Using Block Patterns

Let’s say you’ve created a callout section with a gallery, heading, some text and a clickable button and you already know that you’ll want to reuse the same callout design on other pages. In this case it’s best to create a pattern. A pattern saves a group of blocks so that you can insert them again on any posts or pages in the future.

First you’ll need to add, style and group your blocks.

Next, select your Group, click on Options ⋮ in the toolbar and then click on the option to Create Pattern.

This should open a modal pop-up window where you can give your pattern a name and add it to a category within your patterns library (which is helpful if you create lots of patterns).

By default your pattern will show the Synced option enabled. This is sort of like a global sync – meaning all instances of the patten are connected. So if you update your pattern in the future, everywhere you’ve inserted that pattern on your site will update. This is great for something like a callout, since you may want to change the button link or update the staff photos used, and having the pattern update everywhere will save you a ton of time and effort.

If however you want to be able to customize your pattern after inserting it then simply toggle off the sync setting. This will allow your pattern to function as more of a sample template, like if you’ve created a pattern for your staff posts with an image, bio and links where the final content will be different for each person.

Once you’ve added the name, categories (if any) and confirmed the sync setting just click Create. This will add your pattern to your pattern library.

To use your new pattern, click the + Plus icon in the content area (or at the top of the editor) then search for your pattern name. Then click to add it to your content.

To view all of your patterns, click the + Plus icon at the top of the editor, then go to the Patterns tab and select the My patterns category. Here you’ll find all of the patterns you’ve saved.

How to Edit a Pattern

If you want to edit or update a pattern, you’ll need to go to your main WordPress dashboard and navigate to Appearance > Editor > Patterns. Here you should see all the patterns that you’ve created as well as the patterns included with your active theme or plugins. Click on the pattern to edit.

Then click on the Edit ✎ icon.

Now you can make any changes you want to your pattern. When you’re done make sure to click the Save button. If your pattern is Synced then the changes you made will be applied to every place your pattern was previously inserted on your site.

Note: If you are using a Gutenberg Theme that supports Full Site Editing (FSE) you can also edit the templates for your post types (blog, portfolio, staff, etc) from Appearance > Editor > Templates. But we’ll be covering FSE more in another guide.

How to Remove a Block

If you want to get rid of a block you’ve inserted in Gutenberg, simply click on the block and hit your “delete” button on your keyboard. This will remove the block and any content or other blocks contained within it (e.g. if you delete a row, all the blocks inside of that row will get deleted as well).

If you can’t seem to be able to select the block you want to remove, then you can open Gutenberg’s Document Overview by clicking on the tiered lines icon at the top left of the editor (or with the keyboard shortcut control+option+O / ctrl+alt+O). From here you can scroll through the list of blocks you’ve inserted into your content making it easy to find, select an delete the specific block you’re looking for.

Third Party Gutenberg Blocks

Many WordPress themes and plugins are compatible with the Gutenberg editor. Though some take it a step further and integrate their own custom blocks for you to use within the editor. A few examples include WooCommerce, Contact Form 7, Depicter Slider & Carousel, and many others. These new blocks are readily available in the main block inserter.

For example, with WooCommerce installed and active on your site you can insert product focused blocks into your WordPress post. For example, you could add the On Sale Products block to a post you’ve written as a part of a seasonal promotion.

How to Add More Blocks to Gutenberg

Need more? That’s what plugins are for. There are many extensions for Gutenberg to add individual blocks, or whole collections of 50+ blocks for all types of design options.

In this particular guide we’re not going to get into specific recommendations, since we’re only focusing on core Gutenberg features. But you can checkout our list of general Gutenberg extension and add-on plugins if this is something you’re interested in.

---

We hope our step by step guide to the Gutenberg editor helped you put things into perspective. We believe you can now use the block editor to create content like a pro.

Please share your concerns, thoughts, and questions in the comment section below.