WordPress 5.0 introduced a brand new block editor called Gutenberg. It’s an easier and newer way to create content. Instead of a simple editor and internal code editor, the new interface makes it easier to drag and drop elements into your WordPress site.
Gutenberg basically took elements from some of the most popular WordPress plugins like Elementor and Divi, which are considered “visual composers”. Gutenberg is nowhere near as advanced as these solutions, but it’s a step in the right direction.
Below is a screenshot of the classic WordPress editor. The formatting buttons are similar to the Microsoft Word text editor.
Starting with WordPress 5.0 and up, a new block editor from Gutenberg has been released, shown below.
The new editor takes the approach of adding blocks or elements to create content layouts. Every element you add to your page or post is called a block, including videos, audios, lists, images, and galleries.
Benefits of the WordPress Gutenberg Editor
It is easier and simpler to add different types of content to pages and posts by adding blocks. For example, adding a table using the classic editor requires a separate plugin.
To add a table using the WordPress Gutenberg editor, all you have to do is add a table block, select rows and columns, and add your content.
When using WordPress Gutenberg editor, it’s easy to move content areas up and down by dragging and dropping blocks.
Overall, the new Gutenberg block editor is easy to use and learn. The box design tools include many features such as line height control, heading and paragraph boxes, media boxes, background gradient, and text boxes.
Create a new blog post or page with the WordPress Gutenberg block editor
Creating a new post or page using the WordPress Gutenberg editor launches the block editor. The process is the same as in the classic editor.
In your WordPress admin, click
- Posts> Add New
- Pages> Add New
The first block of all pages and posts is the header.
After entering the name, you can press the tab key or move the mouse pointer under it and start writing. By default, the next block is a paragraph.
You can also add some other content type by clicking the + sign in the upper left corner of the editor, on the left of a block, or below an existing one.
When you click on one of the + signs, the Block menu appears with a search bar at the top and the most used blocks at the bottom.
How to Work with WordPress Gutenberg Templates
All blocks have their own toolbar at the top. The toolbar buttons change depending on the type of block being edited.
The screenshot below shows a paragraph block with basic formatting such as bold, text alignment, link insertion, and italics.
In addition to the toolbar, each block has additional settings in the right column of the edit screen.
How to save and reuse blocks in the Gutenberg WordPress editor
One of the many benefits of using blocks is that you can save and reuse them individually. This is especially useful for those who like to use consistent formats or add specific snippets to their content.
Using the menu button in the upper right corner of the block toolbar, click on the three vertical dots. Then select Add to Reusable Blocks.
Give the reusable block a name you recognize so that it is easier to identify when you want to use it again. When finished, click “Save”.
Add re-usable blocking on post or page
Select the page or post where you want to add a reusable block. Click the add button block on the edit post or page screen.
Find the saved block in the “Reusable” tab or find it there.
Hover over a block to quickly view it. Paste it into your page or post by clicking on it.
There are reusable blocks in the WordPress dataset. Click the Manage All Blocks Used link to manage them.
Manage reusable WordPress Gutenberg templates
On the block manager page, you can edit, delete, or export reusable blocks for use on another WordPress website.
Manage and publish WordPress Gutenberg editor options
Every WordPress page and post includes a lot of metadata like featured images, post date, tags, and categories.
All of these parameters are located in the right column of the editor screen.
WordPress Gutenberg Plugins
Many WordPress plugins are predefined as blocks, making them simple and ready to use with Gutenberg.
WP Forms allows users to add forms to pages and posts using a widget block.
WP Forms is an easy to use drag and drop form builder. Create contact, subscription, feedback, payment and other forms
Use pre-built form templates and workflows to create attractive mobile responsive forms. WP Forms also offers a Pro version if you need more advanced features and functionality.
WooCommerce Blocks is one of the most famous and popular plugins for integrating eCommerce functionality into your website.
Create engaging content using text and media in a block with the Gutenberg editor. Suggest individual products or a group of related products by filtering based on criteria such as sales statistics and categories.
Usability of the WordPress Gutenberg Editor
The Gutenberg editor does everything the classic editor does. Below are some common and popular blocks.
Create content easily with this default Gutenberg block. Write the content as you would for any document. Each paragraph automatically turns into a block-by-frame.
Another way to use a paragraph block is to click the Insert Blocks button in the pop-up window after you click the (+) sign.
Use text columns to create multi-column paragraphs that are the same width and spread evenly across the page.
All standard text boxes, including the paragraph box, contain a link button on the toolbar.
Add image block
WordPress Gutenberg editor has a ready-made image block. Click on it to add an image.
There are three ways to add an image. Download it, add it from your library, or drag and drop it from your computer.
Another way to add an image is to drag and drop it from your computer. Gutenberg’s editor will automatically create an image block for it.
Add metadata such as size, alt text, and image link in the image block settings on the right side.
Image gallery block
Add multiple photos using the gallery block. Control the number of columns and image sizes. Use the switch to crop the images so that they automatically line up.
WordPress Gutenberg editor includes many additional block types that you can use. For a complete list, see the WordPress.org support article about blocks.
WordPress Gutenberg has been a solution to the problems some users have encountered while learning the classic editor. Its drag-and-drop interface allows non-techies to create and manage professional websites.