In this blog post we will talk about WordPress Gutenberg Tutorial. WordPress one of the most popular website builders made a major update by rolling out the new WordPress Gutenberg editor. This update will affect everyone who runs their publications, e-commerce sites, blogs, businesses and much more! We’ve made it easy for you to get started with these 10 simple steps so that you can create and share beautiful content for your website.

Step by Step WordPress Gutenberg Tutorial

Regardless of what type of website you are running through WordPress, you most likely will be affected by the new Gutenberg WordPress editor. This latest change has made it easy for anyone to create amazing website content. As soon as you update to WordPress 5.0, you’re going to find the Gutenberg editor as the default page editor. At first glance, the new Gutenberg editor will feel different and unfamiliar. Don’t fret! By the end of this WordPress Gutenberg tutorial, you’re going to be ready to make awesome webpages and content in no time. So let’s jump in!

 

via GIPHY

What is Gutenberg?

Wordpress Gutenberg Tutorial

Gutenberg was the code name used by WordPress to identify their new block editing experience in WordPress. Gutenberg may be a fully redesigned editor aimed toward replacing the TinyMCE editor that WordPress has used for, well, pretty much forever.

The editing canvas has changed from a single huge text area where you can add images and shortcodes to be an entirely new interface full of widget blocks that you can place together to build beautiful and awesome designs on your blog posts or landing pages.

Gutenberg’s goal is to make it easy and a lot more accessible for casual users to make distinctive content structures by utilizing blocks.

But aside from the new interface styling, the real change that Gutenberg will bring is in that block-based editing approach.

 

How Does The WordPress Gutenberg Editor Work?

If you’re using WordPress, I’m sure you’re familiar with how the old classic editor works – you have a single layout where you write your text, add your images, embed videos, etc.

Gutenberg changes that by allowing you to write your posts using multiple ‘blocks’.

A ‘block’ can be pretty much anything. For example, these count as a block:

  1. A paragraph of text
  2. An image
  3. An embedded video
  4. A quote
  5. A button
WordPress Gutenberg Tutorial

How to install Gutenberg?

Gutenberg can be downloaded from the WordPress repository or by checking out it inside your WordPress dashboard below “Add New” plugins. We recommend installing this on a test site.

To Install Gutenberg WordPress editor plugin

1. Go to “Plugins > Add New”

2. Search for “Gutenberg”.

3. Install and activate the Gutenberg plugin.

4. You’ll have a “Gutenberg” menu located at your bottom left-side toolbar. These steps should be enough to help you get started.

Note:- After the WordPress 5.0 update, Gutenberg will be the default WordPress Editor.

WordPress Gutenberg Tutorial

Here is what we will cover in this WordPress Gutenberg tutorial:

This WordPress Gutenberg Tutorial is divided into 10 steps. In these 10 simple steps, you’ll be able to make your own WordPress post or page using the Gutenberg Editor. It’s that quick and simple!!

  1. Using Gutenberg – The new WordPress block editor
  2. Creating a new blog post and page
  3. The interface
  4. How to add new blocks in Gutenberg
  5. Working with blocks to add content
  6. Saving and reusing blocks in Gutenberg
  7. Removing a block
  8. Adding content using embeds
  9. Adding Buttons and columns
  10. Exploring Gutenberg block settings

 

1. Using Gutenberg – The new WordPress block editor

The block editor is meant to be intuitive and versatile.

While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.

Let’s begin with covering the essential things that you might have done in the classical editor, and move on towards Gutenberg blocks

WordPress Gutenberg Tutorial

2. Creating a New Blog Post or Page Using The Block Editor

You will start creating a new blog post or page like you normally would. Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.

3. The Interface

Starting on the left you’ll see a plus button, this is where you will add a block. Again blocks are pieces of content that are gonna make up your post. You can access this plus button anywhere on your page when you click on it.

You also have an undo and a redo button which is quite helpful to edit changes you made or redo a specific thing. Next, to that, there is a little I button which gives you info about the number of words, paragraphs, etc.

WordPress Gutenberg Tutorial

Onto the right, we have Save draft, preview and Publish. Then we have the cogwheel settings button which displays common settings like document, block settings, text settings, color, and advanced settings. Right next are 3 dots which show more settings like visual view, code view, and Gutenberg Tips

WordPress Gutenberg Tutorial

4. How to add new blocks in Gutenberg

To add blocks to the Gutenberg editor :

  • Go to your WordPress interface and open post editor
  • Click the plus button in the body of the post/Page Plus button image
WordPress Gutenberg Tutorial
  • Search for the content (Paragraph, button, image, etc) to add.
  • Click the content to add the specific block to chose to add.
  • The block will be added to the page

5. Working with blocks to add content

You can add beautiful content using blocks. One of the benefits of Gutenberg is that it is point and click.

Press + button which will display various widgets such as image, paragraph, list, import from the gallery, add a cover image, add a heading, quotes, audio, etc or search for a particular block.

Here are formatting blocks which also includes the classic editor, table element and many more.

Then there are layout blocks, widget blocks and embed blocks. So there are basically tons of blocks each with a unique feature and purpose.

So select any one of them at a time and it’ll be added as content.

While adding new blocks, you will notice 3 faint icons. These are your most recently used blocks, so you can click on it and quickly change the format of the blocks to those that you wanted to.

6. Saving and reusing blocks for the future.

One of the best things about blocks is that they can be saved and reused individually. This is particularly helpful for developers who frequently need to add specific stuff in their blogs or website.

  • Simply click on the menu button(…) located at the right corner of each block’s toolbar. From there, select ‘Add to reusable blocks’ option.
  • You will be asked to provide a name for this reusable block. Enter a name for your block which you’ll easily remember and click the save button.
WorPress Gutenburg Tutorial
  • To add the reusable block simply edit the post where you want to add the reusable block and click on the add block button.
  • You will find your saved block under the ‘Reusable’ tab. You can also find it by searching for it in the search bar.
WordPress Gutenberg Tutorial

7. Removing a block

  • If you want to remove the block from your page or post, simply click the 3 dots in the block tab and click remove the block. It’s just that easy!
WordPress Gutenberg Tutorials

8. Adding content using embeds

  • You can add content like YouTube videos, blog post links, Spotify audio and much more using Gutenberg blocks. Just click the plus button to open the list of blocks—-> click embeds ——–> and choose whatever platform you want to embed content from and boom you’re done!!!!!
WordPress Gutenberg Tutorial

9. Adding Buttons and columns

  • You can add buttons in your posts which are pretty handy dandy if you wanna link them to other pages. To do that, click the plus button, search for button and click on the button icon and there you go, a button is added.
WordPress Gutenberg Tutorial
WordPress Gutenberg Tutorial
  • Similarly, you can add columns in your post by using the same method but instead of searching for a button, search for column and tada!!! , you have divided that post segment into a column. Pretty sweet!!! right?
WordPress Gutenberg Tutorial

10. Play around with Gutenberg block settings

  • To get familiar with Gutenberg blocks, I recommend playing around trying the block setting such as color, size, font, etc. to design the desired page for your website
WordPress Gutenberg Tutorial

And finally, you can preview your pages to see how it looks to the people to see your page and click publish when you’re ready to showcase your new awesome website to the World of Internet!!!!

Remember to keep previewing your page to fix anything that doesn’t fit or look out of place.

Now it may take a little time to get used to the new environment, but as they practice is the key to success!!.

via GIPHY

We hope this WordPress Gutenberg tutorial helped you learn how to use the new WordPress block editor and will try out making your own awesome webpages.

To know about Gutenberg vs Classic editor check out this link

Cheers!!

WordPress Gutenberg Tutorial