Blocks Editor

Click the information icon

If there is an issue on mobile with the display.

Alternatively you can load desktop view

About

About

Gutenberg is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. The project is right now in the second phase of a four-phase process that will touch every piece of WordPress — Editing, Customization (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual — and is focused on a new editing experience, the block editor (which is the topic of the current documentation).

Quick view of the block editor

Legend :

  1. Block Inserter
  2. Block editor content area
  3. Settings Sidebar

Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created in the unit of blocks instead of freeform text with inserted media, embeds and Shortcodes (there’s a Shortcode block though).

Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes. The new editor is designed with progressive enhancement, meaning that it is back-compatible with all legacy content, and it also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls.

The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins.

Learn to use the block editor to create media-rich posts and pages.

Create a Block Tutorial #Create a Block Tutorial

Learn how to create your first block for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all what you need to know to get started with the block editor.

Top ↑

Develop for the block editor #Develop for the block editor

Whether you want to extend the functionality of the block editor, or create a plugin based on it, see the developer documentation to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.

Top ↑

Contribute to the block editor #Contribute to the block editor

Everything you need to know to start contributing to the block editor . Whether you are interested in the design, code, triage, documentation, support or internationalization of the block editor, you will find here guides to help you.

How to use

Do you want to learn how to use the WordPress block editor (Gutenberg)?

When WordPress 5.0 was released in 2019, it replaced the old classic editor with a brand new block editor nicknamed “Gutenberg”. The block editor introduced a different way of creating content in WordPress.

In this tutorial, we’ll show you how to use the WordPress block editor and master it to create visually stunning blog posts and pages.

Using the WordPress block editor

What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?

Before we dive into the block editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Older Classic Editor.

Here is what the classic editor in WordPress looked like:

Old WordPress editor

And this is how the modern WordPress block editor looks like:

Default WordPress block editor

As you can see, they are two completely different editors for creating content in WordPress.

The old classic editor was a text editor with formatting buttons very similar to Microsoft Word.

The new editor uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor).

Blocks are content elements that you add to the edit screen to create content layouts. Each item you add to your post or page is a block.

You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements, and more can be added by WordPress plugins.

How is the WordPress block editor better than the classic editor?

The WordPress block editor offers a simple way to add different types of content to your posts and pages.

For example, previously if you wanted to add a table in your content, then you needed a separate table plugin.

With the block editor, you can simply add a table block, select your columns and rows, and start adding content.

Table block in WordPress editor

You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.

Most importantly, the WordPress block editor is easy to use and learn.

This gives an immense advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.

That being said, let’s take a look at how to use the WordPress block editor like a pro to create great content.

Here is what we will cover in this Gutenberg tutorial:

  1. Using Gutenberg – The WordPress block editor
  2. Creating a new blog post or page
  3. How to add a block in Gutenberg
  4. Working with blocks in the new editor
  5. Saving and reusing blocks in Gutenberg
  6. Publishing and post settings in Gutenberg
  7. Plugin settings in new editor
  8. Adding some common blocks in Gutenberg
  9. Exploring some new content blocks in Gutenberg
  10. Bonus tips on using Gutenberg like a pro
  11. Adding more blocks to Gutenberg Block Editor
  12. FAQs about Gutenberg

Ready? Let’s dive in.

Video Tutorial

https://www.youtube.com/embed/JjfrzGeB5_g?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparentSubscribe to WPBeginnerhttps://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

If you’d prefer written instructions, then just keep reading.

Using Gutenberg – The WordPress Block Editor

The block editor is designed to be intuitive and flexible. While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.

Let’s start with covering the basic things that you did in the classic editor, and how they are done in the block editor.

Creating a New Blog Post or Page Using The Block Editor

You will start creating a new blog post or page like you normally would. Simply click on the Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.

Adding a new post

This will launch the block editor.

How to Add a Block in Gutenberg

The first block of every post or page is the title.

You can use the mouse to move below the title or press the tab key on your keyboard to move the cursor down and start writing.

Adding a post title in WordPress block editor

By default, the next block is a paragraph block. This allows users to start writing right away.

However, if you want to add something different, then you can click on the add new block button (+) on the top left corner of the editor, below an existing block, or on the right side of a block.

Addding a new block button in WordPress

Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.

You can click on tabs to browse block categories or type in a keyword to quickly search for a block.

Finding and adding blocks in WordPress

If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.

Select and add a block while writing

Working with Blocks in The New Editor

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.

For example, in this screenshot, we are working in a paragraph block that shows basic formatting buttons like text alignment, bold, italic, insert link, and more.

Each block comes with its own toolbar

Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.

Block settings

You can move blocks up and down by simply dragging them or by clicking the up and down buttons next to each block.

Moving a block up and down

Organizing Blocks in Groups and Columns

The block editor comes with handy tools to manage and organize your content layouts.

You can select multiple blocks by clicking on them while pressing the SHIFT key on your keyboard.

Organize blocks with groups and columns

After that, click on the block type button in the toolbar to transform the selected blocks into Groups or Columns.

Group block settings

You can then apply styles to the entire group block such as changing their alignment or spacing.

The block editor also allows you to add an empty Group or Columns block. After that, you can fill them with other blocks.

Add columns

You can then fill in each column with any type of block to create beautiful layouts.

Columns block example

Saving and Reusing Blocks in Gutenberg

One of the best things about blocks is that they can be saved and reused. This is particularly helpful for website owners and bloggers who frequently need to add specific content snippets to their articles or pages.

Simply click on the menu button located at the right corner of each block’s toolbar. From the menu, select the ‘Add to reusable blocks’ option.

Add reusable block

You’ll need to provide a name for your reusable block so that you can identify and reuse it later.

Name reusable block

The block editor will now save the block as a reusable block.

Now that you have saved a block, let’s see how to add the reusable block into other WordPress posts and pages on your site.

Simply edit the post or page where you want to add the reusable block. From the post edit screen, click on the add block button.

You will find your saved block under the ‘Reusable’ tab. You can also find it by typing its name in the search bar.

Add reusable block

You can take your mouse over it to see a quick preview of the block. Simply click on the block to insert it into your post or page.

All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link.

This will bring you to the block manager page. From here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress website.

Manage reusable blocks

Note: You can use entire groups and columns as reusable blocks too. This allows you to save entire sections and use them whenever needed.

Publishing and Managing Options in Gutenberg Block Editor

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tagsfeatured images, and more.

All these options are neatly placed in the right column on the editor screen.

Document settings in the editor

Plugin Options in Gutenberg

WordPress plugins are able to take advantage of the block editor’s API to integrate their own settings within the edit screen.

Some popular plugins come with their own blocks. For example, WPForms, the best WordPress form builder plugin allows you to add forms into your content using a block.

WPForms block in WordPress editor

Here is how All in One SEO for WordPress allows you to edit your SEO settings in the block editor:

All in One SEO settings in block editor

WooCommerce also comes with blocks that you can easily add to any of your WordPress posts and pages.

WooCommerce blocks in block editor

Adding Some Common Blocks in New Editor

Basically, the block editor can do everything the classic editor did. However, you will be doing things more quickly and elegantly than before.

1. Adding an image in the WordPress block editor

There is a ready-to-use image block in the WordPress block editor. Simply add the block and then upload an image file or select from the media library.

Adding an image block in WordPress

You can also drag and drop images from your computer, and the editor will automatically create an image block for it.

Once you have added an image, you will be able to see the block settings where you can add metadata for the image like alt text, size, and add a link to the image.

Image block settings

2. Adding a link in the block editor

The block editor comes with several blocks where you can add text. The most commonly used one is the paragraph block which comes with an insert link button in the toolbar.

All other commonly used text blocks also include a link button in the toolbar.

Adding links in the list block

You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

3. Adding an image gallery in Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Adding image gallery block

4. Adding shortcodes in WordPress posts using Gutenberg

All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.

Shortcode block

Exploring Some New Content Blocks in Gutenberg

The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.

Following are some of the favorites that we believe users will find immensely helpful.

1. Adding an image next to some text in WordPress

Using the old editor, many of our users were unable to place an image next to the text. You can do this now with the Media & Text block.

Media and text block

This simple block comes with two blocks placed side-by-side allowing you to easily add an image with some text next to it.

2. Adding a button in WordPress posts and pages

Adding a button to your blog posts or pages was another annoyance in the old editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.

Gutenberg comes with a button block that allows you to quickly add a button to any post or page.

Adding buttons block

You can add a link for your button, change colors, and more. For details, see our article on how to easily add buttons in WordPress.

3. Adding beautiful cover images in blog posts and landing pages

Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images or color background cover to your posts and pages.

A cover image is a wider image often used as a cover for a new section in a page or the beginning of a story. They look beautiful and allow you to create engaging content layouts.

Simply add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create parallax effect when users scroll down the page.

Cover block

For more details, see our article on the difference between cover images and features image in WordPress.

4. Creating tables inside articles

The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.

The Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.

Table block in WordPress editor

You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.

5. Creating multi-column content

Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add a Columns block, which basically adds two columns of paragraph blocks.

Multi column content

This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.

Bonus Tips to Use Gutenberg like a Pro

Looking at the block editor, you may be wondering whether you will be spending more time adding and adjusting blocks than creating actual content?

Well, the block editor is incredibly fast and even very basic usage for a few minutes will allow you to instantly add blocks without even thinking.

Pretty soon you will realize how much faster your workflow will become with this approach.

For power users, here are some bonus tips to help you work even faster with the WordPress block editor.

1. Move the block toolbar to the top.

You may have noticed in the screenshots above that there is a toolbar that appears on top of every block. You can move this toolbar to the top of the editor.

Simply click on the three-dot button at the top right corner of the screen and then select the Top Toolbar option.

top toolbar in block editor

2. Use keyboard shortcuts

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.

Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.

For more shortcuts, click on the three-dot menu on the top-right corner of your screen and then select ‘Keyboard Shortcuts’.

Launch keyboard shortcuts menu

This will bring up a popup with the list of all the keyboard shortcuts that you can use. The list will have different shortcuts for Windows and Mac users.

3. Drag and drop media to automatically create media blocks

Gutenberg allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you.

You can drop a single image or video file, and it will create the block for you. You can also drop multiple image files to create a gallery block.

Drag and drop media

4. Adding YouTube, Twitter, Vimeo, and other embeds

The block editor makes it easier to embed third-party content into your WordPress content. There are blocks for all popular third-party services.

Embed blocks
However, you can just copy and paste the embed URL at any point, and it will automatically create a block for you.

For example, if you added a YouTube video URL, then it will automatically create a YouTube embed block and display the video.

YouTube embed

For Facebook and Instagram embeds, see our article on how to embed Facebook and Instagram posts in WordPress.

Adding More Blocks to Gutenberg Block Editor in WordPress

The block editor in WordPress allows developers to create their own blocks. There are some awesome WordPress plugins offering block bundles for the new editor.

Here are a few of them:

1. Ultimate Addons for Gutenberg

Ultimate addons for Gutenberg

Ultimate Addons for Gutenberg is a block library that comes with many advanced blocks that help you add more design elements to your content.

Created by the folks behind the popular Astra WordPress theme, Ultimate Addons help you create beautiful designs without writing any code.

2. PublishPress Blocks

PublishPress blocks

PublishPress Blocks is another powerful block library that comes with additional blocks to extend Gutenberg block editor.

It includes beautiful layout options, sliders, buttons, icons, image galleries, maps, tabs, testimonials, accordions, and more.

3. Stackable – Gutenberg Blocks

Stackable - Gutenberg Blocks

Stackable – Gutenberg Blocks is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.

FAQs about Gutenberg – The Block Editor in WordPress

Since Gutenberg became the default WordPress editor, we have been getting a lot of questions. Here are the answers to some of the most frequently asked questions about Gutenberg.

1. What happens to my older posts and pages? Can I still edit them?

Your old posts and pages are completely safe and unaffected by the block editor. You can still edit them, and the editor will automatically open them in a block containing the classic editor.

Convert to blocks

You can edit them inside the old editor, or you can convert older articles into blocks and use the block editor.

2. Can I still keep using the old editor?

Yes, you can still keep using the old editor. Simply install and activate the Classic Editor plugin.

Upon activation, it will disable the block editor, and you will be able to continue using the classic editor.

Please note that the Classic Editor will be supported until 2022. It would be better to start using the block editor so that you get familiar with it.

3. What to do if the block editor doesn’t work with a plugin or theme I am using?

Project Gutenberg was under development for a long time. This gave plugin and theme authors plenty of time to test their code for compatibility.

However, there is still a chance that some plugins and themes may not work well with the block editor. In that case, you can install the classic editor plugin, request the developer to add Gutenberg support, or simply find an alternative plugin or theme.

4. How to learn more Gutenberg tips and tricks?

WPBeginner is the best place to learn about the block editor in WordPress. We are the largest WordPress resource site on the internet.

We will be publishing new articles and updating our old resources to help you master the block editor.

Meanwhile, if you have any questions, then feel free to reach out to us by leaving a comment or by using the contact form on our website.

We hope this Gutenberg tutorial helped you learn how to use the WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed, or check out our comparison of the best email marketing services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Diving deep

When the WordPress block editor, or Gutenberg, launched in December 2018, we didn’t know what to expect. Sure, we’d had plenty of time to play around with its beta version, but we couldn’t predict how smoothly the actual launch would go or how eager users and developers would embrace the new editor.Try a free demo

We’ve seen the Gutenberg editor undergo tremendous growth in the two-plus years since we first published this post. It’s moved from a minimum viable product (MVP) launch to a more mature project that’s getting closer to the goal of creating a unified Full Site Editing experience for WordPress.

To account for these changes, we’ve revisited the Gutenberg editor to take you through its new face, including where it will be going next soon.

Table of Contents

  1. What Is the Gutenberg Block Editor?
  2. Pros and Cons of Gutenberg vs Popular Alternatives
  3. How to Use the Gutenberg WordPress Block Editor
  4. 10 Useful Gutenberg Tips to Work More Productively
  5. Digging Into More Advanced Block Editor Concepts
  6. Extending the Block Editor With Plugins
  7. Gutenberg WordPress Editor and Full Site Editing

What Is the Gutenberg Block Editor?

Gutenberg, alternatively known as the “WordPress block editor” or just the “WordPress editor,” is the WordPress content editor introduced in WordPress 5.0, released on December 6, 2018.

If you haven’t heard that term, it’s the default editor that all WordPress sites use unless you’ve specifically disabled it. It looks something like this:

A screenshot of the Gutenberg WordPress editor.
The Gutenberg WordPress editor.

The big difference between the Gutenberg WordPress editor and the previous WordPress editor (now called the “classic editor” or “TinyMCE editor”) is a new block-based approach to creating content.

With Gutenberg, every element in your content is a block, which allows for easy manipulation of content. Each paragraph is a block, each image is a block, each button is a block — you get it!

Third-party developers can also create custom blocks, which is helping end WordPress’s affair with shortcodes. Let’s say you want to embed a contact form. Instead of needing to add a shortcode (e.g. `[your-form-shortcode]`) as you did in the past, you can now just drop in your form plugin’s block.

Beyond that, you can also use blocks to create more complex layouts, like setting up a multi-column design or grouping blocks to create a cohesive section.

As we dig more into showing you how to use the block editor, you’ll get a better idea of how you can use blocks to improve how you create content.

Gutenberg launched in December 2018, and a lot has changed since then! 🚀 Check out this updated guide to learn more ⬇️CLICK TO TWEET

Gutenberg Isn’t Just a Content Editor

One important thing to understand is that the Gutenberg project aims to be more than just a content editor.

In July 2021, Gutenberg is still just a content editor (for the most part). But the long-term goal for Gutenberg is to move it towards something called Full Site Editing.

The idea with Full Site Editing is that you’ll be able to design 100% of your website using the Gutenberg editor. For example, instead of being limited to the header options that come with your WordPress theme, you’ll be able to use Gutenberg to design custom headers using the block editor.

This type of functionality is not available yet, but it’s on the way, and we do have some “proof of concept” projects that we’ll give you a look at near the end of this post.

Now that we’ve been able to use the WordPress block editor for over two years, we have a good idea of some of the pros and cons of Gutenberg vs other solutions.

There are two main alternatives you have for creating content on WordPress:

In general, the classic TinyMCE editor offers a more stripped-down Word Processor-like experience, while page builders provide a much more flexible visual, drag-and-drop design experience.

If we were ordering all three editors based on their design flexibility, it would go something like this:

Classic TinyMCE editor (least flexible) < Gutenberg < Page builders (most flexible)

Now, let’s talk about some of the pros and cons of the Gutenberg block editor vs alternatives.

Gutenberg vs Classic Editor: Pros and Cons

Let’s first compare Gutenberg vs the classic TinyMCE editor.

Pros:

  • Gutenberg offers a more visual design background
  • You don’t need to use shortcodes to embed content — you get a unified block system

Cons:

  • Some people find writing in Gutenberg to be a bit unwieldy because each paragraph is a separate block. For long posts, it can be tough to manipulate text. You might prefer writing in another editor and pasting the text into Gutenberg when you’re finished.
  • While Gutenberg’s performance has improved significantly, it can still lag on massive posts, which is less likely to happen with the classic editor.

If you think the classic TinyMCE editor fits your needs better, you can disable the Gutenberg editor altogether.

Gutenberg vs Page Builders: Pros and Cons

Now, let’s take a look at how Gutenberg stacks up against third-party page builder plugins.

Pros:

  • Gutenberg is a core feature, which means you don’t have to worry about compatibility issues.
  • Because it’s a core feature, all developers can build Gutenberg support into their plugins, improving compatibility.
  • Gutenberg outputs cleaner, more lightweight code. All things equal, a design built with Gutenberg will usually load faster than the same design made with a page builder.

Cons:

  • Gutenberg doesn’t offer proper visual editing like a page builder. It’s more accessible than the classic editor, but still not 100% seamless like a page builder.
  • Page builders still give you more flexible design and layout options.
  • Most page builders offer much more fluid and flexible drag-and-drop movement.

Thoughts on the Comparison

For the majority of users, Gutenberg hits the sweet spot in terms of flexibility.

Most people don’t need the flexibility of a page builder for their content, especially for blog posts. But at the same time, it’s nice to quickly set up a multi-column design or insert a button, which the classic editor doesn’t make easy.

So with that in mind, let’s get into how you can start using Gutenberg.

How to Use the Gutenberg WordPress Block Editor

Now that you know a bit about the Gutenberg block editor, let’s dig into how you can use it to start creating content.

We’ll start with an introductory look at the interface and gradually develop more advanced ways to use the editor and improve your workflows.

The Gutenberg Block Editor Interface

When you open the editor, it will hide the WordPress dashboard sidebar and give you a full-screen experience:

The Gutenberg WordPress block editor interface
The Gutenberg WordPress block editor interface.

There are three main parts to the editor:

  • Content: Your content takes up most of the screen. You’ll see a visual preview of what it will look like on the front end of your site. It’s not 100% accurate, but you should have a pretty good idea of the final design.
  • Top toolbar: The toolbar at the top helps you insert new blocks, undo/redo, and access other vital settings
  • Sidebar: The sidebar contains two tabs. The Post tab lets you configure post-level settings like its categories, tags, featured image, etc. The Block tab shows the settings for the block that you’ve selected — more on this later.

To create a more immersive writing experience, you can hide the sidebar by clicking the “gear” icon in the top-right corner. To bring back the sidebar, all you need to do is click the “gear” icon again:

Clicking the "gear" icon will show/hide the sidebar
Clicking the “gear” icon will show/hide the sidebar.

Info

Your editor might look slightly different because theme developers have the option of adding their styles to the editor to create a more visual experience. Depending on your theme, you might see different fonts or colors.

For example, here’s what the editor interface looks like if you’re using the new Twenty Twenty-One default theme:

An example of the Twenty Twenty-One theme applying its own styles to the block editor
An example of the Twenty Twenty-One theme applying its styles to the block editor.

Adding Blocks

To add regular paragraph text to your post, you can just click and type. Every time you hit enter, the editor will automatically create a new paragraph block.

For other types of content, you’ll need to insert a new block. You’ll use blocks for images, buttons, video embeds, etc.

To add a new block, you can click one of the “plus” icons in the interface. It’s the main block inserter icon in the top-left corner, but you’ll also see other icons inside the interface that opens a smaller block inserter interface:

The "plus" icons let you insert a new block
The “plus” icons let you insert a new block.

To begin, position your mouse cursor where you want to insert the new block. For example, to add a new block underneath the button, you could click below the button and then click the + icon.

You should see a side panel that shows all the available blocks, divided into different categories. You can either search for a specific block or just choose an option from the list. When you hover over a block, you’ll see a description of what it does and a preview.

To insert the block, you just need to click on it. For example, to insert a regular image, you would just click the image block:

Click on the WordPress Gutenberg editor block type that you want to insert
Click on the block type that you want to insert.

You can then follow the prompts to upload or choose an existing image from your Media Library.

Essential Formatting Options

To make basic formatting choices for your blocks, you’ll get a floating toolbar that appears when you click on any block.

If you’re formatting regular text, this is where you can:

  • Add bold or italics
  • Insert links
  • Change alignments
  • Add formatting, like inline code, strikethrough, and subscription
The floating toolbar lets you make basic formatting choices
The floating toolbar lets you make basic formatting choices.

For instance, let’s say you want to insert a link into your content. You would first select the specific text you want to link — in our example, that’s “For other types of content.” Then, you can click the link icon on the toolbar to open the link insertion options:

How to insert a link in the Gutenberg WordPress block editor.
Inserting a link in the Gutenberg WordPress block editor.

Configuring Advanced Block Settings

All the blocks that you insert come with additional settings in the sidebar. Some blocks might give you a few settings, while others give you several options to control the design, layout, functionality, etc.

To open a block’s settings, click on the block in the editor to select it. Then, go to the Block tab in the sidebar to see its settings.

Below, you can see the settings for the button block, which is one of the more flexible blocks. You could change the color, make it wider, and lots more.

As you make changes to a block’s settings, you’ll instantly see those changes reflected in the editor.

You can access a block's settings in the sidebar
You can access a block’s settings in the sidebar.

Again, each block will have settings that are unique to that block. For example, if you open the settings for regular paragraph text, you just get some basic typography and color options. Below, you can see that we were able to apply a color background to highlight some text:

The block settings for regular paragraph text
The block settings for a regular paragraph text.

Rearranging Blocks

In addition to just using copy and paste (which you can do for text just like any other editor), Gutenberg gives you two main ways to rearrange blocks.

First, if you want to move a block up or down a few positions, you can use the up or down arrows on the floating toolbar.

For extensive moves, you can use drag-and-drop. To drag and drop a block, you need to click on the “six dots” icon to the arrows’ left.

Once you click and hold your mouse on that icon, you can drag the block anywhere on the page:

You can rearrange blocks using the arrows or drag-and-drop
You can rearrange blocks using the arrows or drag-and-drop.

Important

Copy and paste can be tricky for non-text content. A little later in this post, we’ll show you how you can copy and paste entire blocks while preserving their styles.

Embedding Content from Other Sources

Gutenberg comes with dedicated blocks to embed content from third-party sources such as YouTube, Vimeo, Soundcloud, etc. You can find all of these options in the Embeds section of the block inserter.

For example, to embed a YouTube video, all you need to do is:

  1. Add the dedicated YouTube block.
  2. Paste in the direct URL to the video.
  3. Click Embed.
How to embed a YouTube video in Gutenberg using a dedicated block
Embedding a YouTube video in Gutenberg.

You should then see a preview of the embedded video in the editor.

Creating Multi-Column or Grouped Layouts

As we mentioned earlier, one of the significant advantages of the block editor over the older TinyMCE editor is that you can create more complex layouts without needing to rely on custom code or shortcodes.

The block editor comes with two default blocks to help you do this:

  • Columns: Create a multi-column layout.
  • Groups: Group multiple blocks. For example, you could use this to set a background color for an entire section that displays behind numerous blocks.

Both of these blocks work on the principle of “nesting” blocks, which means that you’ll put one or more blocks inside of another block.

We’ll show you an example using the columns block, but the same basic principle applies to the group block.

Let’s say you want to create a two-column layout where the column on the left has some regular paragraph text, and the column on the right has a button.

To get started, you would use the block inserter to add the columns block. That will show a prompt where you can choose your preferred layout:

Choose the column structure and ratio in the Gutenberg WordPress editor
Choose the column structure and ratio.

We’ll choose a two-column 50/50 layout for this example. With that, you’ll see two equal-sized boxes with + icons inside. To insert content, you can click that + icon to open the block inserter interface:

How to add content to the columns
How to add content to the columns.

Once you’ve added the first block to a column, you can hit the + icon to insert additional blocks. Or, you can drag and drop a block from outside the column structure into the column.

10 Useful Gutenberg Tips to Work More Productively

Now that you have a basic understanding of how Gutenberg works, let’s go over some valuable tips and tricks that will help you use the block editor more effectively.

1. Use / (Forward Slash) to Quick Insert Blocks

If you need to insert many blocks, manually opening the block inserter can get a little tedious. Thankfully, once you start learning the names of the common blocks that you need to use, there’s a much quicker way to insert blocks using only your keyboard — / (forward slash).

If you hit “Enter” to start a new paragraph block, you can quick-insert a block by typing a forward slash, followed by the name of the block that you want to insert.

As you start typing, you’ll see a list of all the blocks that match your query. You can then use your keyboard arrows to navigate the blocks and hit “Enter” to select the block you want to insert.

Here’s an example of using quick-insert to add an image block:

How to use forward slash to quick-insert blocks
How to use the forward slash to quick-insert blocks.

2. Insert Images by Dragging Them From Your Desktop

If you’re inserting many images, the block editor includes another time-saving feature that lets you eliminate the need to add an image block before uploading an image.

Instead, you can just drag the image file directly from your desktop to the location where you want to add it to your post. When you drag the image file over your site’s content, you’ll see a blue line marking where the image shows up.

Once you release the file, WordPress will automatically upload it and insert an image block at the proper location:

You can insert images by dragging the file from your desktop
You can insert images by dragging the file from your desktop.

3. Use Some Markdown Formatting

If you’re a fan of the Markdown syntax for creating content, you’ll be happy to know that the block editor does support some limited use of markdown — mainly to do with headings.

For example, if you want to insert a heading block with an H3 tag, you can type three hashtags (`###`) followed by hitting the spacebar. The editor will automatically convert that to an H3, and then you can continue typing the heading:

Want to know how we increased our traffic over 1000%?

Join 20,000+ others who get our weekly newsletter with insider WordPress tips!Subscribe Now

The block editor supports basic Markdown syntax for headings
The block editor supports basic Markdown syntax for headings.

Suppose you want even more advanced Markdown support. In that case, you can install a free plugin like EditorsKit, which also lets you use Markdown for bold, italics, and strikethrough — we’ll talk more about Gutenberg plugins a little later in this post.

4. Pin the Formatting Toolbar to the Top of the Editor

If you don’t like how the formatting tool “floats” above a block, the block editor includes a feature that lets you pin it below the top toolbar:

You can pin the formatting toolbar to the top
You can pin the formatting toolbar to the top.

5. Copy a Block and All Its Settings

The block editor lets you copy and paste text just like you would in any editor — “Ctrl + C” or right-clicking and choosing Copy.

However, you can’t use this method to copy and paste an entire block while preserving its settings. Instead, you’ll need to:

  1. Select the block.
  2. Click the three dots icon on the block’s toolbar.
  3. Select Copy.
How to copy a block with all of its settings in the Gutenberg WordPress editor
How to copy a block with all of its settings.

Once you’ve copied the block in this way, you can paste it like you usually would — i.e. “Ctrl + V” or right-clicking and choosing to Paste.

6. Quickly Select the Right Block Using Block List View

For most blocks, you can just click on the editor to select the block. However, this can get tricky if you start using “nested” blocks, like inserting blocks inside the columns or group blocks.

The editor includes a List View option, which you can open from the top toolbar to account for this. The list view will show you every block, including indented nested blocks.

You can select a block by clicking on it in the list, and the editor will also highlight the block when you hover over it in the list.

In the example below, you can see:

  • The primary parent columns block
  • Nested blocks for each column
  • A nested group block inside one column
  • A nested heading block inside the Group block

To select the main parent block, you can just open up list view and select it from the list:

Opening List View helps you navigate nested blocks
Opening List View helps you navigate nested blocks.

7. Open the Code Editor (for Individual Blocks or Complete Posts)

One of the advantages of the Gutenberg block editor is that it lets you configure many styles and layout options without resorting to code. However, you still might have some situations where you want to access the code directly for more advanced users.

To help you do that, the Gutenberg editor comes with a few different options.

First, you can edit the code of just an individual block, useful for minor tweaks like inserting a CSS class. To do this, open the dropdown menu from the block’s toolbar and select Edit as HTML:

How to edit a single block as HTML in the Gutenberg WordPress editor
How to edit a single block as HTML.

Selecting this option will turn the visual preview into a code editor for just that block, without affecting the visual previews of other blocks:

The HTML editor for a single block
The HTML editor for a single block.

Second, the editor includes a custom HTML block that you can use to embed full HTML snippets. All you do is add the block and paste in your code.

Finally, you can also open the full code editor for the entire document by using the dropdown in the top-right corner or a keyboard shortcut: Ctrl Shift Alt M.

Keep in mind that, when you open the full code editor, you’ll also see the block formatting markup from Gutenberg, so it can be a little tricky to navigate:

The full code editor, which includes the block markup
The full code editor, which includes the block markup.

8. Learn the Keyboard Shortcuts

The block editor includes a lot of keyboard shortcuts that let you perform common actions. It’s worth taking the time to learn them because they’ll make you more productive and save you from a lot of repetitive mouse clicks.

Here are some of the most common shortcuts — if you’re on a Mac, you’ll want to switch “Ctrl” with “Command (⌘)”:

  • Open the block List View — Shift Alt O
  • Save your changes — Ctrl S
  • Undo your last change(s) — Ctrl Z
  • Redo your last undo — Ctrl Shift Z
  • Duplicate the selected block(s) — Ctrl Shift D
  • Delete the selected block(s) — Shift + Alt + Z
  • Insert a new block before the selected block(s) — Ctrl Alt + T
  • Insert a new block after the selected block(s) — Ctrl Alt + Y

You can also open a full cheat sheet of all the keyboard shortcuts when you’re in the editor. To do this, you can either use a keyboard shortcut — Shift + Alt + H — or click the “three vertical dots” menu icon () in the top-right corner of the editor and choose Keyboard shortcuts from the dropdown.

9. Clean Up Your Interface by Hiding Blocks

The block editor adds many blocks by default, but you probably won’t use all of them. To help you clean up the interface, the editor includes a feature called Block Manager that lets you disable and hide blocks that you aren’t using:

In the block manager, You can uncheck blocks to hide them from the block inserter
You can uncheck blocks to hide them from the block inserter.

Finally, our last helpful tip is the block editor’s dedicated HTML anchor link feature, which lets you create jump links to specific sections of your content (e.g. for a table of contents).

In the classic editor, you had to add HTML anchors using code manually. But with Gutenberg, you can just enter the text for your jump link in the HTML anchor field in the Advanced area of any block’s settings:

Need a hosting solution that gives you a competitive edge? Kinsta’s got you covered with incredible speed, state-of-the-art security, and auto-scaling. Check out our plans

How to set a custom anchor text in the Gutenberg WordPress editor
How to set a custom anchor text.

Digging Into More Advanced Block Editor Concepts

At this point, we’ve covered quite a bit about how the editor works and some tips to work more efficiently. Now that you have that baseline knowledge, let’s go over two slightly more advanced tactics:

  • Block patterns
  • Reusable blocks

Block Patterns

block pattern is essentially a template. It’s a collection of blocks arranged into a layout. It could be something minor, like an arrangement of buttons. It could even be a template for an entire section, or even a whole page.

WordPress comes with its own built-in block patterns, and third-party plugin developers also can add their own.

You can insert new patterns from the Patterns tab of the main block inserter:

How to insert a block pattern
How to insert a block pattern.

Once you insert the block pattern, you can fully edit all of the blocks that make up that pattern, just as if you’d manually added the blocks.

Currently, the core Gutenberg editor does not let you create your block patterns (unless you know how to code). However, you can fix this with Justin Tadlock’s free Block Pattern Builder plugin. With the plugin activated, you can create your designs using Gutenberg and then save that design as a pattern.

To begin, go to Block Patterns > Add New to create a new pattern using the editor. Make sure to publish it when you’re finished:

Creating your own custom block pattern
Creating your custom block pattern.

Once you’ve done that, you’ll be able to insert your block pattern just like any other one — look for it in the Uncategorized section:

Inserting the custom block pattern that you created
Inserting the custom block pattern that you created.

The WordPress core team also launched an official block pattern library at WordPress.org. You can insert them into the editor using copy and paste. Just click the Copy button on the block pattern library website and then paste it into the editor.

Reusable Blocks

Reusable blocks are a collection of one or more blocks that you can insert as a group. They’re similar to block patterns, but with one key difference:

Whereas a block pattern is a starting template that you’ll edit in each instance, a reusable block will be the same in every instance where you include it.

If you update the reusable block, those changes will automatically apply to all the existing instances.

For example, you could use a reusable block to create a call to action (CTA) that you want to be the same in all your content. Then, if you ever want to update the CTA, you just need to update the reusable block once to change it across the site.

To create a reusable block in the Gutenberg WordPress editor, click and drag to select one or more blocks. Then, click the Add to Reusable blocks option. (The plugin we mentioned above also lets you create a block pattern this way.)

How to create your own reusable block
How to create a reusable block.

Your blocks will then be grouped — you can give your reusable block a name in the reusable block’s settings in the sidebar.

Now, you’ll be able to insert that reusable block by searching for its name. You can use `/` to quick-insert the block:

How to insert a reusable block
How to insert a reusable block.

If you change the reusable block, you’ll get an option to publish those changes when you update the post. And if you decide to publish the reusable block changes, those changes will automatically apply to every instance of the reusable block:

How to update a reusable block in the Gutenberg WordPress block editor
How to update a reusable block.

Extending the Block Editor With Plugins

Up until now, we’ve focused on the core block editor features, with a few exceptions.

One of the great things about the block editor, though, is that you can use plugins to extend it, just like you can with the rest of your WordPress site.

You can use plugins for a few different things:

  • Add new content blocks: Plugins can add new blocks that you can use in your designs. It’s the most common use case for Gutenberg plugins at the moment.
  • Add new templates/block patterns: Some plugins use the core block patterns system, while others have created their own template systems.
  • Change the editor interface/features: You can use plugins to modify the editor itself. For example, you can add better Markdown support.

Beyond plugins specifically built for Gutenberg, many other WordPress plugins can also use the block editor.

For example, if you’re using a contact form plugin, the plugin might give you a dedicated block that you can use to embed your forms. The same holds for many other types of plugins.

Once you master the basics of the editor, it’s worth exploring these plugins to see if you find any that can improve your experience.

Here are some of the most popular options at the time that we’re writing this post:

You can see more in the WordPress.org block-enabled plugins section.

Gutenberg WordPress Editor and Full Site Editing

As we mentioned at the beginning of this post, the Gutenberg project aims to be a lot more than just a content editor.

The long-term plan is to have WordPress move into Full Site Editing. It means exactly what it says — the goal is that you’ll eventually be able to edit all parts of your site using the Gutenberg editor. And that includes your site’s header, footer, sidebars, etc.

Unlike the launch of the block editor in WordPress 5.0, Full Site Editing takes an iterative approach. It will be a gradual addition of features, where each new release builds on the previous ones.

For example, starting in WordPress 5.8, you’ll now use the block editor to manage your site’s widgets. You’ll also get access to some new theme-focused blocks such as Site Logo, Navigation, Query Loop (lets you create templates for list posts), and more.

But while official Full Site Editing is still a work in progress, some intrepid theme developers have already started releasing block-based themes, which give us some pretty good examples of how Full Site Editing might work.

Additionally, you can access some of the experimental Full Site Editing features in the plugin version of Gutenberg.

So, let’s look at two things:

  1. The existing core Full Site Editing features that we have now as of WordPress 5.8
  2. How “full” Full Site Editing might work based on experimental features

Important

All of this might change in small or large ways by the time Full Site Editing goes mainstream. It’s just to give you an idea of what it might be.

Using Blocks Instead of Widgets

As of WordPress 5.8, you’ll now use blocks to control your sidebars and footers instead of widgets (by default — you can disable this if you want to).

When you go to Appearance > Widgets, you’ll be able to manage the content of each widget area using the block editor.

You can see that each widget area gets a separate editor, which you can open by clicking the accordion toggles. You can also move blocks between different widget areas by clicking the hooked arrow icons near the top:

Using blocks to edit widget areas
Using blocks to edit widget areas.

Using New Theme Blocks

WordPress 5.8 also adds new dedicated theme blocks that let you insert dynamic content in your site. These blocks will also play a pivotal role when you’re designing templates for your theme in future releases.

For example, let’s say you want to embed a list of your most recent content on a page. Now, you can just add the Query Loop block, and you’ll be able to dynamically insert content from a particular post type (e.g. blog posts), including filtering by categories, authors, keywords, and more:

Using the Query Loop block to display dynamic content
Using the Query Loop block to display dynamic content.

Inside the Query Loop block, you can nest the other theme blocks to control the template for the content displayed there. For example, you can display each post’s date by adding the Post Date block to your template.

With the Query Loop block in WordPress 5.8, you can essentially design your own custom blog listing page. Proper Full Site Editing will expand that to your entire theme — so let’s look at that next.

Designing Content Templates

Template editing mode is another new feature in WordPress 5.8. It lets you use Gutenberg to design the templates for your posts and pages using blocks.

Currently, this feature is only available if your theme developer has specifically enabled it, so you might not see it if your theme’s developer hasn’t done that yet.

If you are using a theme that supports the template editing mode in WordPress 5.8, you’ll see a new Template section in the Post/Page tab of the sidebar when you’re editing a post or page. You can create a new template or choose one of your existing templates:

How to create a new template in themes that support template editing mode
Creating a new template in themes supporting Template mode.

If you create a new template, you’ll be able to give it a name to help you remember it. Then, you can design the template using the special template editor mode, along with the new theme blocks that we detailed in the previous section:

The new template editor in WordPress 5.8
The new template editor in WordPress 5.8.

Blockbase Full Site Editing Example

Blockbase is a theme from Automattic that functions as a kind of a “proof of concept” and playground for Full Site Editing. It’s still experimental, so it might change before these features are in the core WordPress software. But it provides an idea of Full Site Editing.

With the theme and the plugin version of Gutenberg installed, you get a new Site Editor area that lets you “build” your theme using the same editor you saw above.

The critical difference, though, is that you’re not just building a single post or page. Instead, you’re using the Gutenberg WordPress block editor to create the actual templates that all of your site’s content will use — for example, the template for your header.

An early example of what full site editing might look like
An early example of Full Site Editing.

To help you accomplish this, you’ll get a range of new design blocks, including some of the theme blocks that you saw above:

The many new design blocks with full site editing
The new design blocks with Full Site Editing.

To navigate between different templates, you can click on the WordPress logo in the top-left corner to edit other templates and create new ones:

How to edit different theme templates
Editing different theme templates.

Again, the idea is that you’ll eventually be able to use the Gutenberg editor to control all of your theme’s templates/layouts. And when that happens, creating a WordPress site will look pretty different from what we view as “normal” in 2021.

In the 2+ years since the launch of Gutenberg, much has changed, and there’s still more to come! 😲 Check out this guide to see what’s coming in the months and years ahead 👀CLICK TO TWEET

Summary

Since 2018, the Gutenberg block editor has made a lot of progress. With the upcoming move towards Full Site Editing, the block editor will only become an even more significant part of WordPress.

In this post, we’ve covered everything from block editor basics to advanced tips and features. We’ve also looked at what Full Site Editing might look like in the future.

If you’re not ready to try it yet, you can permanently disable Gutenberg and use the classic editor. However, Gutenberg will continue growing, so it’s not something you’ll want to ignore forever.

Do you still have any questions or thoughts about the editor? If so, we’d love to hear your comments, both good and bad.


Save time, costs and maximize site performance with:

  • Instant help from WordPress hosting experts, 24/7.
  • Cloudflare Enterprise integration.
  • Global audience reach with 28 data centers worldwide.
  • Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that’s right for you.

Hand-picked related articles

Leave a Reply

Your email address will not be published.