Facebook Pixel

Our website is made compliant with the GDPR requirements, Click here to view the updated privacy policy.
Like most websites we use cookies for various features according to our privacy policy. We hope that’s ok, if not feel free to disable cookies in your browser.

I ACCEPT
Contact Us

How to use the new WordPress Editor Gutenberg

By Sreeshma Dasan K, Posted on January 3rd, 2020

In Wordpress updates

0

As of WordPress 5.0’s release on December 6, 2018, the Classic Content Editor was replaced with a brand-new block editor known as Gutenberg. The “Gutenberg” is also known as the “WordPress editor” or “block editor”.

The new block editor brings with it a completely different approach to content creation. You can create content specifically in the form of ‘blocks.’ And in this post, you’re going to learn exactly how to use those blocks and create gorgeous blog posts and pages.

Whether you’ve updated your site to WordPress 5.0 or not done it yet, you can follow on to learn the steps to use the new Gutenberg block editor to build content and layouts at your site.

Before we dive to the new Block editor, let us first compare and know the differences between Gutenberg Block Editor along with the Classic Editor.

Block editor VS Classic editor

Here’s a view of the classic editor in WordPress

If you upgrade to WordPress 5.0, then this is what the new Gutenberg block editor looks like:

 

The Classic editor and Block editor are entirely different editors for creating content in WordPress.

The old classic editor was a basic text editor with formatting buttons very akin to the Microsoft Word.

The new editor uses an entirely different approach, called ‘Blocks’ (hence, the name Block Editor).

Each block can be used to add specific content and you can edit the content independently of the other blocks. You can add blocks for each image, paragraph, galleries, videos, audio, lists, and many more. There are blocks for all common content elements.

The block editor has made things so easy! For example, if you want to add a table to content, you just simply need to add a table block, select the specifications of columns and rows you need, and start adding content.

No such options are available in the classic editor where in order to add a table, you would need to a suitable plugin that adds table.

Creation of content is also easy where you can drag and drop and move the block to the desired location. You can also save blocks as reusable blocks that can be used again.

So that was a brief intro just to explain that the Gutenberg block editor is far easier than a then classic editor.

Besides you can also add the functionalities of the Gutenberg block editor by using Gutenberg plugins. There are many Gutenberg compatible plugins that offer customizable blocks.

 

A quick tour of the block editor interface

Before you start adding some blocks, let’s go over a quick run-down of the elements of the main block editor interface

 

(1) You can add new blocks using the button

(2) These are the undo/redo buttons

(3) Document button gives you access to document settings, involving things like categories & tags, featured images, etc. This is like the current sidebar in the WordPress editor

(4) This gives you access to settings that are specific to that block especially when you have an individual block selected

(5) Title Bar lets you add the title of your content

(6) Once you add some blocks, you can add and edit your post’s content here

(7) This is where you can see a live preview of your post. The publish/update your post helps you to publish or update the posts as the name suggests.

 

Adding a new blog post or page

In order to start a new post, you can simply log in the Admin Dashboard. Simply click on Posts » Add New menu from the WordPress admin.

If you are creating a page, then go to Pages » Add New menu.

This will launch the new block editor. You can also refer to the image given above.

 

Add a block in Gutenberg

By default, you can see the Title block as the first block of every post or page. You can add the title here.

To add a new block, all you need to do is click the +Plus icon and select the type of content you want to add.

 

To add a Paragraph Block

By default, the next block is a paragraph block. This allows users to start writing the text using the paragraph block.

However, if you want to add something distinct, then you can click on the add new block button present on the top left corner of the editor, below an existing block, or the left side of a block.

On clicking on the button, you can see the add block menu with a search bar on top and commonly used blocks below.

You can click on tabs to browse block categories or type in the keyword to quickly search for a block. You can select the block that you want to add.

 

To add an image block

To add an image anywhere in your blog post, all you need to do is hover over the spot where you want to insert your image.

When you do that, you will see the +Plus icon appear. Clicking on it will open the block list, which will help you choose the Imageblock.

When you do that, you’ll be able to upload a new image or select an image from your Media Library, just like you do with the current WordPress editor.

 

To add a media and text block

You can also add text beside an image which was not possible with the classic editor.

You simply need to click on the circled plus sign and click on the Media and text block icon.

 

To add a link to the text

To add a link to a text you can simply click on the text, Choose the insert link icon in the top of the block and paste the URL link in the destination URL box and don’t forget to give open in a new tab and click on apply.

 

Add a YouTube embed block

To embed a YouTube video, you follow an almost identical process:

  • Hover over where you want to embed your YouTube video
  • Click the circled plus icon
  • Go to the Embeds tab
  • Choose YouTube

Then, all you need to do is paste in the URL to the video, click Embed, and you’ll see the embedded video right there in your post.

 

Settings in each Block                                                                                                                        

Each block comes with its toolbar which you can see at top of the block. The buttons in the toolbar would change depending on the block you are editing.

For example, in a paragraph block, you can see the formatting buttons like text alignment, bold, italic, and strikethrough buttons.

Apart from the toolbar, each block can also have its block settings which would appear in the right column of your edit screen.

If it is an image block you can see the following settings. You can change the alignment as left, right or centre. You can also give the full width. On clicking the three dots you can change the settings such as the duplicate the image.

Apart from the toolbar, there are settings which would appear in the right column of your edit screen. Here you can change the image dimension (height and width) etc.

 

Moving a Block

The Gutenberg blocks are easy to arrange. You can easily move the blocks to the desired position by simple drag and drop or using the arrows. For the complete tutorial, you can the article on ‘How to move a block.’

 

Saving and reusing Gutenberg blocks

Gutenberg blocks can also be saved and reused individually. This is quite a useful feature as it saves a lot of time especially for bloggers who frequently need to add specific content snippets to their articles.

To save a block from further use you can simply click on the menu button which is located at the right corner of each block’s toolbar. From the menu, select ‘Add to reusable blocks’ option.

You will be asked to provide a name for this reusable block. Enter a name for your block and then click on the Save button.

Your block will then be saved as a reusable block. You can find your block in the ‘Reusable’ tab. You can also find it by typing its name in the search bar.

WordPress database stores. All reusable blocks and you can manage them by clicking on the ‘manage all reusable blocks’ link where you can edit or delete any of the reusable blocks.

 

Publishing and post settings in Gutenberg

You can find the publish button on the top right side of your post.

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more. You can add all these details in the right column in the editor screen.

You can also save you post as a draft by clicking on the Save Draft Option.

The ‘Preview’ button helps you preview the post before publishing.

 

Plugin Options in Gutenberg

You can enhance the Gutenberg blogs by adding your own Gutenberg block Plugin. There are many Gutenberg Block plugins available in the market that can extend the functions of your Gutenberg blocks.

These help you to customize your website and provide many blocks that are not available in the Gutenberg. It helps you build a perfect website or even create a landing page of your way according to your requirement. For example, Guteblock is a simple Gutenberg compatible plugin that helps you create an elegant website.

So, Gutenberg Block editor is really cool and helps you create attractive content in a whole new easier and smarter way!

Sreeshma Dasan K

Sreeshma Dasan K is a Content Writer with passion for writing. She holds a first-class master’s degree in General Biotechnology. Her writings cover a vast area such as Women Empowerment, Science and Technology, Environment, Nature and Gaming.

Leave a Comment

Please confirm that you’re happy for us to store your data in line with our Privacy Policy.

Do you want to get the latest happenings in the digital world straight into your inbox? If yes, take a step forward and sign up for our monthly Newsletter


Sweans Technologies Ltd, Registered in England with registered office at 82b High Street, Sawston, Cambridge, CB22 3HJ Company No 09082858 and VAT No GB275104027