If there is an issue on mobile with the display.
Alternatively you can load desktop view
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).
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.
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.
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.
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.
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.
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:
And this is how the modern WordPress block editor looks like:
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.
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:
Ready? Let’s dive in.
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.
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.
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.
This will launch the block editor.
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.
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.
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.
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.
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.
Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.
You can move blocks up and down by simply dragging them or by clicking the up and down buttons next to each block.
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.
After that, click on the block type button in the toolbar to transform the selected blocks into Groups or Columns.
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.
You can then fill in each column with any type of block to create beautiful layouts.
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.
You’ll need to provide a name for your reusable block so that you can identify and reuse it later.
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.
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.
Note: You can use entire groups and columns as reusable blocks too. This allows you to save entire sections and use them whenever needed.
Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more.
All these options are neatly placed in the right column on the editor screen.
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.
Here is how All in One SEO for WordPress allows you to edit your SEO settings in the block editor:
WooCommerce also comes with blocks that you can easily add to any of your WordPress posts and pages.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.
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.
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’.
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.
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.
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.
For Facebook and Instagram embeds, see our article on how to embed Facebook and Instagram posts 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 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 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 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.
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.
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.
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.
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:
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
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.
Let’s first compare Gutenberg vs the classic TinyMCE editor.
If you think the classic TinyMCE editor fits your needs better, you can disable the Gutenberg editor altogether.
Now, let’s take a look at how Gutenberg stacks up against third-party page builder plugins.
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.
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.
When you open the editor, it will hide the WordPress dashboard sidebar and give you a full-screen experience:
There are three main parts to the editor:
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:
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:
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:
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:
You can then follow the prompts to upload or choose an existing image from your Media Library.
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:
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:
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.
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:
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:
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.
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:
You should then see a preview of the embedded video in the editor.
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:
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:
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:
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.
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.
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:
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:
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:
Join 20,000+ others who get our weekly newsletter with insider WordPress tips!Subscribe Now
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.
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:
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:
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.
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:
To select the main parent block, you can just open up list view and select it from the list:
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:
Selecting this option will turn the visual preview into a code editor for just that block, without affecting the visual previews of other blocks:
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 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 (⌘)”:
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.
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:
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
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:
A 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:
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:
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:
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 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.)
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:
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:
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:
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.
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:
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.
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:
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:
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.
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:
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:
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.
To help you accomplish this, you’ll get a range of new design blocks, including some of the theme blocks that you saw above:
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:
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
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:
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.
Your email address will not be published.
To provide the best experiences, we and our partners use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us and our partners to process personal data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
We firmly believe that the internet should be available and accessible to anyone, and are committed to providing a website that is accessible to the widest possible audience,
regardless of circumstance and ability.
To fulfill this, we aim to adhere as strictly as possible to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.1 (WCAG 2.1) at the AA level.
These guidelines explain how to make web content accessible to people with a wide array of disabilities. Complying with those guidelines helps us ensure that the website is accessible
to all people: blind people, people with motor impairments, visual impairment, cognitive disabilities, and more.
This website utilizes various technologies that are meant to make it as accessible as possible at all times. We utilize an accessibility interface that allows persons with specific
disabilities to adjust the website’s UI (user interface) and design it to their personal needs.
Additionally, the website utilizes an AI-based application that runs in the background and optimizes its accessibility level constantly. This application remediates the website’s HTML,
adapts Its functionality and behavior for screen-readers used by the blind users, and for keyboard functions used by individuals with motor impairments.
If you’ve found a malfunction or have ideas for improvement, we’ll be happy to hear from you. You can reach out to the website’s operators by using the following email
Our website implements the ARIA attributes (Accessible Rich Internet Applications) technique, alongside various different behavioral changes, to ensure blind users visiting with
screen-readers are able to read, comprehend, and enjoy the website’s functions. As soon as a user with a screen-reader enters your site, they immediately receive
a prompt to enter the Screen-Reader Profile so they can browse and operate your site effectively. Here’s how our website covers some of the most important screen-reader requirements,
alongside console screenshots of code examples:
Screen-reader optimization: we run a background process that learns the website’s components from top to bottom, to ensure ongoing compliance even when updating the website.
In this process, we provide screen-readers with meaningful data using the ARIA set of attributes. For example, we provide accurate form labels;
descriptions for actionable icons (social media icons, search icons, cart icons, etc.); validation guidance for form inputs; element roles such as buttons, menus, modal dialogues (popups),
and others. Additionally, the background process scans all of the website’s images and provides an accurate and meaningful image-object-recognition-based description as an ALT (alternate text) tag
for images that are not described. It will also extract texts that are embedded within the image, using an OCR (optical character recognition) technology.
To turn on screen-reader adjustments at any time, users need only to press the Alt+1 keyboard combination. Screen-reader users also get automatic announcements to turn the Screen-reader mode on
as soon as they enter the website.
These adjustments are compatible with all popular screen readers, including JAWS and NVDA.
Users can also use shortcuts such as “M” (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics) to jump to specific elements.
We aim to support the widest array of browsers and assistive technologies as possible, so our users can choose the best fitting tools for them, with as few limitations as possible. Therefore, we have worked very hard to be able to support all major systems that comprise over 95% of the user market share including Google Chrome, Mozilla Firefox, Apple Safari, Opera and Microsoft Edge, JAWS and NVDA (screen readers), both for Windows and for MAC users.
Despite our very best efforts to allow anybody to adjust the website to their needs, there may still be pages or sections that are not fully accessible, are in the process of becoming accessible, or are lacking an adequate technological solution to make them accessible. Still, we are continually improving our accessibility, adding, updating and improving its options and features, and developing and adopting new technologies. All this is meant to reach the optimal level of accessibility, following technological advancements. For any assistance, please reach out to