From security updates to adjust the sizes of background images, WordPress 5.0, released in 2018, is famous for including a myriad of new features. Gutenberg is one of those.
As a new WordPress editor, Gutenberg created a stir not only among developers but also among those seeking to have a WordPress website for their business. The new editing tool has redefined WordPress editing and replaced the older editor completely.
In this post, we are going to discuss everything about Gutenberg while providing quick tips on how to use the WordPress editing tool. Let’s explore the basics first.
What is Gutenberg?
As already mentioned, Gutenberg is a new WordPress editing tool that comes by default with WordPress 5.0. Named after Johannes Gutenberg, it’s a block-based WordPress editor that enables users to use blocks for every activity, be it inserting the content, rearranging, styling, etc.
When you open the new WordPress editor, it appears like this;
Following the block-based approach, the new WordPress editor can redefine the content editing experience of users. Be it a creation of landing page or other content pages, Gutenberg lets you create the entire website with the use of blocks.
How does Gutenberg Editor Work?
Those who have been using WordPress will be aware of the process of editing the content. They get a single box to use for writing texts adding comments, embed videos, images, etc.
As mentioned above, Gutenburg is a block-based WordPress editor that changes the current editing process entirely by replacing a single box with multiple boxes. You can choose a separate block for texts, videos, images, etc. While editing, you need to focus on an individual box for editing. It makes a complex content creation task quite.
Difference Between Gutenberg and Classic WordPress Editor
To understand the differences between Gutenberg and real Classic WordPress editor, we will discuss several points to understand the fact clearly.
Editor Interface
The editor interface is the main difference between Gutenberg and Classic WordPress editor. The old WordPress editor is similar to Microsoft Word whereas the new editor includes features like drag and drop. It indicates that Gutenberg allows you to choose a block and drag it anywhere on the page.
Content Creation
Talking about the classic editor, which is like a plain paper used to write anything. You may face difficulty with such editor, especially when adding elements such as embed videos, images, shortcodes, etc.
The new WordPress editor is more advanced than the classic editor. It is famous for having a variety of blocks for everything, including texts, images, buttons, tables, video embed, and more.
Easy to Execute
Gutenberg includes a myriad of cutting-edge functionalities that are easy to execute. Apart from this, the new version of the WordPress editing tool removes the necessity to use third-party plugins for adding elements such as contact form, table, etc.
A Guide to Use Gutenberg WordPress Editor
Creating a New Post or Page
Creating a new post or page with the WordPress editor is indeed a simple job. All you need to do is to follow a couple of steps;
- Go to the dashboard
- Click on the Post (in the left side)
- Click on the Add New to create a new Post
Similarly, for creating a new page, you can go to the Page option and follow the above steps.
Adding a Block in Gutenberg
To add a new block to Gutenberg, you can follow a couple of steps provided below. Take a glimpse.
- Go to the Interface.
- In the top left corner of the body, you will be able to see a ‘plus’ button, click on this button.
- Now you need to search for the content that you have to add.
- Click on the selected content and add it.
Following the above steps will help you in adding blocks to the Gutenberg editor.
How to Work with Blocks in Gutenberg?
In the new WordPress editor, every block includes a toolbar, which is visible on the top portion. Meanwhile, buttons in the toolbar can change based on blocks that you edit.
For instance, if you work with a paragraph block, you will be able to view several formatting buttons such as Italic, text alignment, and some other buttons.
Apart from this, these blocks also have their settings that you will be able to visualize on the right side of the editing screen. You can use these setting tools to edit block to customize it matching your requirements.
How to Save and Reuse Blocks
Blocks available with the new WordPress editing tool can be reused and saved separately. It makes the task of bloggers quite easy, especially those who frequently add content snippets to their posts.
To save a block, one can follow the below-provided steps;
- Click on the menu (available on the right side corner of every block).
- Once you click on the menu, now you have to choose ‘Add To’ reusable blocks.
- You have to write a name for the added reusable block.
- Once you enter the name, then you can save a button.
To use the saved reusable block in other WordPress posts, you can follow these steps;
- First, you need to edit a post or page where you have to add a reusable block.
- Go to the option to add a block button.
- You can find the reusable block either by typing the name in the search bar or search under the reusable tab.
- To get a quick preview of the reusable block, you need to keep and insert it into the desired post or page.
Publishing and Post Setting
To publish and manage your post, you can view the right column on the screen. You must also remember the fact that every WordPress post includes a lot of metadata. It includes important details such as featured images, publishes dates, categories, tags, etc.
Plugin Options in Gutenberg
With the new Gutenberg WordPress editor, you will be able to find some top-notch plugins that are available as blocks, including Atomic Blocks, Gutenberg Blocks Design Library, Stackable, Ultimate Blocks, and so on.
Using a popular plugin like WPForms allows you to add forms to your page or post with the use of widget block.
Yoast SEO, on the other hand, lets you edit the ‘SEO Setting’ according to your needs and customize it as well.
How to Add Common Blocks in Gutenberg?
To explore how you can add blocks to the new WordPress editor, you need to focus on multiple activities.
Adding a picture
To add an image in the editor, you have to add the block and then insert and upload the image. You can drag and drop the image, and the editor will create blocks automatically.
Once you add an image, you can then view the block settings and can add details such as metadata (for the added images), link, text, size, etc.
Adding a link
To add a link, you can select a paragraph block that includes the option like an insert link in the toolbar. With the use of keyboard shortcut (+K for Mac and CTRL+K for Windows users), you will be able to insert link hassle-free.
Adding Shortcodes and Image Gallery
When it comes to a gallery block, it’s quite similar to the image block. To add an image gallery, you can either select it from the image file or upload it. As far as shortcodes are concerned, these work similarly as in the classic editor. You need to add shortcodes to a paragraph block, or you can get an option to use the shortcode block.
Overview Several New Content Blocks in Gutenberg
Add a picture with text or next to it
To do this, you can use the setting (available on the right-side column) and use the Media and Text block. While doing it, you will be able to use two blocks that appear as side-by-side. And you can easily add an image and text next to it.
Add a Button in Pages or Posts
With Guttenberg, you will get a button block that lets you quickly add a button to any page or post. Apart from adding a button, it also allows you to add a link for the added button, change colors, choose button styles, etc.
Adding Beautiful Cover Images in Posts or Pages
To add a cover image, you have to add a cover block and then upload the image that you wish to use. You will get an option to choose an overlay color for the cover or to make it a fixed background image for creating a parallax effect when scrolling down the page.
Making Tables Inside Text
Creating tables inside an article is convenient with the new Gutenberg editor. Thanks to the new WordPress editor that includes a default table block and makes it easy to create tables in the inner side of texts. With it, you can easily select a row and column that you need to make.
The old classic WordPress editor doesn’t include any such feature. And to create content with it, you have to use plugins.
Writing Column-Based Content
Gutenberg makes your task to create multi-column content easy, you can also add column blocks. Apart from this, you can create a maximum of up to 6 columns in a single row and use a block inside every column.
Conclusion
The classic content editor is replaced with a brand new block editor ‘Gutenberg’. To use the new WordPress editor rightly and effectively, you need to keep the mentioned points in mind. I hope this blog helps you to comprehend the best use of new WordPress editor so as to you can master in creating visually stunning blog posts and pages.
We would love to here your comments & questions about this blog post. Send us your thoughts by completing the contact form.
