Basic Gutenberg Tutorial

When the WordPress version 5.0 was released, it came with one of the biggest changes to the platform of all time – the new block editor, named Gutenberg. Since its release in December 2018, a lot of folks have dedicated large blocks of time (see what I did there) to write ‘How to’ blogs for the new Gutenberg editor.

This new block editor is a major change from the previous editor, so for everyone that has used the ‘Classic’ editor, this basic tutorial is aimed to make the new Gutenberg easier to understand. So without further ado, let’s get into this.    

Difference between Gutenberg and Classic Editor

You can see the basic difference between the classic editor and the new block editor from the below illistration. The new block editor is on the left whereas the classic one is on the right side.

plr4wp gutenberg editor image
plr4wp classic editor image

You can clearly see that Gutenberg WordPress editor is much more advanced as compared to the classic editor. Although the classic editor is more like Microsoft Word, Gutenberg uses a different approach known as ‘Block’.

I’m going out on a limb here but I think that is why it is called the ‘Block Editor’.

Gutenberg looks cleaner and less jumbled than the older editor version —and useful too—the new block editor and short keys enables you to remain in the visual editor without

much interference.

It offers you more than the Classic Editor

The Gutenberg version enables you to add more types of contents in the form of different Block types. For example, if you want to add tables, you do not have to look for a plugin anymore. You can add a table block, have the ability to select your rows and columns, you can later add content.

There is so much more you can do with the Gutenberg Editor than you could with the Classic Editor. Let’s have a quick look at the Table Block – oh and this is all responsive to the device your readers are using.

plr for WordPress Table block image

How to create a new blog post using Gutenberg Editor

This is the simplest thing to do – all you need is to go to Posts > Add New, you can see this option in your WP admin menu.  If that’s a page and not a post all you need is to go to Pages > Add New from the same place, for more check to the illustration below:

plr for WordPress image on how to add new post or new page

How to add a new block

You can see this option beneath the title key; just place your cursor there to add a new block. 

So if you want to add something different you can use the plus sign to do so:

plr for WordPress image for how to add new block to your post or page

Adding a new image in Gutenberg

You have the option to add/upload image or from your Media Library, to your block as depicted below:

plr for WordPress image for how to add new image

You can also add metadata just like alt text, link, size, etc to the image uploaded.

plr for WordPress image for adding image metadata

Adding a link in Gutenberg WordPress

In order to add a link you have to go to toolbar where you can see an ‘insert link’ option as shown below:

plr for WordPress image for adding a new link

The short key is ‘Command + K’ for Mac and ‘Ctrl + K’ for PCs.

Adding shortcodes in Gutenberg WordPress posts

It works just like the way it worked in the older version. Only now there is a specific Shortcode Block. Ez-Pezy.

 You can also add an image next to text, with Media & Text block.

plr for WordPress image for the media and text block

WordPress Pages & Posts

With Classic Editor, users had a harder time when creating buttons in their Posts & Pages. The only way to do it was to either create shortcode, write code or to switch to the HTML mode. Gutenberg doesn’t have these concerns and is very smooth when it comes to Button Block.

plr for WordPress image for button block

Beautiful covers

You have the ability to add beautiful cover images to your Posts & Pages. To do this you have to try the ‘Cover’ Block. All you need to do is to simply add a cover image via upload or the media library and use it where you want it.

Don’t confuse the Cover Image with your Feature Image.

Think of it like this – your cover image (or video) can be in your header but most times it is used WITHIN your content as a kind of a visual section separater.  Your Feature Image is more of the Page or Post identifier. It only is displayed at the very top of the post/page.

Multi-column content

Making multi-column content was another issue that the Classic Editor didn’t deal with very well at all. The Block Editor allows you to include the Columns Block, which defaults to two columns.

On the right sidebar in the Block section, you can adjust the number of columns from 2 to 6 just by move the slider.

The trick is getting that slider to display when you are working in the Column Block. Sometimes you need to click inside one of the columns a couple time for the block editer in the sidebar to switch from the text settings to the column settings.

plr for WordPress image for comparing the block editors for the column block

After a couple tries you’ll figure it out.

These are just a few of the 100’s of (and growing daily) Blocks you can use in your content creation within the Gutenberg Editor.

Move the block toolbar to the top

As you may have seen in the screen captures that there is a toolbar that shows up within the different Blocks you choose. You can move this toolbar to the highest point of the editor window. Just click on the three-dot button at the upper right corner of the screen and afterward select the Top Toolbar choice.

plr for WordPress image for moving the toolbar to the top of the page

Use keyboard shortcuts

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.

Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.

For more shortcuts, click on that three-dot menu on the top-right corner of your screen again and then select ‘Keyboard Shortcuts’. This is located close to the bottom. Also you can use the shortcut Shift+Alt+H to get to the Keyboard Shortcuts.

plr for WordPress image for getting to the keyboard shortcuts in the right sidebar of the editor

Drag and drop media to automatically make media blocks

Gutenberg enables you to simply drag and drop documents anyplace on the screen and it will automatically make a block for you.

You can drop a solitary picture or video, and it will create the block for you. You can likewise drop several pictures to make a block. Ideally though, you will want to select the block you want first then add your media from within that block.

Just because you can do something doesn’t mean you should

Adding YouTube, Twitter, Facebook, Vimeo, and different embeds

Gutenberg makes adding new embed codes a breeze. There is a block for most all embed types including YouTube, Twitter, Facebook, and more. However, you can simply copy and paste the embed URL anytime, and it will automatically make a block for you.

For instance, in the event that you included a YouTube video URL, it will automatically create a YouTube embed block and show the video.

plr for WordPress image on adding the embed block

Advanced Gutenberg Block

Advanced Gutenberg is an extra plugin that you do NOT need, but if you do install & activate it,  this plugin adds a lot of blocks for well known content components like the WooCommerce product slider, testimonial, maps, counter, tabs, accordions, and then some.

It additionally gives you control on which Users can get to blocks dependent on their User Roles. You can make User/Client profiles and select which blocks they can include.

Stackable Gutenberg Block 

Stackable – Gutenberg Blocks is another plugin you do NOT need but if you install & activate it, you will have some extra “feature-rich” blocks that will come in handy when creating awesome looking front end & landing pages for your site.

It comes with a pricing block, video popup block & call to action block just to name a few.

These are just a couple more of the hundreds of new Gutenberg Blocks being added daily to the WordPress Plugin repository.

Saving and Reusing Blocks in Gutenberg

A standout feature of blocks is that they can be saved and reused separately.

This is especially useful for bloggers who frequently need to add the same content pieces to their articles. Like an Author Box, a particular Call To Action or anything that you want to reuse over and over without having to re-type everything.

Basically you click on the vertical 3-dots button situated at the correct corner of each block’s toolbar. From the menu, select ‘Add to reusable content’ option.

plr for WordPress image on creating a reusable block

Now the block editor will save the block as a reusable block. Just give it a name and click on save.

Since you have saved a reusable block, let’s cover how to include the reusable block into different WordPress posts and pages on your site.

Just edit the post or page & where you need to include the reusable block, click on the Add block button (circled plus sign). Then locate your saved block under the ‘Reusable’ tab. You can likewise locate it by typing its name in the search bar.

plr for WordPress image on adding the already created reusable block

You can also edit or delete any of your reusable blocks as shown here. NOTE: Currently, to get to the Block Editor page, you need to click on the ‘Manage All Reusable Blocks’ link located at the bottom of the Reusable Blck Section as shown in the ABOVE IMAGE

plr for WordPress image on editing a reusable block

How can I deactivate Gutenberg and bring back the Classic Editor?

Some folks are not prepared to do the change over to the Gutenberg editor because of one reason or another. Eventually you will need to but in the meantime, you can simply install and activate the Classic Editor plugin.

Once you have it activated go into the settings and select the editor you want to be the default and then select ‘yes’ so you can choose which editor to use on a post by post or page by page basis.

plr for WordPress image on setting up the Classic Editor Plugin

Would I be able to continue using the old editor?

You can continue to use the Classic Editor but from what I understand, it will only be supported until 2021. That is a ways off so things may change between now and then. My suggestion is to begin using and getting used to the Gutenberg Editor.

The more you use it the easier it becomes. Once you get comfortable with it you will wonder why you waited so long to start using it.

What about my older content created with the Classic Editor

The older content on your site that was created with the Classic Editor will be just fine. If you ever need to edit any of those older Posts or Pages, try to use the Classic Editor. You can easily convert that content into the Block format but since some formatting might be lost in the conversion, you should only do so AFTER you are comfortable with the Block Editor.

To learn more about the Block (Gutenberg) Editor or most anything about Today’s WordPress, check out any of my individual 12 Volumes or for the best possible option, have a look at the All-Access Pass.

Let me know if you have any questions or suggestions by posting in the comments below or contact me directly by using the Contact Us form.

Leave a Reply

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