Home » Sonic Themes Blog

How to Use Gutenberg Editor: Quick WordPress Guide

In this guide, we’re going to introduce the basics of Gutenberg wordpress editor and also read more to know about this wordpress block editor.

how to use gutenberg editor- quick wordpress guide
How to Use the New Block Editor in WordPress 5.0: Quick WordPress Guide

In case you’re using WordPress 5.0 or above, you probably have come across the new and glossy WordPress editor, broadly known as Gutenberg. Gutenberg editor is totally new, a different way of creating content and it allows you to create, edit posts and pages with more flexibility in WordPress. With this wordpress editor, there was a fairly huge certainty with regards to how to use the Gutenberg editor.

If you’re still wondering “What is Gutenberg exactly?”, don’t worry. In this guide, we will cover all the basics & tell you the best way to utilize the new WordPress block editor, and explain to you how to create visually stunning blog posts and pages. Keep reading this post to learn how to use the new Gutenberg block editor to build content and layouts at your site. Let’s get started!

What is Gutenberg?

Like each tremendous progress, WordPress has introduced an editor that is more functional and an intuitive block editor, called Gutenberg. Gutenberg has been successfully replaced the wordpress TinyMCE editor as a default wordpress editor. Similar to other wordpress editors Gutenberg also uses content blocks (that you add to alter the screen to make content formats) with more intuitive features. With this block editor, you also now can possibly create extraordinary layouts, add a table, columns, rows, and begin adding content.

Gutenberg is currently the standard WordPress block editorial manager and it is a client-side interface. It’s an open-source project created by WP community developers. With this, you also can add plugins that will give you a considerably easy way to get extra and different features into your posts and pages.

In case you want to learn about, what WordPress is?

How to use and create a post with the new Gutenberg WordPress?

As discussed, Gutenberg is a block-based editor and if you run a wordpress site then it would be fun to have such a wordpress editor in your pocket. With the same, you might start creating more posts as making a post is significantly simpler with such a wordpress block editor i.e, Gutenberg. 

Before we start creating a post with Gutenberg wordpress let’s go over a quick tour or overview of the main wordpress block editor interface.

gutenberg interface
Gutenberg Interface. Source: WordPress
  1. Add new blocks
  2. Redo Button/ Undo Button
  3. It gives access to covers things like categories and tags, featured images, and more.
  4. It gives you the authority or access to the settings of the particular block you selected.
  5. You can see a live preview of your post/page and also can publish/update your post.
  6. This is actually your post content where on adding some blocks you can edit your post (like to add content, block, embed images and videos)

Excited? If so, let’s learn how to create a wordpress post with Gutenberg.

Well, first you need to navigate to Posts and click Add New as we have mentioned in the screenshot below.

create a new post in gutenberg
Create a New Post in Gutenberg. Source: WordPress

Now you’ll be taken straight to the Gutenberg editor i.e. post/page, where you can now add blocks, images, and more. Take a look at the simple and easy Gutenberg interface.

wordpress gutenberg editor
WordPress Gutenberg Editor. Source: WordPress

Adding a Title

Well, it’s so simple to add a title in Gutenberg editor, and as you see in the image shown below. If you want to edit the permalink then you also can do it by clicking on the edit button.

add a new title in gutenberg
Adding a New Title in Gutenberg. Source: WordPress

Adding New Blocks

To add a new block, you need to click on (+) and select the content type you want. As there are many content types so you can pick any of them like a paragraph, image, heading, etc.

add new block in gutenberg editor
Add New Block in WordPress Gutenberg. Source: WordPress

You can convert the block into any other block, just click over the block and select (image, heading, cover, gallery, Woocommerce, form, etc.) you want to add. Also, you can change the paragraph block into a heading block i.e, h2 h3 h4.

You also can further change or edit or customize the paragraph block with the option available in the sidebar i.e Block beside the Document as shown in the figure below.

gutenberg sidebar option for block
Gutenberg Sidebar Option For Block. Source: WordPress

In the above figure, we have ticked some of the features that need to be known

  1. To view all the options that relate to the block tab then click to view all block all options and settings.
  2. Select the font size and turn on the drop cap.
  3. You can add a background color to your paragraph and also you can custom your text color, add multiple custom colors.
  4. Add additional custom CSS styles to your block.

Well getting more into this there is another tab in the sidebar menu and on clicking the document tab more features show in the drop-down format as mentioned in the below figure.

gutenberg sidebar option for block
Gutenberg Sidebar Options for Block. Source: WordPress

Here we have mentioned some keynotes on considering the above image as a primary file,

  1. Click here to flip to the Document tab
  2. Status & Visibility, here you can change the status as public or private immediately and also can set the post format to standard or any.
  3. Permalink, where you can edit the link.
  4. You can select or create categories.
  5. Add tags to your post for users to know to which category it belongs.
  6. Set featured image.
  7. Create or write a manual excerpt.
  8. Allows comments, pingbacks, and trackbacks.

As we know there are plenty more options available to create and design your post the way you want it. Therefore there are many different blocks that come with different options. Now let’s add an image block after the first paragraph you’ve written. You just need to press enter to add a block i.e image block.

Adding Images

adding a new image
Adding a New Image in Post/Page. Source: WordPress

When you click on (+) a set of blocks or a couple of options will get visible and on clicking the particular block like an image you are able to add the image block into your post. Clicking on the image tab loads on the image block as we highlighted in the below image.

gutenberg image block
Gutenberg Image Block. Source: WordPress

The Image block permits you to transfer a picture or add one from a URL or the media library. All the while, you can add alt text, title, caption, and description through the media screen settings, or the Block sidebar as demonstrated in the accompanying pictures.

wordpress media settings
WordPress Media Settings. Source: WordPress

Just after adding an image in your post

gutenberg image block setting
Gutenberg Image Block Setting. Source: WordPress

You can add an image caption and also can set the size of an image you want as shown in the above image.

Adding Files (i.e downloadable)

To add files to your blog post click the (+) icon and then click the file tab as we have mentioned below.

add files to your post page
Add Pdf files to your post/page to download. Source: WordPress

On performing the above step, the following image shows the result

gutenberg file block
Gutenberg File Block. Source: WordPress

As mentioned above you can add or upload a file from your media library and on adding the further result shows as mentioned in the image below.

add files in gutenberg
File added in Gutenberg. Source: WordPress

You can alter or erase the “Free Gutenberg PDF Checklist” title just as the download button. Also to style the format of the checklist you can add a CSS to make it however you want.

Adding a Quote

Now let’s add a quote, to do so click on the (+) icon and then select the quote tab as shown below.

add quote in gutenberg
Add Quote in Gutenberg. Source: WordPress

On executing the above step, the following picture shows the outcome.

gutenberg quote
Gutenberg Quote. Source: WordPress

Considering the above image you now want to change the font or size then you can see in the sidebar as it is mentioned. To add a quote inside the block just click inside the block and start typing as you see the result in the above figure.

Adding Media in Gutenberg

With Gutenberg, you possibly can start embedding videos from many other sites such as Facebook, YouTube, Vimeo, and many more. To embed the media click the (+) icon and choose the site for example select YouTube.

gutenberg youtube embed
Gutenberg YouTube Embed. Source: WordPress

Now copy the YouTube URL and paste and then click the embed button as shown in the figure.

gutenberg youtube embed block
Gutenberg YouTube Embed Block. Source: WordPress

Just after clicking embed, Gutenberg automatically converts the link into video as shown in the image below.

embed youtube video
Embed YouTube Video. Source: WordPress

Now on adding an independent button that makes ideal for making a call to action.

How to add a button to Gutenberg editor

As we embedded a video as shown above now at the point when you open a post for altering, you will see the new button show up in the content squares.

adding button in gutenberg editor
Adding Button in Gutenberg Editor. Source: WordPress

In the event that you select a piece of the content and snap the button, you will see something like this as shown in image below.

addi button in wordpress gutenberg
Add Button in Gutenberg. Source: WordPress

As you can see from the picture above, you can alter the text that is on the button and add a link. Moreover, you can redo the button by means of the sidebar menu to one side of the screen.

added button in gutenberg
Added Button in Gutenberg Editor. Source: WordPress

Now after a couple of clicks, you will see the selected text appear in the browser’s console as shown in the above picture.

How to Add Columns to WordPress Posts with Gutenberg

Start by exploring the post you need to add the sections to. 

To add the columns, you’ll embed another section “block” into the post. Drift over a current square and move your cursor over the top or base edge to uncover the “+” button for adding another new block. Click on (+) to add a layout as you can see in the image below.

add columns in gutenberg
Add Columns in Gutenberg. Source: WordPress

At the point when you first add the column block, it adds a square that basically contains two-passage blocks. You can start composing in either immediately.

added columns in backend gutenberg editor
Added Columns in Backend Gutenberg Editor. Source: WordPress

Easy, right?

You can add as numerous/multi-column blocks to your post as you need.

How to Add an Image in Gutenberg

Let’s start with a straightforward picture block first.

Click on the (+) icon and click media & text as shown in the image below.

add media and text block in gutenberg
Add Media and Text Block in Gutenberg. Source: WordPress

You will see three options inside the image block to upload an image.

You can pick a picture from your file, or select from an already uploaded image or insert an image from the media library.

Then, click on the ‘upload’ button and afterward select the picture you need to upload from your computer.

add media and text block
Added Media and Text Block in Gutenberg. Source: WordPress

When you select the picture, WordPress will transfer it to your media library and then on just clicking on it you can add it to your post.

added product in gutenberg
Added Product in Gutenberg Editor. Source: WordPress

Subsequent to adding the picture and text, you will see more alternatives for the block. You can make the entire block more extensive or full-width, you can likewise switch the picture and text sides.

Gracious, that’s the block in the editor lets see how it looks on the site.

product added in frontend
Product Added in Frontend. Source: WordPress

Looks great, right? 

You can unquestionably envision the amount you can accomplish with the Gutenberg editorial manager.

What happens to all of your old content?

In the event that you’ve updated your WordPress blog to 5.0 or with the latest version, then the default editor block you’ll have i.e Gutenberg block editor. The great thing about Gutenberg is that it doesn’t affect any of your old posts or content and you can without much of a stretch alter them. 

To edit an older post or content, simply edit it as you would normally do for other articles in WordPress. On the post edit block, you will see the whole content wrapper inside a single Classic block.

classic editor post
Classic Editor Old Post. Source: WordPress

The new WordPress block editor will not make any changes to your WordPress block. Now you have two options to edit your post either with a classic editor or with the Gutenberg editor. To make any changes or want to use the old editor you just simply need to click on the three-dot menu option on the top right corner just click to alter the editor and use it.

That’s it!

Now you can start using the new Gutenberg block editor for your content. If you want to make any changes like to set up the width and size of an image then simply click on the image and make the necessary changes.

Once you’re finished making all the essential changes, you can just need to tap the Update button at the upper right of the screen to save your changes.

FAQ

What is wordpress Gutenberg?

WordPress Gutenberg is a brand new block editor which gives you a new editing experience. The Gutenberg wordpress block editor introduces a modern and flexible approach to pages and posts where each piece of content in the editor from paragraph to image has its own block.

How to enable Gutenberg editor in wordpress?

To enable gutenberg editor in wordpress, you first need to install and activate the plugin and then go to settings then go to gutenberg

manager and then enable the option.

How to disable gutenberg in wordpress?

To disable the gutenberg wordpress block editor, you first need to install the classic editor wordpress plugin and then go to settings, click gutenberg and disable.

How to install Gutenberg in WordPress?

Login to your wordpress then go to the dashboard and click plugins. Then click on add new and search Gutenberg and then click on to install the plugin and activate.

Is WordPress Gutenberg free?

Yes, the Getwid plugin is a free wordpress plugin with both advanced and simple blocks for Gutenberg and is so advanced that Getwid plugin will automatically adjust your general site layout.

Which is better, Gutenberg or Elementor?

Elementor is better as it offers you more flexibility and easy to set up layout. 

Is Gutenberg a plugin?

Yes, Gutenberg is a plugin.

Conclusion

In this article, we have tried to cover all the things that are related to Gutenberg. Also, we are very much impressed with the new Gutenberg wordpress editor and we are amped up for what’s to come. Gutenberg is still generally youthful, and you can anticipate that it should fill as far as ease of use and usefulness. It will be a genuine power to deal with in the coming days.

Have you tried Gutenberg yet? If so, we couldn’t want anything more than to hear your considerations, both good and bad in the comment section below.

We hope this article helped you with figuring out how to use the Gutenberg editor and also how to refresh your old articles with the new Gutenberg Block Editor. 

In the event that you liked this article, if it’s not too much trouble, then please subscribe to our YouTube Channel to get to know about WordPress themes and WordPress video tutorials. You can also find and connect with us on Twitter and Facebook.

Leave a comment

Your email address will not be published. Required fields are marked *