Connect with us

How To Use The New Gutenberg WordPress Editor

Web Design

How To Use The New Gutenberg WordPress Editor

How To Use The New Gutenberg WordPress Editor

WordPress 5.0 comes with a new modernize way of creating a blog post called Gutenburg. Gutenberg is shipped with WordPress as a separate plugin which you can chose to Install or not to install. The Gutenberg editor comes with amazing features such as and auto background saving function, option to hide or the right sidebar and a lot more. This tutorial is to help Iyou to know how to use the new Gutenberg publishing tools. 

How to install and Activate Gutenberg Plugin

  • Login into your WordPress dashboard area
  • Update your WordPress core to 5.0 
  • Go to the dashboard install and activate Gutenberg plugin
  • Click on Post => Add New Post and here is what you see
the wordpress gutenberg editor interface

It is similar to the current editor  WordPress TinyMCE editor but more like a front-end editor, very simple and well structured. Gutenberg uses “blocks” to help you create your content, rather than a single text input area. 

Exploring  The block types of Gutenberg editor 

  • Click on plus icon above.
  • First category of blocks is Inline Elements. (You insert this blocks within your post)
  • The next category is Most Used Blocks (which is the blocks you frequently used)
  • The third category is the Common Blocks (this category contains the blocks basic elements in publishing)
  • The fourth category is the Farmarting blocks ( as the name sounds it contains the elements for styling the post)
  • Five on the list is the Layout category which also hold the Elements for creating specific layouts with the post or on pages.
  • Last but not the least is the Widget tab (days are gone when you need to go to the the Widget page before you can ad a widget element to the sidebar or into your post using third party plugins, with Gutenberg you can add widget elements into your post)
  • The last one is Embeds (Gutenberg has has taken it further by including an embed function which allows you to insert external links and I think this is a big step)

How to publish your first post with Gutenberg editor 

  • Click Add Title Block and type the heading of your post
  • Click inside the Write your story block and start typing the description of your post.
  • Press the preview button to view you post.

How To format a text using Gutenberg editor 

  • Select the part of the text you want to format.
  • Select any of option on the quick menu.
  • Other formatting options can be found under the paragraph icon.

How To Add image into your post using Gutenberg Editor

There are two options of add image in Gutenberg editor.

Option 1

  • Using the Add new blog icon at the top left 
  • Choose to add an inline image, gallery or a full block image.
  • Upload a new image from your system or from your media library 
  • Select image the image and import.

Option 2

  • Click on any part of the screen to create a new block 
  • Click inside the block and select image from the icons on the right side of the the screen
  • Upload image from your system or select media library to choose your image.

How To embed a link in your post using Gutenberg editor 

  • Go to the top right part and click on the plus sign 
  • Scroll down till you find the embed tab
  • Choose from the list of available option
  • Copy and past you link in the embed box
  • Press Embed to generate the visuals

How To insert widget Elemnts in Gutenberg editor 

  • Go to the top right part and click on the plus sign 
  • Scroll down till you find the widget tab
  • All eligible widget that can be added as part of post will appear as a block.
  • Select your desire block and insert it into the post.
  • Press Embed to generate the visuals

How To view the details of your post in Gutenberg 

To view you document outline in case you to know how many words, paragraph, headings and blocks your post contains, then head on to the top part of the screen and locate


Click on it and you will find all the details your post, showing you the number of words you have typed, the number of headings you have , the number of paragraphs and the the number of blocks you have in your post.

Using The Left and Right Side Of The Block

in Gutenberg Editor every block comes with it’s on quick option menu on the side if highlighted or click on. Lets look at the individual menu.

Left side of the block – move your cursor on the left side of the block and there is a top and down arrow which you can use to move the entire block up or down.

  • Right side of the block – move your cursor or select the on he right side, you will see three vertical dots which has submenu under it, lets dive deep into the function of the submenu.
  • Hide Block Settings – this menu hides and shows the main settings of the block on the right side for more screen space.
  • Edit As Html – this menu gives you the chance to edit your post in html using the code editor 
  • Duplicate – As the name sounds you can duplicate your blocks to cut down editing time.
  • Add to Reusable Block –  this menu is also a way of creating your own custom blocks that you can use in all your post, no need to create the same block. To create custom reusable block => Select Add to Reusable block from the menu => enter the details and press save. To use it click on the plus sign and scroll down below the embed block menu select to add reusable block. select to import into your post.
  • Remove Block – use this menu to delete a block.

Styling your post using block properties column in Gutenberg editor

  • Go to the right top corner and click on the gear icon besides the publish button.
  • Use the gear to show or hide the column

The properties tab has two columns

  • The document tab
  • The Block tab

The document tab

  • The document column is the main settings for the post which you can set the category, tags and set the featured image for the post.

The Block column

  • This part of the column show the the css properties of the a selected block or text where addition properties like font properties, colours, drop caps and more options.
  • An advanced option where you can have a custom case tag attached to each block.

The last function of the Gutenberg editor I want to talk about is the application settings button

  • Navigate to the top right corner locate the three vertical dots
  • Click on it and set you editor preferences.
  • Choose to display either the visual editor or the code editor
  • Choose to show the fixed top bar
  • Choose to copy the entire content

There is more that Gutenberg offers but all can not be covered under this tutorial. We hope this tutorial has benefited you. Keep exploring the interface of the the New Gutenberg editor and trust me you can achieve more with it.

Alexander Sowah is a Web Developer/Designer, Social Media Strategist, Video Editor and Animator. For any Of This Services Call Call/WhatsApp: +233244033014

Click to comment

Leave a Reply

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

More in Web Design



To Top