How to Get the Best Outcome From the Gutenberg Editor?

As of WordPress 5.0’s announcement last year, December 6, 2018, WordPress introduced a new default content editor called Gutenberg editor. Nowadays, Gutenberg is mostly known as the “WordPress editor” or “block editor” if we want to be more precise, to be honest.

The fundamental idea of this editor is to bring a different approach to creating content. Rather than using the Classic editor that had both text and code panel, Gutenberg uses blocks of various pre-constructed modules to design a webpage and the contents more elegantly.

At the time when Gutenberg was first launched, it was difficult for some users to adopt the block approach while others appear to be already liking working the editor. Therefore in this article, we are trying to provide some tips that can help you to get the best outcome with this powerful editor.

Quick note: WordPress has recently released 5.3 updates that insignificantly improved the user experience of the block editor and named it as Kirk as well.

The First Look of Gutenberg Editor

Assuming you are using the latest version of WordPress so the block editor as well. Therefore, it’s essential to understand the elements of the block editor at its first look.

Inside the block editor, you will notice a block with an H1 heading that is used for the title of a page or post by default. The following block is for textual inputs or, you can choose an available block using the “+” symbol.

Under the text and block section, you will mark the plugin settings section where you can find almost all plugin settings that are related to your posts & pages.

On the right sidebar of the editor, you will find the default post meta settings that were available in the previous classic editor. However, in Gutenberg, the options are more user-friendly and dynamic.

It is all about a quick overview of the Gutenberg editor. In the rest of the article, we will focus on how to use the blocks and other related options of this editor to design a beautiful post.

How to Create a Blog Post With the Editor?

It’s pretty simple. All you have to do in the WordPress dashboard, under the post section click on “add new” and you will be redirected to the block editor immediately.

How to Use the Block Editor Properly?

Step 1: Add title

Once you see the editor, the first task is to assign the title of the article. You will see a big textbox with a default hint “add title” where you should type the article name. Make sure you do not add any unnecessary texts in this block so that the title looks clean and definitive.

Step 2: Start Using a Block

As soon as you complete with the title. The text or other elements of the post can be added in the next block. To write from the very beginning of the article, use your mouse to move the cursor below the title. You can also press the tab key on your keyboard to go down.

By default, the next block is a paragraph block. However, it has the option to choose customized blocks in case you want to start the post with a different format or another module.

To apply a custom block, you must click on one of the three “+” symbols available on the editor. One of the “add block” buttons is on the top of the editor that is not as efficient as the other two in terms of block placement. Clicking on the “+” will show an add block menu with a search bar on the top and all the available blocks under child categories.

2.1 Search For a Block

The search bar is there to help you find a block immediately without looking inside the block categories.

For example, if you want to assign a paragraph. You can type “paragraph” on the search bar and the block will appear in the result.

You can use the search bar to find basic blocks like a “paragraph” “heading” or “custom HTML”; however, to discover more advanced blocks check out the categories inside the block menu.

Remember that the block editor was designed to give you the ability to be definitive when you build a page and use the perfect block that can increase the engagement and value of the page.

2.2 Mostly Used Blocks

Inside the block menu, the first category contains the most used blocks. It means you will find all the blocks that are mostly used in the content recently. The blocks in this category may be dynamic because you may change the use of blocks in the content from time to time.

You can use the “/” key on your keyboard to quickly apply recently used blocks inside your content.

Tip: Type the name of the block after “/” and the block will be immediately assigned and save some more seconds on your work. For example, to assign the image block type “/image” and you will see the option to either upload an image or choose from the gallery or a URL.

2.3 Common Blocks

Below the most used modules, you will find the common block category that includes blocks that are used very often. It includes paragraph, image, heading, gallery, quote block, etc.

2.4 Formatting Blocks

Sometimes it’s essential to add some statistical charts or codes or pull quotes inside your content to make it more engaging. You can apply any of these modules easily by using the blocks available under the formatting section and give your post a new direction as well as some authority too.

2.5 Custom Layout Blocks

To design your post, you can take advantage of the layout blocks that include elements like a separator, bottom, columns, grouping, spacer, etc.

2.6 Widget Blocks

Widget blocks are one of the most significant changes in the block editor from the old classic editor. With the block editor, you can use your widgets inside your article and make it more interesting. You can use the widgets for displaying some statistics, a list of recent posts. Or it can be any widget on your list.

2.7 Embed Blocks

A vast collection of embeds can be assigned to your post by using the block editor. There are a total of 33 embed options from different websites that can be added to your site with URL pasting.

Step 3: Managing The Blocks

Since we have introduced the types of blocks available in Gutenberg editor. It’s time to understand how to manage the block well to create a good post.

Every block will have its toolbar once you start creating something in it. The buttons in the toolbar will vary according to the block type. For example, if I take a paragraph block and write something in it, the toolbar will be available for further modification.

Apart from the customization options, the toolbar also has the block settings and transformation options in it. For some advanced modification, you can use the sidebar options in the editor screen.

To move your blocks up and down, there are two buttons available on the left side of each block. You can move the blocks as much as you want according to need.

You can also save a block format for reuse. This option is particularly helpful for bloggers who frequently need to add a specific type of block into the content.

For example, I have created the paragraph block with a purple color, which I would like to reuse in the future. So to save the block for reuse, you should click on “more options” in the toolbar and add it as a reusable block.

After that, you will be asked to give it a name that you are going to save for future use. The block you just saved for reuse will be available under the “reusable” category in the block menu.

In case you want to edit or delete a reusable block, click on the “manage all reusable blocks” under the reusable section.

Step 4: Adding Some Common Block In the Editor

As we already know, the Gutenberg editor has ready to use blocks that we can implement in our content straight in. One can add these blocks and do some optional changes to get the best possible outcome with it.

Being said that, let’s see how the editor simplifies the ability to customize your content with some common ready to use blocks.

Adding an Image Block

The WordPress editor has a ready to use image block. You can add the block, upload or select an image from the media library and customize it easily.

You can also drag and drop an image from your computer, and the editor will automatically create an image block once it identifies the dragged file as an image.

Once you add an image, you will be able to see the advanced settings on the right part of the screen where image related metadata, size, and shape of the image can be customized.

For more settings such as inserting links and changing the alignment of the image, you can take the help of the block toolbar.

Adding an Image Gallery

The gallery block of the editor is pretty much similar to the image block. You can either add the block first and then images, or you can select multiple images from the PC and drag them all to the editor to form a gallery itself.

Adding Links in Your Content

It’s easy to add and manage links in the block editor. Some of the blocks have the option where you can add custom links. The paragraph block is the most common, as you might have guessed already. However, the image block, list block, button blocks and some more have the linking option.

Let’s see how you can assign a link to a specific phase inside the paragraph editor. To insert a link you have to have text content in the paragraph block.

Now select any word or phrase where you would like to assign a link and then click on the “link” icon on the toolbar. Immediately, a box will appear under the selected words or phase where you can type the URL or search for any keyword if you want to create an internal link.

Press enter to complete the linking process.

Adding Custom HTML

Custom HTML plays a vital role in content creation. When we need to display an advertisement, banner, or any kind of statistical charts we use custom HTML.

The block editor makes it simple to add custom HTML inside your page without breaking anything inside your page. Just add the block and add the HTML, and you are done.

Adding a Quote

Quote inside the content is a trend nowadays, effective as well to make the content more attractive. The WordPress editor will help you add a quote with a matter of seconds.

Stylishly adding a quote has never been easier with the classic editor, however, that day is long gone now. To assign a quote inside your content, simply add the “pull quote” block from the block menu and type the quote.

Once the quote is ready, do not forget to mention the author-name below.

Assign a Shortcode

As I have mentioned earlier, widget blocks are one of the best implementations in the block editor, it’s time to know how you can take advantage of a widget block to add a form in your content.

Nowadays, we use plugins to create beautiful forms for our site. Most often, these plugins provide us a shortcode using which we can display the form anywhere we want.

In the classic editor, we had to switch to the code editor and paste the shortcode, which sometimes does break the page. However, with the block editor, it has a pre-defined shortcode block which is designed to display shortcodes without hampering the other blocks of the page.

Step 5: Exploring Some Advanced Blocks In Gutenberg

Gutenberg doesn’t only value the common way to create content but also focuses on some of the most significant shortage that was previously encountered by the users with the classic editor.

Hence it comes with some advanced blocks that we can say are the combination of two or more blocks. Either way, it’s a great approach and improves the page quality in terms of providing information and attracting the readers.

With that being said, let’s dive into the editor to find out some of the advanced blocks.

Adding a Button Inside a Page or Post

It has never been much more comfortable to add a button earlier but now you can do it with three or four mouse clicks. To add a button inside your page or post, find the button block under the “layout element.”

It will let you enter the button text and link, as well. On the right sidebar, you can change the button style, colors, and border-radius as well.

Adding Text Next to an Image

To assign text inline to an image or vice-versa, you can use the “media & text” block where you will have both options to upload or select images and add text or paragraph.

It’s simple and effective. You can resize the image by dragging the border and set to crop the image automatically for proper resizing. Image alternate text can be set from the right sidebar as well.

Like other blocks, the toolbar provides you to customize the order of image and text and shape of the block.

Add a Table Inside Your Content

Sometimes we may need to insert a table inside our content. In such a situation, thanks to the Gutenberg editor, you can take the help of the default table block without using a separate plugin for it.

Here how to create a table using the table block of the Gutenberg editor.

Creating a Beautiful Cover Pic for Your Content

I am not sure how many people use this idea, but the “cover block” in block editor is an amazing integration and straightforward as possible as it can be. You can create an amazing cover picture by simply adding a clear image and using the text editor that appears over the image.

Later, you can change the style of the cover image by adding some waverly layouts and resizing it as suitable.

Adding an Audio File

If you are going to add a podcast, music file, or any other audio file into your content, then you can use the audio block in the editor. It’s very straightforward to add and similar to adding images.

Step 6: Plugin Options in the Gutenberg Editor

The installed plugins that are related to the creation of content, able to integrate their options inside the editor with the help of the Gutenberg API system.

Plugins option such as SEO, table of contents, automatic internal links will be available in the editor as soon as it activated. For example, one of the most precious plugin to create content is the SEO plugin. Let’s say we installed the Yoast SEO plugin in WordPress, then all the content related options of Yoast SEO plugin will appear just below the editor.

You can mention the focus keyword, track the SEO score, edit a content snippet. Overlap metadata, design the social appearance of the content as well.

For other plugins, you can find all the options once you look in the bottom section of the editor.

Step 7: Exploring the Editor Settings

The Gutenberg editor itself has some impressive settings which you can apply to feel something different than the usual setup. It helps to emphasis your needs and provides you more focus, easiness as well as the ability to do more.

The settings of the editor are divided into three different parts.

1. View
2. Editor &
3. Toolbar

1.1 Top Toolbar

Under the hood of view, you can enable “top toolbar,” which adds a toolbar at the top of the editor that access all the blocks and document tools in a single space.

1.2 Spotlight Mood

This mode is applicable when you don’t want to focus on the other blocks while working on a particular block. This mood blurs the other blocks and helps you keep working on the current one.

1.3 Full-Screen Mode

This mode is nothing but fits the editor into your whole screen so that other unnecessary parts don’t appear while editing content.

2.1 Visual Editor

This is activated by default as you are working on the editor.

2.2 Code Editor

Enabling the code editor will convert all your blocks into codes where you can edge it little more with advanced coding. (Make sure to use it only and only if you are comfortable with coding).

3.1 Block Manager

It let you enable or disable blocks of the editor according to your need.

3.2 Manage All Reusable Block

It helps you to manage the reusable blocks if you have saved any.

3.3 Keyboard Shortcuts

Gutenberg supports keyboard shortcuts. All the keyboard shortcut combinations are available in this note. You can also use Shift + Alt + H to view all the shortcut information.

Step 8: Publishing and Managing Option in the Gutenberg Editor

There will be a lot of metadata for each post & page that you are going to create in the editor. All those metadata that includes post status, permalink, categories, tags, excerpt, featured images will be available on the right sidebar of the editor screen (under the document section).

Each option contains more child options that let you complete content and make it ready to publish.

Final Words

No doubt, Gutenberg has been the better editor for WordPress since the 5.0 update with all its beneficial ingredients in it. All we have to understand and explore the features and take advantage of the editor to make max out of it.

With this article, I genuinely hope you will get something new about the editor, and even if you are not using it currently. You will get motivated to use the editor soon.