What is Gutenberg?​

So what is Gutenberg? It is simply the project name of the new WordPress editor, replacing the WordPress TinyMCE editor as the default WordPress editor in WordPress 5.0.

Gutenberg was the official name when the editor was being developed, but now it's just “WordPress block editor” or “WordPress editor” because it's officially part of core 3 software . So you will often find yourself calling it “block editor” in this post, instead of “Gutenberg”.
For a quick refresher, here's what the old WordPress TinyMCE editor looked like. This editor is now called the classic editor :
And here is what the WordPress block editor , AKA Gutenberg , looks like :

It's more than just an aesthetic update, however. Gutenberg completely changes the editing experience by moving to a block-based approach to content.

That means you can build your entire website using blocks, including landing pages, headers, and other important content. Some of these full-page editing features have been part of the WordPress software since WordPress 5.8 – we'll cover these near the end of this post.

Is Gutenberg part of WordPress?​

Gutenberg was officially released as part of WordPress 5.0 on December 6, 2018. If you are using a WordPress version of at least 5.0 (or any newer release), the block editor will be used. by default.
However, not everyone updates their WordPress core files. This is especially true for smaller projects, like a regular personal blog, where users don't feel a sense of urgency or even a reason to upgrade.

If you fall into that category, then it's likely that your site isn't running WordPress 5.0 and therefore you won't have default access to the block editor.

In that case, you can upgrade your WordPress version to the latest version, do nothing and skip this guide, or use the official Gutenberg plugin. The last option – the official plugin – is a great way to use the block editor if you don't want to update your WordPress core files at all.

How the WordPress Gutenberg editor works​

A second ago, I told you that Gutenberg is a block-based editor. That might confuse you because, if you're like most people, you probably don't know what that means.

So here's the block-based edit:

Essentially, Gutenberg replaced the single edit field of the TinyMCE WordPress editor with lots of individual “blocks.”

These blocks then allow you to build more complex designs than those allowed in the classic WordPress editor.

So what is a block?

Well, a block can be anything. For example, you might have blocks for :

• Regular text
• Image
• Embed videos
• Button
• Widgets (The same Widgets you use in your sidebar )
• Tables (you can read more about How to Create Tables in WordPress Posts and Pages (No HTML Required) )
• Et cetera.

And what's cool is that developers will be able to create their own third-party blocks that you can access through the plugin for even more flexibility.

Each block is a separate entity that you can manipulate individually. For example, here's a quick post about Gutenberg that contains three blocks:

• 2 text blocks
• 1 image block

See how easily you can rearrange those blocks just by dragging and dropping them:


And since each block is “separate,” you can also add things like custom backgrounds just for specific blocks.

Overall, it gives you more flexibility and deeper control.

So is Gutenberg a website builder?​

Um, not quite. At least not when used simply.

Gutenberg makes styling common content like blog posts or standard pages much easier, but it is not a 1:1 replacement for a page builder when used with a classic WordPress theme. However, when used with a block theme and a block extension plugin like Otter Blocks, you can achieve many of the same results as using a page builder. Maybe not 1:1, but website builders aren't a 1:1 comparison either.

In other words, Elementor is not the same as Beaver Builder, so it's not worse than saying that the block editor is not exactly the same as both. The point is that if you use a block theme and a block extension plugin, you can achieve many of the same results easily with Gutenberg that you get with a page builder plugin.

Since the block theme has been mentioned a few times, you might be wondering what the difference is between the classic 4 theme and the block theme. Don't worry, we will cover classic themes and block themes shortly.

Now, the most important takeaway here is that when combined with block themes and block extension plugins, the Gutenberg block editor completely eliminates the need for a page builder for most types of content. It also creates a single unified method for creating more complex post layouts in WordPress.

Do you have to use a block editor? Can you keep the previous WordPress editor?​

Classic Editor

Click to expand...

No, you do not need to use the block editor. And yes, you can continue to use your previous WordPress editor. To disable the Gutenberg block editor and bring your website to Classic Editor 5 , you can use the official Classic Editor plugin. If you don't know how to install a Plugin, check out the step-by-step guide on how to install a WordPress plugin .

Although it should be stated that the plugin's home page says that as of now, it “will be fully supported and maintained until 2024 or as long as needed.” How you want to interpret that is up to you, but my feeling is that at some point this plugin will probably no longer be maintained.

Read CongVietBlog's instructions on how to turn off the Gutenberg block editor to learn more.

Do you need a special theme to use the Gutenberg block editor?​

Because it is currently the default WordPress editor, the block editor is built to work with any WordPress theme. However, choosing a theme that specifically advertises that it has been tested for integration with Gutenberg will provide some benefits, not least of which will be trouble-free issues.

Having said that, since Gutenberg has been the standard for several versions of WordPress at this point, this issue is becoming less important. It may be more difficult to find a reputable theme that doesn't offer Gutenberg integration than vice versa.

Absolutely impossible to know in advance.

There are still some niche themes with less following and reputation and perhaps you will stumble across a theme that has never been updated or tested to work with the block editor. So checking is a good habit.

However, this check is only necessary for classic themes. Theme block is by default compatible with the block editor. Given their names, it would be one thing if they weren't compatible.

If you're worried about compatibility, choosing a block theme is also the safest choice for that reason.

This is a perfect introduction to the next topic…

Theme Classic và theme Block​

With WordPress 5.9, we have access to Full Site Editor 6 (FSE) which we will discuss later. However, the emergence of FSE has led to the development of a completely new type of theme called block themes.

Block themes expand your editing capabilities because they are built with blocks, not widgets. You can now achieve specific types of stylistic effects (and some types of functionality) without using third-party plugins or CSS.

Additionally, they come with pre-made templates that include multiple blocks (called “block patterns”). This means all you need to do is find a pre-made template you like, insert it into the post or page, and populate your content. You can use several different templates for different purposes (e.g. call to action, hero section, header, footer, etc.). Ultimately, it makes the process of creating pages and posts (or entire websites) a lot faster.

WordPress Customizer và Full Site Editor​

Take a classic theme like Neve as an example. Neve allows you to customize your theme using what is called WordPress Customizer 7 . However, because this is a classic theme, it will not unlock access to the Full Site Editor. Simply put, it works like this:

• Classic themes are customized through the WordPress Customizer.
• Customize block themes through the Full Site Editor.

The reason it's important to understand is because Customizer 8 's editing capabilities are not as powerful as Full Site Editor's editing capabilities.

Although it should be noted that the Pro version of Neve offers unique capabilities that are unique to Neve. Those capabilities (e.g. header/footer builder, pre-made blog layouts, etc.) incidentally extend Neve's customization capabilities beyond what you can do with the Customizer, but they don't necessarily need to be. in other classic themes.

In comparison, all block themes (like Neve FSE) give you access to the Full Site Editor and all of its customization capabilities.
With Neve FSE, you can modify headers and menus directly in the Full Site Editor. You can also edit website templates using WordPress blocks. Better yet, you can create color palettes and configure default typography styles and sizes on your website, allowing for quick and easy website building.

And note, the Neve theme is just an example, because currently there are many themes that support Full Site Editor.

Three block themes to try​

If you just want to use one theme for testing, all of the following themes support the block editor (and FSE):

• Neve FSE – New theme built specifically to work with Full Site Editor (FSE).
• Raft – A lightweight, multi-purpose theme, fully compatible with FSE. This is the most popular block theme in the entire WordPress theme repository as of the time of writing this article.
• Block Inspiro – This is a highly customizable theme from WPZOOM.

For more options, check out CongVietBlog's collection of the best Gutenberg-compatible WordPress themes, featuring both block themes and classic Gutenberg-compatible themes.

---

Build your first layout with WordPress's Gutenberg block editor​

Assuming you're using WordPress 5.0 (or higher) and a block editor, you're ready to learn what this article is all about. Below, I will show you how to use the WordPress Gutenberg block editor to build complete page layouts.

Take a quick tour of the WordPress block editor interface​

Before you start adding some blocks, let's take a quick look at the components of the main block editor interface:

• (A) – allows you to add new blocks.
• (B) – undo/redo button.
• (C) – see a list (map) of all your blocks – useful for quickly navigating between blocks.
• (D) – gives you access to document settings, including things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor.
• (E) – when you select an individual block, this gives you access to settings specific to that block.
• (F) – allows you to access a live preview of your post or publish/update your post.
• (G) – after you add some blocks, this is where you will actually work with your post content.

Add new block​

As discussed in the introduction, you will use separate “blocks” to build your layout using the editor.

To add a new block, all you need to do is click the +Plus icon and select the type of content you want to add:


In the example above, I showed you how to add a basic paragraph block. But Gutenberg actually consists of many different blocks, divided into different sections:

• Text – things like paragraphs, titles, lists, quotes, etc
• Media – insert images, galleries, videos, audio files, and other media
• Design – add buttons, columns, sections, spacers, etc
• Widgets – insert WordPress widgets, such as a list of categories or your latest posts
• Embeds – embed content from third-party sources such as Twitter, YouTube, Spotify, Vimeo and others

Build basic layouts with Gutenberg​

Let's start simple. Let's say you just want to build a basic blog post layout that includes:

• Regular text
• A photo
• A quote
• An embedded YouTube video

Here's how you do it with Gutenberg:

First, you will write your entire post in the editor. Or, if you're like me and like to write in Google Docs, you can paste it all in and then Gutenberg will automatically convert it into blocks.

Add non-text blocks​

Now that your content has been divided into blocks, you can hover over the spot where you want to insert the first image and click the + icon . That will create a break. Then, click the + icon again to insert the image block:


This will allow you to insert an image block, from which you can upload or select images in a similar way to the current WordPress editor:
After selecting the image, you'll see it immediately in your page layout:
Next, hover over the location where you want to insert the pull quote and use the same method to insert another block. You can search for “quote” or click to expand the full block inserter and find it in the Text section :


You will then see your new quote block. To create your quote, all you need to do is click on the block and enter:
To insert a YouTube video, you can add a new YouTube block from the Embeds section (or you can just search YouTube). To insert a video, all you need to do is enter the URL and click Embed :

Optional – create different Columns​

Want to be more creative? Gutenberg includes a built-in Columns block that allows you to quickly create multiple columns. All you need to do is add the Columns block from the Design section . Then you can insert other blocks inside it . If you want even more flexibility with columns, you can also find third-party Gutenberg plugins to add that feature – more on block plugins later.


Once done, all you need to do is click the Publish button :
And you will have your blog post formatted in font-end.

How to customize individual blocks​

Because WordPress editor Gutenberg includes many different blocks, I cannot show you how to use each individual block.

But I can give you a basic framework that applies to all blocks .

Basically, you control the content in the actual content section of the editor:


For basic text styling and alignment, you can use the menu bar that appears when you hover over a block:


And for more advanced styling, you would typically style a block in the Block Settings tab .

To access that tab, select the block you want to edit and browse to the Block tab as shown below:

How to rearrange individual blocks​

To rearrange blocks, you have two options. You can use the Up or Down arrow on the block toolbar to move the block in the corresponding direction:
Or you can drag and drop blocks. To enable the drag and drop function, you need to click on the six dots next to the up and down arrows. You can then drag the block wherever you want to place it.

Putting it all together​

Once you get the hang of how things work with the block editor, it's quite easy and intuitive.

Initially, you may experience some difficulties and have difficulty performing basic actions that you took for granted.

But once you get used to this way of working – you'll be building layouts in no time. And with the more advanced blocks that Gutenberg comes with, you will have more flexibility than with the TinyMCE WordPress Editor.

---

Some Gutenberg tricks are interesting, but more complicated​

As you become more familiar with the WordPress Gutenberg block editor, you may find some of the following tips will help you save time.

Quickly create a new block by typing​

Above, I showed you how to create a block using the insert button. But to save time, you can actually create blocks by typing the following syntax:

/BLOCK-NAME
An automatic suggestion box will appear to help you find the relevant block.

For example, here's how to create an image block using just your keyboard:


Quite convenient and a big time saver!

Edit source code directly​

At any point, you can edit the source code for your entire post by clicking the three dots in the top right and selecting Code Editor . You can also open the source code for an individual block by clicking the three-dot menu on that block's toolbar and selecting Edit as HTML :

Enable full screen mode, fixed toolbar, etc​

The block editor includes several different modes that allow you to vary your editing experience. You can:

• Add fixed toolbar like TinyMCE editor
• Switch to full screen mode
• Place “spotlight” in the active block

To use these “Views,” click the three-dot icon in the upper right corner.

Use Gutenberg keyboard shortcuts to save time​

In addition to the standard formatting shortcuts, the block editor also has some specialized shortcuts that can help you:

• Insert new blocks above or below the selected block
• Delete a block
• Duplicate a block
• Et cetera.

To open the full list of keyboard shortcuts, use the keyboard shortcut Shift + Alt + H.

Use the list view to quickly navigate to specific blocks​

When you start nesting blocks inside each other ( for example, inside a column block ), it can be difficult to choose the right block. Or, the same is true if you have dozens of different blocks. To fix this, you can open a list view to see a list of each block in your design, including nested blocks.

As of WordPress 6.0 (released May 2022), you can now also select multiple blocks in list view, reorder blocks using drag and drop, and open basic settings for each block .

To open the list view, click the icon on the top toolbar.

Use block patterns as templates​

A “Block pattern” is essentially a template that you can use as a starting point for your design. By default, WordPress comes with built-in patterns for things like multi-column layouts, headers, etc. But plugins can also add their own block patterns.

To insert a block pattern:

• Click on the main block inserter in the upper left corner (+ icon).
• Select the Patterns tab .
• Select the pattern you want to insert

You can also click the Explore button to open the full pattern explorer.

Find more block patterns at the WordPress.org library​

Just like WordPress.org has a library of free plugins and themes, there is now an official block pattern library of free pattern designs. You can browse the library and copy and paste patterns into the editor as easily as you copy and paste text.

To use the WordPress.org pattern library:

• Click here to visit the gallery .
• Use the search and filter options to find the pattern you like.
• Click the Copy pattern button .
• Go back to the editor and paste it in like you text (Ctrl/Cmd + V) .

Create reusable block templates​

If you have a specific collection/arrangement of blocks that you need to reuse in multiple locations, you can save a group of blocks as a reusable template. You will be able to name your template. You can then insert it just like inserting a regular block.

To create your template:

• Select the blocks you want to include
• Click on the three dots icon
• Select Add to Reusable blocks

Edit reusable block content​

In addition to making it easy to quickly insert formatted content, reusable blocks also allow you to quickly update all versions of that reusable block.

That is, when you edit reusable block content, any posts that use that reusable block will also receive the new content.

When you edit a reusable block and click the Publish button in a post or page, you'll have the option to publish the entire post or only publish changes to the reusable block (or vice versa). again). You'll see this in the menu that appears after you click Publish .

Extend the block editor with plugins​

If you want to create interesting things, you can find many Gutenberg extension plugins that add their own blocks.

The plugin I mentioned before, Otter Blocks , is a good choice to get you started. It gives you additional blocks for elements like price, comments, Google Maps, share icons, “click to tweet” button, etc.

Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE

Click to expand...

Control clutter with Block Manager​

The editor adds a lot of blocks, especially if you're using some of the block plugins we mentioned above. This can make things messy and slow you down. If there are some blocks you never plan to use, you can use Block Manager to disable them.

To use Block Manager:

• Click the three-dot icon in the upper right corner
• Select Block Manager
• Use checkboxes to disable blocks when necessary

Copy and paste blocks while keeping the Style intact​

As for text in the block editor, you can copy and paste it just like any other editor. But if you want to copy and paste an entire block while preserving its settings, you can't just use Ctrl + C like you usually do.

However, you can still do it. All you need to do is click the three-dot icon on the block's toolbar and select Copy . Once you have copied it this way, you can paste it the same way you paste regular content (e.g. Ctrl + V ).

Switch between Edit and Select mode​

With WordPress 5.4, we have access to two different modes that you can toggle using the top toolbar:

• Edit – this is what you will be doing most of the time. It allows you to edit the content of all your blocks. This is the default editing mode.
• Select – this makes it easier to select specific blocks, especially when working with nested blocks ( e.g. blocks inside a column ). After clicking a block, you will automatically switch back to Edit mode .

Test new Block Editor features​

Since the block editor is integrated into the core, there are actually two versions of the block editor:

1. The original version of the WordPress core software ( this is probably the version you are using )
2. Plugin Gutenberg

The Gutenberg plugin version is essentially a testing ground for the core editor. The plugin version contains new features that are under development. Eventually, those features will be merged into core. But if you want to test them out first, you can simply install the Gutenberg plugin from WordPress.org.

Gutenberg

Click to expand...

---

What happens to all your old content?​

Before I finish covering the content editing features in the block editor, let me quickly cover what happens to all your old content when you start using the WordPress block editor (if you have not done so ).

Don't worry – it won't go away! But the experience is a bit different:

When you enable the block editor and you've built existing content using the original TinyMCE editor, the block editor will put all your old content into a single Classic block . This classic block is basically the TinyMCE editor…but embedded inside the block editor.

To work with your old content, you can:

• Leave it in the Classic block and edit it like you would with the old WordPress editor
• Click the Convert to block button on the toolbar for Classic blocks to convert your content into separate blocks

---

How to use block editor with full page editing​

As CongVietBlog mentioned before, the goal of the block editor is to use it for more than just content editing. To this end, WordPress 5.9 introduced us to the Full Site Editor . To this end, you can use block-based editing to create and edit templates and Template parts for your theme.

It supports the following full-page editing features:

• Template parts editing: You will now use blocks to manage your sidebar, footer, and other widget areas. In FSE, these blocks are classified into categories called Template parts. (Users of the classic theme will still retain a menu item called a widget, but it will be based on blocks and edited with the block editor.)
• Template editing : You can design all the templates on your website, including 404 pages, homepage, single posts, etc.
• Theme blocks : They allow you to display dynamic content from your website/theme, like a post's publish date or a list of your most recent blog posts.
• Site editor: A linked experience that allows you to directly edit and navigate between different templates, template parts, style options, etc.
• Global styles : You will have a style manager to manage your global theme styles as well as styles for individual blocks.

Let's take a look at these new WordPress full site editing features. CongVietBlog will use Neve FSE as a theme block to demonstrate the full potential of FSE.

Neve FSE is a lightweight, responsive block theme that allows you to customize all templates and template sections. Additionally, you can set common style variations across your site to create consistent UX.

Template parts replace widgets (user block theme)​

The Template parts editor in FSE allows you to create, edit and delete template parts, which are smaller parts contained in the template. They also happen to be small sections where widgets were previously used (or if you're using a classic theme, still in use).

Use blocks instead of widgets (classic theme users)​

As of WordPress 5.8, widgets are no longer available! Now, if you are using a classic theme, instead of using widgets to control the sidebar, footer, and other widget areas, you will use blocks and a simplified version of the block editor.

When you open the widget area by going to Appearance > Widgets or using the WordPress Customizer, you will see the new look provided by blocks. These editors work exactly the same as block editors – the interface is just a bit simpler.
If you don't like this feature and want to continue using the old WordPress widget system, you can disable this feature by installing the Classic Widgets plugin .

WordPress block editor template editing mode​

Template editing mode, released with WordPress 5.8, is perhaps the biggest leap forward for full-site WordPress editing.

With template editing mode, you can use the block editor to design the actual templates your posts and pages use. For example, you can design a template where content appears in a multi-column layout instead of the usual single-column layout. Whenever you assign that template to a regular post, that post will automatically use the template's layout – you won't need to recreate the template manually.

To build your template, you can use the theme blocks we detailed in the previous section.

Template editing mode is a core feature of WordPress 5.8. However, if you are using a classic theme, that theme will only display if your theme developer has specifically enabled it in the theme code. So, if you don't see the options in the screenshot below, it might be because your theme doesn't support it yet.

If your theme supports template editing, you'll see a new Template section in the Post/Page sidebar when you edit a post or page.

You can use that section to select an existing template or create a new one.


If you create a new template, you'll be able to design it using the Full Site Editor and the theme blocks we detailed above.

Block theme WordPress​

Theme blocks also play an important role in editing the entire website. Essentially, they allow you to insert dynamic content from your website instead of static content.

For example, let's say you want to display a post's publication date in a certain location in your content. Instead of entering the date manually, you can simply add a Posted Date block and it will automatically insert the actual published date of the post. If you update a post's publish date, the Post Date block will automatically display that new date.

The most useful theme block is probably the Query Loop block, which allows you to insert a list of your most recent content. You can also use filters to select specific content. For example, you can list the five most recent blog posts in a certain category.

You can also control the template on how your posts are displayed, like changing the order of post titles and featured images.


This Query Loop block is especially useful because it essentially allows you to create your own blog list pages using just the block editor.

You can find all new blocks in the Theme section of the block inserter.

WordPress Site Editor for editing the entire website​

WordPress Site Editor was initially released in WordPress 5.9 ( January 2022 ) and later expanded in WordPress 6.0 ( May 2022 ).

It has some similarities with the template editing mode. But instead of just designing templates that you can assign to posts or pages, you can actually design your entire theme from scratch using blocks.

To see Site Editor 9 , you need to use a theme that supports blocks. You can find those using the Full Site Edit feature filter at WordPress.org .

If your theme supports Site Editor, you can open it by going to Appearance > Editor in your WordPress dashboard. You'll notice it replaces the older Customize menu because there's no need for the WordPress Customizer with the Site Editor .


At first, you will see the editor for your website home page. But you can use the Templates and Template Parts links to access site-wide designs (like individual posts and archives) and site-part designs (like headers and footers).


After choosing a template, you will be able to customize it using the block editor and special theme blocks we mentioned above.


Depending on the specific template you are editing, you may use different blocks. For example, if you are editing a header or footer, you can use this Navigation block which will replace WordPress' older menu system in themes that support blocks.