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
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
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.
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:
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:
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:
You can also add metadata just like alt text, link, size, etc to the image uploaded.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.