WordPress 101
Text

Learn How To Use Gutenberg Editor In WordPress

Lesson 4 Module 1

The Gutenberg WordPress Editor (a.k.a Block Editor) is now the default editor for WordPress. The idea behind it is to make editing content in WordPress more intuitive and user-friendly. It's a great tool that will help you create better content.

In this lesson, we'll take a step-by-step approach to use Gutenberg - what it does and how you can use it effectively to produce your best work.


How To Use Gutenberg Editor In WordPress 2


You'll want an understanding of how the blocks work so that when they do go live on your site, there won't any surprises or confusion about what does where.

Blocks are like building bricks - each one has its own function which can then combine with other functions into more complex structures.


Create A Blog Post

Let's start with creating a blog post using the Block Editor. To create a blog post, go to your WordPress dashboard and select Posts > Add New. It will open up the Block Editor.

add new post


With the new design, you can edit your content in a neat and orderly fashion. Each "block" of information is separated clearly so that it's easy to find what you need.

Note: At this point, make sure that your blog post is already made (preferably ready for copying and pasting from Google Docs).


Title

Add your title to the title slot.

add a title

If you’re not happy with your title, here are some ways of improving it. You can come back and make changes later on if necessary.


Body

Copy your whole blog post from Google Docs and paste it in the Gutenberg Editor. You can also search for a "Paragraph" block before pasting. The former would do the job easily.

paste your blog post in the content editor


How To Add An Image

To add an image, click on the + button, then "Image."

how to insert an image in wordpress block editor

It will open up a window where you can upload your photo or select one from the WordPress "Media Library" (your previously uploaded image).

You can use the third option "Insert from URL" if applicable.

how to add an image in block editor


Select the desired image from the library and press "select" at the bottom right corner. It's going to insert the image selected into a "Block."

select an image from media library
select an image from media library

You can change the alignment of the image to left, center or right. I'd usually align it to the center since it's better to look at centered images in the mobile view (there are a lot of mobile users!)

how to center an image in wordpress block editor


How To Delete A Block

If for any reason you need to delete a block (image, text, etc), just select the block, go to the upper right corner (3 dots/options), and click on "Remove block."

how to remove a block in gutenberg


How To Add Text to A Block 

If you want to add more paragraphs, just select + then "Paragraph." Type the desired content as per normal.

how to insert a paragraph block


How To Add A Link to a Block

There are two types of links that you can add in a blog post - internal links and external links.

Internal links are what connect all the posts and pages on your site together. They promote a sense of overall cohesiveness while also allowing you to navigate with ease from article to article without ever having to leave!

For example, if you want to link a word, phrase, button, or picture in your blog post with another one that is located on the same website, just select that element and press the "link" icon.

how to insert an internal link

Paste the URL or the destination on where you want your readers to go when they click on that specific element. Make sure to leave the settings as it is (i.e. it doesn't open in a new tab when clicked).

how to insert an internal link in the block editor

External links are links that point to another location that is not within your website (if you want to link a word or phrase in your blog post with another website that is not on the same domain name as yours).

The same process is done when doing an external link. Select the item (text, image, button), select the link icon, and paste the URL (destination). However, this time around, make sure that clicking the link will open in a new tab.


How To Add Headings

Headings are used to dividing the content of your blog post into sections. To add a "Heading," select + in Gutenberg and then click on "Heading."

how to add a heading in block editor

Use H2 once for your main keyword. The rest of your headings can be H3s and H4s (if needed).


How To Add A Space

Simply pressing the "enter" on your keyboard will not add the ideal spaces between the paragraphs. To make your formatting nicer, add a "Spacer" to really have a clean, white space between each section. 

Select + then "Spacer." 

how to add a space in gutenberg

You can leave its settings as is, or you can drag the bottom part up and down to change how much space will be in it.

how to set the amount of space in block editor


How To Duplicate A Block

Once you are happy with the space settings, duplicate the Spacer block by selecting "Options " (the 3 dots on the upper right). Then, press "Duplicate."

how to dupllcate a block

Press the up and down arrow to add spaces between the sections or paragraphs (if needed).

how to add a space in between paragraphs


There are so many blocks you can add to a blog post. To explore what else you can do to beautify your content, select + then scroll down to see the options.

block editor

You'll discover that you can add the following:

  1. List
  2. Quote
  3. Code
  4. Classic (this is the old WordPress Editor, useful for those who are more comfortable working using the Classic Editor)
  5. Preformatted
  6. Pullquote
  7. Table
  8. Verse
  9. Gallery
  10. Audio
  11. Cover
  12. File
  13. Media and Text
  14. Video
  15. Buttons
  16. Columns
  17. Group (you can combine blocks into a group)
  18. Page break
  19. Separator
  20. Shortcode
  21. Archives
  22. Calendar
  23. Categories
  24. Custom HTML
  25. Latest Comments
  26. Latest Posts
  27. RSS
  28. Social Icons
  29. Tag cloud
  30. Search

You can also use the Block Editor to embed a:

  1. Tweet
  2. YouTube video
  3. WordPress post
  4. Soundcloud content
  5. Spotify content
  6. Flickr content
  7. Vimeo video
  8. Animoto video
  9. Cloupup content
  10. Crowdsignal content
  11. Dailymotion video
  12. Imgur content
  13. Issuu content
  14. Kickstarter content
  15. Meetup.com content
  16. Mixcloud content
  17. Reddit thread
  18. ReverbNation content
  19. Screencast content
  20. Scribd content
  21. Slideshare content
  22. SmugMug content
  23. Speaker Deck content
  24. TikTok video
  25. TED video
  26. Tumblr post
  27. VideoPress video
  28. WordPress.tv video and
  29. Amazon Kindle content

In reality, you don't need all these! However, this is just to show that if you think it will help your content get better then by all means use them.


How To Control The Blocks' Settings

By default, the most important controls are going to be very near the element once you select them.

For example, highlighting a Heading to change it from H2 to H3 or H4 would simply need you to click on the H2, and then click again the desired heading (H3, H4 and so on) to change it.

how to change the settings in block editor

If you need more controls, select a Block and look for the gear icon on the upper right corner (beside "Publish ").

how to control more settings of blocks in gutenberg

Two tabs will show up by default - "Post " and "Block." Select the "Block."

For the Heading Block, opening up this tab will give you an option to change the font size, color, line height, etc.

So everytime you want to control more settings of a block, just go to the gear icon after you select the desired block to change.


How To Publish A Post

You can hit the "Preview " button to see how your formatted post looks like. You also have the option to see the mobile and tablet view, as well as open a new tab to see the full screen desktop view.

how to publish a blog post

Once you are happy with the look of it, you may hit the "Publish " button on the upper right corner. Alternatively, you may save it as a "Draft " if you want to continue working on it later on.


Note: Hitting the publish button immediately is always ideal when starting out. Nobody knows about your site yet, and it is better to publish around 10-20 posts first so it is easier to categorize them later (and organize them into your menus).

This will give you some content to play with and fix for SEO, instead of having dummy pages to start with.


Conclusion

The Gutenberg Editor is a new way to create content for your WordPress site. It's not just an editor, it also includes blocks that you can use in order to build posts and pages with ease - without the need for any coding knowledge!

However, you'll most likely only often use the basic block elements - Paragraph, Heading, Image, Spacer, and embed video.

While it is tempting to use all the bells and whistles that the Gutenberg Editor provides, it is best to use only the elements that you need for your content.

Keep the number of blocks on a page/post low. Don't use all these features at once because they will slow down load times significantly if used excessively.

Leave a comment

Comment as a guest:

Name * E-Mail *
Website
Pen