Skip to content

How to Use the WordPress Block Editor – Your WordPress Gutenberg Guide

With the release of WordPress 5.0 in 2018, WordPress introduced the Gutenberg editor. But you might know it simply as the “WordPress editor” or the “block editor”.

The block editor launched a completely different approach to content creation in the form of blocks (hence the name…). Blocks present a more flexible, user-friendly way of designing posts and pages on your site.

If you’re new to WordPress, you might want to learn exactly how to make a WordPress website using those blocks. We’ll show you, and we’ll also dig into all of the editor’s other features to help you create content on your site.

WordPress Gutenberg guide.

We’ll start by walking you through how you can use the block editor to create content for your posts and pages. Then, we’ll give you a look at how the block editor goes beyond just posts and pages and into “full-site editing”. With these full-site editing features, you can use blocks to control your widget areas, design theme templates, and more.

Let’s check it out!

📚 Table of contents:

What is Gutenberg?

So, what is Gutenberg? It’s simply the project name for the WordPress block editor, which replaced the WordPress TinyMCE editor as the default WordPress editor in WordPress 5.0.

Gutenberg was the official name while the editor was under development, but it’s now just “the WordPress block editor” or “the WordPress editor” because it’s officially part of the core software. As such, you’ll often see me refer to it as the “block editor” in this post, rather than “Gutenberg”.

As a quick refresher, here’s what the old WordPress TinyMCE editor looked like. This editor is now called the classic editor:

original wordpress tinymce editor.

And here’s what things look like in the WordPress block editor, AKA Gutenberg:

The Gutenberg editor.

It’s more than an aesthetic update, though. Gutenberg completely changes the editing experience by moving to a block-based approach to content (more on exactly what blocks are in a second!).

While Gutenberg revolutionized the content creation process, WordPress has also “gone beyond the post into page templates and ultimately, full site customization.” The official name for this change is full-site editing.

That means that you’re able to build your whole site using blocks, including landing pages, headers, and other important content. Some of these full-site editing features have been a part of the core WordPress software since WordPress 5.8 – we’ll cover these near the end of this post.

Is Gutenberg a part of WordPress?

Gutenberg was officially released as part of WordPress 5.0 on December 6, 2018. If you’re using a WordPress version that’s at least 5.0 (or any later release), the block editor will be used by default.

However, not everyone updates their core WordPress files. This is especially true for smaller projects, like casual personal blogs, whose users don’t feel a sense of urgency or even a reason to upgrade.

If you fall under that umbrella, then there’s a chance your site might not be running WordPress 5.0 yet, and therefore you won’t have default access to the block editor.

In that case, you can either upgrade your WordPress version to the latest iteration, do nothing and ignore this tutorial, or use the official Gutenberg plugin. The last option – the official plugin – is a good way to use the block editor if you absolutely just don’t want to update your core WordPress files.

How the WordPress Gutenberg editor works

A second ago, I told you that Gutenberg is a block-based editor. It was kind of rude to leave you hanging because, if you’re like most people, you might not know what that means.

So here’s block-based editing 101:

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

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

So what’s a block?

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

  • Regular text
  • Images
  • Video embeds
  • Buttons
  • Widgets (yes, those same widgets you use in your sidebar)
  • Tables
  • Etc.

And what’s neat is that developers will be able to create their own third-party blocks that you can access via plugins for even more flexibility.

Each block is its own entity that you can manipulate on an individual basis. For example, here’s a quick Gutenberg post that contains three blocks:

  • 2 text blocks
  • 1 image block

Watch how easily I can rearrange those blocks just by dragging and dropping them:

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

In general, it gives you more flexibility and in-depth control.

So Gutenberg is a page builder then, right?

Ehh, not quite. At least not when used purely by itself.

Gutenberg does make it a lot easier to style regular content like blog posts or standard pages, but it’s not a 1:1 substitute for page builders 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 much of the same results that you would with a page builder. Maybe not 1:1, but the page builders themselves aren’t 1:1 comparisons either.

In other words, Elementor is not the same as Beaver Builder, so it’s not any worse to say that the block editor isn’t exactly like the two of them. The point is that if you use a block theme and a block extension plugin, you can achieve much of the same results in a user-friendly way with Gutenberg, that you’d get with a page builder plugin.

Since block themes have been mentioned a few times now, you might be wondering what the difference between classic themes and block themes is. Don’t worry, we’ll cover classic themes versus block themes in a moment.

For now, the most important take-away here is that when combined with a block theme and a block extension plugin, the Gutenberg block editor all but eliminates the need for page builders 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 the block editor? Can you keep the previous WordPress editor?

No, you do not have to use the block editor and yes, you can keep using the previous WordPress editor. To deactivate the Gutenberg block editor and return your site to the classic editor, you can use the official Classic Editor plugin.

Though it should be stated that the plugin’s page says that as of right now, it “will be fully supported and maintained until 2024, or as long as is necessary”. It’s your call how you want to interpret that, but my sense is that at some point the plugin will reach dustbin status.

Read our guide on how to disable the Gutenberg block editor to learn more.

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

Because it’s now the default WordPress editor, the block editor is built to work with any WordPress theme. However, choosing a theme that specifically advertises that it’s been tested for Gutenberg compatibility will offer some benefits, namely that things aren’t going to break.

Having said that, given that Gutenberg has been the standard for several WordPress iterations at this point, this is becoming less and less of an issue. It’d probably be more challenging to find a reputable theme that doesn’t offer Gutenberg compatibility than the other way around.

You never know though.

There are still some niche themes out there with smaller followings and reputations and perhaps you’ll stumble upon one that was never updated or tested to work with the block editor. So, it’s good practice to check.

This checking is only necessary for classic themes though. Block themes are compatible with the block editor by default. Given their name, it’d be kind of misleading if they weren’t.

If you’re worried about compatibility, block themes are also the safest route to take for that reason.

That’s a perfect segue to the next topic at hand…

Classic themes vs block themes

With WordPress 5.9, we got access to the Full Site Editor (FSE) which we’ll discuss later. However, the emergence of the FSE led to the development of a whole new type of theme known as block themes.

Block themes expand your editing capabilities since they’re built with blocks, not widgets. You’re now able to achieve specific types of stylistic effects (and some kinds of functionality) without third-party plugins or CSS.

Plus they come with pre-made templates comprised of multiple blocks (called “block patterns”). This means that all you need to do is find a pre-made template you like, insert it into a post or page, and plug your content in. You can use a few different ones for different purposes (e.g., call to action, hero section, header, footer, etc). In the end, it makes the process of creating pages and posts (or entire websites for that matter) so much faster.

WordPress Customizer vs Full Site Editor

Take a classic theme like Neve for example. Neve enables you to customize your theme using what’s called the WordPress Customizer. However, because it’s a classic theme, it won’t unlock access to the Full Site Editor. Simply put, it works like this:

  • Classic themes customize via the WordPress Customizer
  • Block themes customize via the Full Site Editor.

The reason it’s important to understand that is because the editing capabilities of the Customizer are not as robust as those offered by the Full Site Editor.

Although it should be noted that the Pro version of Neve does offer unique capabilities that are unique to Neve. Those capabilities (e.g., a header / footer builder, pre-made blog layouts, etc) happen to extend the customization capability of Neve beyond just what you can do with the Customizer, but they aren’t necessarily available 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 power.

Neve FSE

With Neve FSE, you can modify headers and menus directly within the Full Site Editor. You can also edit site templates using WordPress blocks. Better yet, you can create a color scheme and configure default typography styles and sizes across your site, enabling quick and easy site building.

Three block themes to try

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

  • Neve FSE – Our new theme that’s specifically built to work with the Full Site Editor (FSE).
  • Raft – A lightweight, multi-purpose theme that’s fully compatible with the FSE. It’s the most popular block theme in the entire WordPress theme repository as of the time of this writing.
  • Inspiro Blocks – This is a highly customizable theme by WPZOOM.

For more options, check out our collection of the best Gutenberg-compatible WordPress themes, which features both block themes and classic themes that are Gutenberg-compatible.

Building your first layout with the Gutenberg WordPress block editor

Assuming you’re using WordPress 5.0 (or higher) and the block editor, you’re ready to dig into the meat of this article. Below, I’ll show you how to actually use the WordPress Gutenberg block editor to build a complete page layout.

A quick tour of the WordPress block editor interface

Before you start adding some blocks, let’s go over a quick run-down of the elements of the main block editor interface:

Gutenberg interface.
  • (A) – lets you add new blocks
  • (B) – undo/redo buttons
  • (C) – view a list view (outline) of all your blocks – helpful for quickly navigating between blocks
  • (D) – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
  • (E) – when you have an individual block selected, this gives you access to settings that are specific to that block
  • (F) – lets you access a live preview of your post or publish/update your post
  • (G) – once you add some blocks, this is where you’ll actually work with your post’s content

Adding new blocks

As I discussed in the intro, you’ll use separate “blocks” to build your layouts with 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 includes a ton of different blocks, divided into different sections:

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

Building a basic layout with Gutenberg

Let’s start off simple. Say you just want to build a basic blog post layout that includes:

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

Here’s how you’d do it with Gutenberg:

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

Adding the non-text blocks

Now that your content is split into blocks, you can hover over the spot where you want to insert your first image and click the plus icon. That will create a break. Then, click the plus 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 manner to the current WordPress editor:

Image upload options.

Once you select your image, you should see it right there in your page layout:

Uploaded image example.

Next, hover over the spot where you want to insert the pull quote and use the same approach to insert another block. You can either search for “quote” or click to expand the full block inserter and look for it in the Text section:

Then, you’ll see your new pull quote block. To create your quote, all you need to do is click into the block and type:

Adding quote text.

To insert a YouTube video, you can add a new YouTube block from the Embeds section (or you can just search for YouTube). To insert a video, all you need to do is enter the URL and click Embed:

Optional – creating different columns

Want to get even more creative? Gutenberg includes a built-in Columns block that lets you 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 flexible columns, you can also find third-party Gutenberg plugins that add those – more on block plugins later on.

Once you’re finished, all you need to do is click the Publish button:

How to publish a post in Gutenberg.

And you’ll have your formatted blog post on the front-end.

How to customize individual blocks

Because the WordPress Gutenberg editor includes a ton of different blocks, I can’t 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 body 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’ll usually style the block in the Block settings tab.

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

How to rearrange individual blocks

To rearrange blocks, you have two options. You can use the Up or Down arrow in the block toolbar to move the block in that respective direction:

Move blocks using arrows.

Or, you can drag and drop blocks. To activate the drag and drop functionality, you’ll need to click on the six dots beside the up and down arrows. Then, you can drag the block wherever you want to put it.

Putting it all together

Once you pick up the flow of how things work with the block editor, it’s fairly painless and intuitive.

At first, you might experience some growing pains and struggle to perform basic actions that you’ve taken for granted.

But once you get the hang of things – you should be cruising through building layouts. And with the more advanced blocks that Gutenberg comes with, you’ll have more flexibility than the TinyMCE WordPress Editor.

Some neat, but more advanced, Gutenberg tricks

As you become more acquainted with the WordPress Gutenberg block editor, you might find some of these tricks to be time-savers.

Quick-create a new block with typing

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

/BLOCK-NAME

An auto-suggest box will appear to help you find the relevant block.

For example, here’s how to create an image block with just your keyboard:

Pretty 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 on 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 dots menu on that block’s toolbar and selecting Edit as HTML:

Activate full-screen mode, fixed toolbar, etc.

The block editor includes a few different modes that let you change the editing experience. You can:

  • Add a fixed toolbar like the TinyMCE editor
  • Go full-screen
  • Put a “spotlight” on the active block

To use these “Views”, click on the three dots icon in the top-right corner.

top toolbar.

Use Gutenberg keyboard shortcuts to save time

Beyond standard formatting shortcuts, the block editor has a number of dedicated keyboard shortcuts that can help you:

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

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

block keyboard shortcuts.

Use the list view to quickly navigate to specific blocks

Once you start nesting blocks inside one another (e.g. inside a column block), it can be difficult to select the correct block. Or, the same holds true if you have dozens of different blocks. To fix this, you can open list view to see a list of every single block in your design, including nested blocks.

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

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

list view.

Use block patterns as templates

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

To insert a block pattern:

  • Click the main block inserter in the top-left corner (the plus icon).
  • Choose the Patterns tab.
  • Choose the pattern that you want to insert

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

block patterns.

Find more block patterns at the WordPress.org library

Just like WordPress.org has libraries for free plugins and themes, there’s now an official block pattern library for free pattern designs. You can browse the library and copy and paste patterns into the editor just as easily as you’d copy and paste text.

To use the WordPress.org pattern library:

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

Create reusable block templates

If you have a specific collection/arrangement of blocks that you need to reuse in multiple spots, you can save a group of blocks as a reusable template. You’ll be able to name your template. Then, you can insert it just like you would a regular block.

To create your template:

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

Edit reusable block content

Beyond making it easy to quickly insert formatted content, reusable blocks also let you quickly update all instances of that reusable block.

That is, once you edit the reusable block content, every single post that uses that reusable block will also get 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 full post or just publish the changes to the reusable block (or vice versa). You’ll see this in the menu that appears after you click Publish.

publish a reusable block.

Extend the block editor with plugins

If you want to get fancy, you can now find plenty of Gutenberg extension plugins that add their own blocks.

The plugin I mentioned previously, Otter Blocks, is a good option to get you started. It gives you additional blocks for things like pricing, testimonials, Google Maps, sharing icons, “click to tweet” buttons, and more.

Control clutter with Block Manager

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

To use the Block Manager:

  • Click the three dots icon in the top-right corner
  • Select Block Manager
  • Use the checkboxes to disable blocks as needed
block manager.

Copy and paste blocks while preserving styles

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 also preserving its settings, you can’t just use Ctrl + C like you might be used to.

However, you still can do it. All you need to do is click the three dot icon in a block’s toolbar and select Copy. Once you’ve copied it in this way, you can paste it just like you would normally paste content (e.g. Ctrl + V).

copy block.

Switch between Edit and Select modes

With WordPress 5.4, we got access to two different modes, which you can switch between using the top toolbar:

  • Edit – this is what you’ll work in most of the time. It lets you edit the content of all your blocks. This is the default editor mode.
  • Select – this makes it easier to select specific blocks, especially when working with nested blocks (e.g. blocks inside a column). Once you click into a block, you’ll automatically switch back to Edit mode.
Select and edit modes.

Experiment with new block editor features

Ever since the block editor was merged into the core, there are actually two versions of the block editor:

  1. The native version in the core WordPress software (this is likely what you’re using)
  2. The Gutenberg plugin

The Gutenberg plugin version is basically a testing ground for the core editor. The plugin version contains new features that are under development. Eventually, those features will be merged into the core. But if you want to play around with them early, all you need to do is install the Gutenberg plugin from WordPress.org.

What happens to all of your old content?

Before I finish covering the content editing features in the block editor, let me quickly cover what will happen to all of your old content once you start using the WordPress block editor (if you haven’t already).

Don’t worry – it won’t disappear! But the experience is a little bit different:

When you enable the block editor, and you have existing content built with the original TinyMCE editor, the block editor will put all of 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 either:

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

How to use the block editor with full-site editing

As we mentioned earlier, the goal of the block editor is to use it for a lot more than just a content editor. To this end, WordPress 5.9 introduced us to the Full Site Editor. With the current iteration, you’re able to use block-based editing to create and edit the templates and template parts for your theme.

Neve FSE edit templates and template parts

It supports the following full-site editing features:

  • Template parts editing. You’ll now use blocks to manage your sidebar, footer, and other widget areas. In FSE, these blocks are categorized under a category called template parts. (Classic theme users will still retain a menu item called widgets, but it will be based on blocks and edited using the block editor.)
  • Template editing. You can design all sorts of templates on your site, including 404 pages, your homepage, single posts, and more.
  • Theme blocks. These let you display dynamic content from your site/theme, like a post’s publish date or a list of your most recent blog posts.
  • Site editor. A cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
  • Global styles. You’ll get a style manager to manage your global theme styles, as well as the styles for individual blocks.

Let’s go through these new WordPress full-site editing features. We’re going to be using Neve FSE as our block theme to demonstrate the full potential of the FSE.

Neve FSE is a lightweight, responsive block theme that lets you customize all templates and template parts. Plus, you can set global style variations across your site to create a consistent UX.

Template parts replace widgets (block theme users)

The Template Parts editing section in FSE allows you to create, edit, and remove template parts, which are smaller sections included within templates. They also happen to be the mini-sections where widgets were previously used (or if you’re on a classic theme, are still using).

Template parts inside the Full Site Editor

Using blocks instead of widgets (classic theme users)

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

When you open the widgets area by going to Appearance > Widgets or using the WordPress Customizer, you’ll see the new interface powered by blocks. These editors work exactly like the block editor – the interface is just a little stripped-down.

Block widgets

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 official Classic Widgets plugin.

WordPress block editor template editing mode

Template editing mode, which was released with WordPress 5.8, was probably the biggest leap toward WordPress full-site editing.

With template editing mode, you can use the block editor to design the actual templates that your posts and pages use. For example, you could design a template where the content appears in a multi-column layout instead of the normal single-column layout. Whenever you assign that template to a regular post, that post would automatically use the template’s layout – there wouldn’t be a need to manually recreate it.

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

Template editing mode is a core feature as of WordPress 5.8. However, if you’re using a classic theme, then it will only be visible if your theme’s developer has specifically enabled it in the theme’s code. So if you don’t see the options in the screenshots below, it’s probably because your theme doesn’t support it yet.

If your theme supports template editing mode, you should see a new Template section in the Post/Page sidebar when you’re editing a post or page.

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

Template editing mode

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

WordPress theme blocks

Theme blocks also play a key role in full-site editing. Essentially, they let you insert dynamic content from your website, instead of static content.

For example, let’s say you want to display the publish date of a post at a certain spot in your content. Instead of manually typing in the date, you could just add the Post Date block and it would automatically insert the actual publish date of the post. If you update the post’s publish date, the Post Date block would automatically show that new date.

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

You’ll also be able to control the template for how your posts display, like changing the order of the post title and featured image.

WordPress query loop block in Gutenberg.

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

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

Theme blocks

WordPress Site Editor for full-site editing

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

It shares some similarities to 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 the ground up using blocks.

In order to see the Site Editor, you need to be using a block-enabled theme. You can find those by using the Full Site Editing feature filter at WordPress.org.

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

How to open site editor

At first, you’ll see the editor for your site’s homepage. But you can use the Templates and Template Parts links to access full-page designs (like single posts and archives) and partial site designs (like headers and footers).

Full site editing template list

Once you select a template, you’ll be able to customize that template using the block editor and the special theme blocks that we mentioned above.

Using the new WordPress Site Editor for FSE.

Depending on the specific template that you’re editing, you might use different blocks. For example, if you’re editing a header or footer, you can use the Navigation block, which replaces WordPress’ older menu system in block-enabled themes.

Global styles

Global styles are another new full-site editing feature that are available to block-enabled themes. With global styles, you can do two main things as of WordPress 6.0:

  1. Control your theme’s sitewide styles, such as colors and typography.
  2. Edit the default styles for individual blocks. For example, you could customize the default design of the Button block. You can always override these from inside the editor.

If you’re using a block-enabled theme, you can access these styles from the same Site Editor interface that you saw in the previous section. Just click the Styles icon in the top-right corner while editing any template in the Site Editor.

WordPress full site editing styles.

What’s next for the Gutenberg block editor?

While everything that we’ve detailed above shows a lot of growth since the initial release of the block editor, the WordPress team is far from finished with the Gutenberg project. Currently, the core team is continuing to work on improving and expanding full-site editing.

However, there are other projects (like the Navigation Editor and Widget Editor) that enable classic themes to adopt a more block-based framework. This is to act as a stepping stone to help more people get comfortable using the FSE.

More and more developers are also creating block-based themes, which let you harness the power of Gutenberg to build your entire site. Therefore, since the FSE shows no signs of slowing down, it will pay to start learning the block editor interface ASAP!

If you want to test block-based themes out for yourself, the plugin version of Gutenberg currently includes an array of full-site editing features that give you an idea of what the experience might be like. You can also find block-based themes at WordPress.org.

Overall, Gutenberg is definitely here to stay, so it’s worth it to put time into learning how to get the most from it.

For most casual users, it will, after some growing pains, bring a more flexible content creation experience.

Non-developers will be able to intuitively craft more complex layouts with extra elements like buttons, content embeds, and lots more. And that will, hopefully, help WordPress to continue to grow.

You may also be interested in:

Now, we’d love to hear from you. I’m sure many of you have strong thoughts on the WordPress Gutenberg block editor – so let us know about it in the comments!

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 

Layout, presentation, and editing by Karol K and Colin Newcomer.

Yay! 🎉 You made it to the end of the article!
Colin Newcomer

14 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
El Negro que te la mete
October 20, 2018 4:06 am

This isnt even alpha, i dont know who would use this when wp 5 comes out, maybe a grandma that can put together some content blocks and some images?
Lets be real, at my workplace we work with high end designs and custom functionality and custom wordpress dashboards making heavy use of ACF, custom theme/plugin development, that even visual composer wont help, and this gutenberg is not just there yet by a long shot, not even at 20% of visual composer or one of those advanced page builders for wordpress.
If i had to use gutenberg to do the work i do with wordpress i would be out of business. Maybe it will get better in 2030

Michał Kowalski
October 10, 2018 9:02 pm

Hey guys! Is it possible to add one product (namely a ticket for a concert), that can be bought online to my site with Gutenberg?

Chris Fitzgerald
October 12, 2018 3:39 pm

Hey Michal, it should be possible. Check out the Wootenberg block: https://wordpress.org/plugins/woo-gutenberg-products-block/

Nick Samoylov
October 1, 2018 11:09 pm

After converting to Gutenberg, I cannot figure how to add a comment to my post using the editor.

Bobbi
September 14, 2018 5:39 pm

I’m still on the fence, I can see the potential but have also had a few issues with it…probably things that will be worked out prior to the WP release.

Catesby
August 27, 2018 8:48 am

I tried the plugin for a few days. Even the simplest of tasks is difficult. For a drag and drop editor it is probably the most unintuitive one out there. I agree MCE needs an upgrade but this is not the way to go. There are a lot of visual composers that do the job far quicker and better than Gutenberg, and they are plugins so the users choose their preferred method. This is not a revolutionary editor at all, it is a poor imitation of many other of this style of editor for those webdevs that want or need it. The 2nd best solution for Gutenberg is for it to remain a plugin, forever. The best solution is to dump it and actually be innovative and build a better MCE rather than this disaster. WP forums are full of negatives about this but the devs do not seem to care what people think. It is so bad there is a building chorus for a fork of WP. If you get stuck with it at 5.0 release there is already a plugin ready to go called ‘disable Gutenberg’ to purge it from your system.

SunShine
October 30, 2018 4:29 am
Reply to  Catesby

I support a hard fork, so that we can all carry on without this oops-we-better-do-it-too ultimate emulation of Wix. I never realized the devs lacked so much imagination, innovation, creativity. Rather than lead the market, they decided to follow. And, you are right. I have yet to read anything that evidences the devs interest in or consideration of the impact on the workforce that has developed alongside and become woven into WordPress. One poster elsewhere said that VC money was likely the rocket booster behind this seismic shift in WP. I’ve always had my hands in custom coding of WP or Drupal sites. I’m increasing my Drupal work. This project is now aimed at enabling every single person on the planet to build a website for little jingle. Is that a good thing?

umberrella
August 18, 2018 5:06 pm

I managed to make a custom post type. But I d like to have a template attached to it. So that I always have the same standard blocks showing up when I add a new post. How do I do that?

Mo
March 14, 2018 3:42 pm

Interesting video …. I clearly didnt see it that way

Trixie
February 19, 2018 7:34 am

Hey Colin, I see you’ve written quite a number of articles related to Gutenberg. Great insights as always!
Well, in Gutenberg’s current state, you’re right, it’s incomparable to how page builders function and create complex pages. But, IF the core decides on making Gutenberg a part of WordPress (not an option), we can either choose to not upgrade to WP’s latest version or re-write/introduce codes that can support the blocks.
Maybe on your next article, you can write on how theme and plugin authors address the transition? Some already started contributing to making Gutenberg powerful and released addons in the WordPress repository. Ours is called Stackable: Ultimate Gutenberg Blocks

Sabina Ionescu
February 26, 2018 2:46 pm
Reply to  Trixie

Thanks for your suggestion Trixie, we’ll look into it.
Have you noticed other new interesting tools that address Gutenberg?

Денис Майнер
January 26, 2018 12:57 pm

Actually. Test the plugin. Increasingly disappointed in it. Is not convenient enough in a visual sense. And adds more complexity than for example to use a element or . If this goes on most likely will refuse to upgrade WordPress from Guttenberg

Francesco Micali
January 26, 2018 11:14 am

Thank you Colin, I think that you wrote a valuable article! Well written and full of example. I think that Gutenberg is really a revolution but there is a lot of work to do on UI and compatibility.
Thanks a lot! I’m going to share it.
Francesco

Денис Майнер
January 9, 2018 6:01 pm

Thanks for the post. Now test the plugin. Noticed a few awkward moments. The tab button does not allow to put a link opening in a new window. It is also difficult to place the colored phrase in the sentence. You need to use another editor. Classic. And so however you can get used

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

14
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...