In WordPress 5.0, the classic content editor has been replaced with a brand new block editor called Gutenberg.
The WordPress block editor is a new way to create content in WordPress. In this tutorial, we will show you how to use the new WordPress block editor and master it to create visually stunning articles and pages.
What is the difference between the block editor (Gutenberg) and the classic editor?
Before delving into the new editor, let us first compare and understand the difference between the Gutenberg block editor and the classic editor.
This is how the classic editor in WordPress looks:
If you upgrade to WordPress 5.0 , the new block editor will look like this:
As you can see, they are two completely different editors for creating content in WordPress.
The old classic editor is a text editor, and its format buttons are very similar to Microsoft Word.
The new editor uses a completely different approach, called "blocks" (hence the block editor).
Blocks are content elements that you add to the edit screen to create a content layout. Each item you add to a post or page is a block.
You can add blocks for each paragraph, image, video, gallery, audio, list, etc. There are blocks for all common content elements, and more blocks can be added through the WordPress plugin.
Is the new WordPress block editor better than the traditional editor?
The new WordPress block editor provides an easy way to add different types of content to your posts and pages.
For example, if you wanted to add a table to the content, you needed a separate table plug-in.
With the new editor, you can simply add a table block, select columns and rows, and start adding content.
You can move content elements up and down, edit them as separate blocks, and easily create multimedia content.
Most importantly, the new WordPress block editor is easy to use and learn.
This brings a huge advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.
Even so, let's take a look at how to use the new WordPress block editor like a pro to create great content.
Use Gutenberg – the new WordPress block editor
The design of the block editor is intuitive and flexible. Although it looks different from the old WordPress editor, it can still do all the operations you can do in the classic editor.
Let's start to introduce the basic operations you complete in the classic editor and how they are done in the block editor.
Use the block editor to create a new blog post or page
You will start creating new blog posts or pages as usual. Just click on the Article » Write Article menu in your WordPress admin . If you want to create a page, go to Page»Add New Menu.
This will start the new block editor.
How to add blocks in Gutenberg
The first block of every post or page is the title.
After that, you can use the mouse to move below the title, or press the Tab key on the keyboard to move down and start writing.
By default, the next block is a paragraph block. This allows users to start writing immediately.
However, if you want to add other content, you can click the Add New Block button in the upper left corner of the editor, below the existing block, or to the left of the block.
Click the button to display the add block menu, with a search bar at the top, and common blocks below.
You can click the tabs to browse block categories, or type keywords to quickly search for blocks.
If you don't want to use the mouse to click the button, you can use keyboard shortcuts by typing/searching and adding blocks.
Use blocks in the new editor
Each block has its own toolbar, which is displayed at the top of the block. The buttons in the toolbar will change according to the block you are editing.
For example, in this screenshot, we are working in a paragraph block that displays basic formatting buttons such as: text alignment, bold, italic, insert link, and strikethrough buttons.
In addition to the toolbar, each block can also have its own block settings, which will be displayed in the right column of the editing screen.
You can move the blocks up and down by simple drag and drop or click the up and down buttons next to each block.
Save and reuse blocks in Gutenberg
One of the best things about blocks is that they can be saved and reused separately. This is especially useful for bloggers who often need to add specific content summaries to their articles.
Just click the menu button in the upper right corner of the toolbar of each module. From the menu, select the "Add to Reusable Block" option.
You will be asked to provide the name of this reusable block. Enter the name of the block and click the "Save" button.
Now, the block editor will save the block as a reusable block.
Now that you have saved a block, let's see how to add reusable blocks to other WordPress posts and pages on the site.
Just edit the post or page where you want to add reusable blocks. In the post edit screen, click the Add Block button.
You will find the saved blocks under the "Reusable" tab. You can also find it by typing its name in the search bar.
You can hover your mouse over it to see a quick preview of the block. Just click the block to insert it into your post or page.
All reusable blocks are stored in the WordPress database and you can manage them by clicking the "Manage all reusable blocks" link.
This will take you to the block manager page. Here, you can edit or delete any reusable block. You can also export reusable blocks and use them on any other WordPress website.
Publish and manage options in the Gutenberg block editor
Every WordPress post contains a lot of metadata. This includes information such as release date, classification and tags, and featured pictures.
All these options are neatly placed in the right column of the editor screen.
Gutenberg's plugin options
The WordPress plugin can use the API of the block editor to integrate its own settings into the block edit screen.
Some popular plug-ins are already available as modules. For example, WPForms is the best WordPress form builder plugin, which allows you to add forms to content using widget blocks.
Here is how Yoast SEO allows you to edit SEO settings in the new editor :
WooCommerce also comes with widget blocks, which you can easily add to any WordPress posts and pages.
Add some common blocks in the new editor
Basically, the new editor can complete all the work of the traditional editor. However, transactions will be processed faster and more gracefully than before.
1. Add images in the new WordPress editor
There is an image block in the new WordPress editor that is ready to use. Just add the block and upload the image file or select from the media library.
You can also drag and drop images from your computer, and the editor will automatically create image blocks for them.
After adding the image, you will be able to see the block settings where you can add the image's metadata (such as Alt text, size, and adding a link to the image).
2. Add a link in the new block editor
The block editor comes with several blocks where you can add text. The most commonly used one is the paragraph block, which has an insert link button in the toolbar.
All other commonly used text blocks also include link buttons in the toolbar.
You can also insert a link using keyboard shortcuts, Command + K on Mac and CTRL + K on Windows.
3. Add a picture library in Gutenberg
The working principle of the gallery block is similar to the image block. You add it, then upload or select an image file.
4. Use Gutenberg to add shortcodes to WordPress posts
All your shortcodes will work just like in a classic editor. You can simply add them to paragraph blocks, or you can use shortcode blocks.
Explore some of Gutenberg’s new content blocks
The Gutenberg editor promises to solve some long-standing usability problems in WordPress by introducing some new modules.
Below are some favorites that we think users will find very useful.
1. Add pictures next to some text in WordPress
With the old editor, many of our users cannot place pictures next to text. You can now use the " Media and Text" block to do this.
This simple block comes with two blocks placed side by side, allowing you to easily add an image and add some text next to it.
2. Add buttons to WordPress posts and pages
Adding buttons to your blog posts or pages is another annoyance in classic editors. You must either use a plugin that has a shortcode created for the button, or you must switch to HTML mode and write code.
Gutenberg comes with button blocks that allow you to quickly add buttons to any post or page.
You can add a link to the button, change the color and choose from three button styles.
3. Add beautiful cover images to blog posts and landing pages
Another cool feature you might want to try is the "cover" block, which allows you to add cover images to posts and pages.
The cover image is a wide image, usually used as the cover of a new section or the beginning of a story on a page. They look beautiful and allow you to create compelling content layouts.
Just add a cover and upload the image you want to use. You can choose the overlay color of the cover or set it as a fixed background image to create a parallax effect when the user scrolls down the page.
4. Create a table in the interior of the article grid
The classic editor has no buttons to add tables to WordPress posts. You must use a plugin or create a table with custom CSS and HTML.
The new Gutenberg editor comes with a default Table block, which makes it very easy to add tables to your posts and pages. Just add a block and choose the number of columns and rows to insert.
Now you can continue to add data to the table rows. If needed, you can add more rows and columns. There are also two basic style options available.
5. Create multiple columns of content
Creating multi-column content is another problem that classic editors simply cannot handle. The block editor allows you to add a Columns block, which basically adds a two-column paragraph block.
This block is very flexible. You can add up to 6 columns in a row, and you can even use other blocks in each column.
Extra tips for using Gutenberg like an expert
Looking at the new block editor, you may be wondering, will you spend more time adding and adjusting blocks than creating actual content?
Well, the new editor runs very fast, even a very basic few minutes of use will allow you to add blocks immediately without spending too much time.
Soon you will realize that using this new method will make your workflow faster.
For advanced users, here are some additional tips to help you work faster with the new WordPress editor.
1. Move the block toolbar to the top.
You may have noticed in the screenshot that there is a toolbar at the top of each block. You can move the toolbar to the top of the editor.
Just click the three-dot button in the upper right corner of the screen and select the "Top Toolbar" option.
2. Use keyboard shortcuts
Gutenberg comes with some convenient shortcuts that will make your workflow more complete. The first one you should start using immediately is /.
Just type / and start typing and it will display matching blocks that you can add immediately.
To get more shortcuts, click the three-dot menu in the upper right corner of the screen and select "Keyboard Shortcuts."
This will bring up a pop-up window with a list of all keyboard shortcuts you can use. For Windows and Mac users, the list will have different shortcuts.
3. Drag and drop media to automatically create media blocks
Gutenberg allows you to drag and drop files anywhere on the screen, and it will automatically create a block for you.
You can drag and drop a single image or video file and it will create blocks for you. You can also drag and drop multiple image files to create a gallery block.
4. Add YouTube, Twitter, Facebook, Vimeo and other embeds
Gutenberg introduced a new embedded block to the block editor. All supported embedding types (including YouTube, Twitter, Facebook, etc.) have a block.
However, you can copy and paste the embedded URL at any time, and it will automatically create a block for you.
For example, if you add a YouTube video URL, it will automatically create a YouTube embed block and display the video.
Add more blocks to the Gutenberg block editor in WordPress
The new block editor in WordPress allows developers to create their own blocks. There are some great WordPress plugins that provide block bundles for the new editor.
Here are a few:
1.Advanced Gutenberg Advanced Gutenberg
Advanced Gutenberg comes with several blocks for popular content elements, such as WooCommerce product sliders, testimonials, maps, tags, accordions, etc.
It also enables you to perform advanced control over which users can access blocks based on user roles. You can create user profiles and choose the blocks they can add.
2.Stackable Gutenberg block
Stackable Gutenberg block is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes container blocks, posts, element grids, accordions, image boxes, icon lists, calls to action, etc.
Editor Blocks is another ingenious collection of Gutenberg blocks that you can use. It comes with useful blocks, such as author information, hero image, price list, brand, features, etc.
Frequently Asked Questions About Gutenberg – New Block Editor in WordPress
Since Gutenberg became the new WordPress editor, we have been asking many questions. Here are answers to some of the most frequently asked questions about Gutenberg.
1. What will happen to my previous posts and pages? Can I still edit?
Your old posts and pages are completely safe and not affected by Gutenberg. You can still edit them, and Gutenberg will automatically open them in a code block containing a classic editor.
You can edit them in the old editor, or you can convert old articles into blocks and use the new block editor.
2. Can I continue to use the old editor?
Yes, you can still continue to use the old editor. Just install and activate the Classic Editor plug-in.
Once activated, 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.
3. What should I do if the new editor cannot be used with the plugin or theme I use?
Project Gutenberg has been under development for a long time. This gives plugin and theme authors enough time to test the compatibility of their code.
However, there are still some plug-ins and themes that may not work properly in the new editor. In this case, you can install the classic editor plugin, request the developer to add Gutenberg support or directly find an alternative plugin or theme.
4. How to learn more Gutenberg's tips and tricks?
WP webmaster is the best place to learn the new block editor in WordPress. We are an influential WordPress resource website on the Chinese Internet.
We will publish new articles and update our old resources to help you master the new block editor.
At the same time, if you have any questions, please feel free to leave a comment or use the contact form on our website to contact us .
We hope this Gutenberg tutorial will help you learn how to use the new WordPress block editor. You may also want to check the reasons and solutions for slowing down of our Elementor and WordPress websites to solve the problem of slowing down or slowing down of your website.