An easier way to add content
WordPress 5.0 introduced a completely new block-based editor called Gutenberg. It is an easier and new way to create content. Instead of a simple editor and a back-end code editor, the new interface makes it easier to drag and drop items into your WordPress site.
Gutenberg has basically taken elements out of some of the most popular WordPress plugins like Elementor and Divi, which are considered “visual composers”. Gutenberg is not nearly as advanced as those solutions, but it’s a step in the right direction.
Below is a screenshot of the Classic WordPress Editor. The formatting buttons are like the text editor for Microsoft Word.
Beginning with WordPress 5.0 and higher, the new block editor from Gutenberg shown below was rolled out.
The new editor uses the approach of adding blocks or elements to create content layouts. Every item you add to your page or post is called a block, including videos, audio, 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, to add a table using the classic editor requires a separate plugin.
To add a table using the WordPress Gutenberg editor, all you must do is add a table block, choose your rows and columns, and add your content.
When using the WordPress Gutenberg editor, it’s simple to move content areas up and down by dragging the blocks.
In general, the new Gutenberg block editor is easy to use and learn. The block design tools include many features such as line-height control, heading and paragraph blocks, media blocks, background gradient, and text blocks.
Creating a New Blog Post Or Page With WordPress Gutenberg Block Editor
Creating a new post or page with the WordPress Gutenberg editor launches the block editor. The process is the same as it is with the classic editor.
From your WordPress admin area, click on
- Posts > Add New
- Pages > Add New
The first block of all pages and posts is the title.
After typing your title, you can press the tab key or move the mouse under it and start writing. By default, the next block is a paragraph.
You can also add some other type of content by clicking the + sign at the top left-hand corner of the editor, on the left side of a block, or below an existing one.
When you click on one of the + signs, the Block menu will appear with a search bar on top of it and the most used blocks below.
How To Work With WordPress Gutenberg Blocks
All of the blocks have their own toolbar at the top. The toolbar buttons change according to the type of block you are editing.
The screenshot below shows a paragraph block with basic formatting such as bold, text alignment, inserting a link, and italics.
In addition to the toolbar, each block has more settings on the right-hand side column of the edit screen.
How To Save & Reuse Blocks In WordPress Gutenberg Editor
One of the many benefits of using blocks is that you can save and reuse them individually. For those who like to use consistent formats or add specific snippets to their content, this is especially helpful.
From the menu button at the top right-hand corner of the block’s toolbar, click on the three vertical dots. Then choose Add to Reusable Blocks.
Give the reusable block a name you will recognize to make it easier to identify when you want to use it again. Click Save when done.
Add a Reusable Block On a Post Or Page
Choose the page or post where you want to add a reusable block. Click an add button block from the post or page edit screen.
Look for the saved block under the Reusable tab, or you can search for it in the same place.
Move your mouse over the block to see a quick preview of it. Insert it into your page or post by clicking on it.
Reusable blocks are in the WordPress dataset. Click on the Manage All Usable Blocks link to manage them.
Manage WordPress Gutenberg Reusable Blocks
From the block manager page, you can edit, delete, or export reusable blocks to use on another WordPress website.
Managing & Publishing WordPress Gutenberg Editor Options
Every WordPress page and post includes a lot of metadata, such as featured images, publish date, tags, and categories.
These options are all located on the right-hand column of the editor screen.
WordPress Gutenberg Plugins
Many WordPress plugins are predefined as blocks which makes them easy and ready to use with Gutenberg.
WP Forms enables 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 types of forms.
Use pre-built form templates and workflows to create attractive mobile responsive forms. WP Forms also offers a Pro version if you want more advanced functionality and features.
WooCommerce Blocks is one of the most well-known and popular plugins to integrate eCommerce features into your website.
Create engaging content using text and multimedia in a block with the Gutenberg editor. Feature single products or a group of related products by applying a filter based on criteria such as sales stats and categories.
WordPress Gutenberg Editor Usability
The Gutenberg editor does all the same things as the classic editor. Below are some common and popular blocks used.
Easily craft content with this default Gutenberg block. Write content as you would for any document. Each paragraph automatically turns into a block behind the scenes.
Another way to use the paragraph block is to click Block Inserter in the pop-up window after you click the (+) sign.
Use text columns to create multi-columned paragraphs that are the same width and equally distributed across the entire page.
Adding a Link
All standard text blocks, including the paragraph block, include a link button in the toolbar.
Add Image Block
The WordPress Gutenberg editor has a ready-to-use image block. Click on it to add an image.
There are three ways to add an image. Upload it, add from your media library, or drag from your computer.
Another way to add an image is to drag and drop it from your computer. The Gutenberg 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 with the gallery block. Control the number of columns and image sizes. Use the toggle switch to crop the images so that they line up evenly automatically.
The WordPress Gutenberg editor includes numerous additional block types for you to use. For a full list, read the WordPress.org support article on blocks.
WordPress Gutenberg came about as a solution to problems that some users had learning the classic editor. Its drag and drop interface enables non-techies to design and manage a professional-looking website.