Oct 292018
 

WordPress Gutenberg Top Left Editor Options post talks about the different blocks you can add to a post or page.

Last Updated: November 2, 2018

Latest News: I added another tutorial to the list.

The following tutorial shows you how to manage Gutenberg top left editor options. It also shows you all the different block groups available for you to use. Each block group has a list of other blocks. This makes it very simple to add just about anything you want to a post using blocks. There is a large number of blocks for you to choose from. I am sure that you will find all the blocks needed for your posts.

WordPress Gutenberg Editor Tutorials:

WordPress Gutenberg Top Left Editor Options

Step 1 ) The following image shows you the top left hand side options for the editor. Here you have the option to add the following.

Gutenberg Top Left Editor Options

  • Add Block
  • Undo and Redo
  • Content Structure
  • Block Navigation

wordpress-gutenberg-editor-top-left-options

Group Of Blocks

Step 2 ) The following image shows you a list of groups of blocks available in Gutenberg. Each group of blocks contains a list of blocks for that group. This allows you to easily select the correct block you wish to add in your post.

Gutenberg Group Of Blocks

  • Most Used
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds

wordpress-gutenberg-editor-group-of-blocks

Common Blocks

Step 2-a ) The following image shows you a list of different blocks in the Common Blocks group area.

Gutenberg Common Blocks

  • Paragraph
  • Heading
  • Image
  • Gallery
  • List
  • Quote
  • Audio
  • Cover
  • File
  • Video

wordpress-gutenberg-editor-common-blocks

Formatting Blocks

Step 2-b ) The following image shows you a list of different blocks in the Formatting Blocks group area.

Gutenberg Formatting Blocks

  • Code
  • Classic
  • Custom HTML
  • Preformatted
  • Pullquote
  • Table
  • Verse

wordpress-gutenberg-editor-formatting-blocks

Layout Elements Blocks

Step 2-c ) The following image shows you a list of different blocks in the Layout Elements Blocks group area.

Gutenberg Layout Elements Blocks

  • Button
  • Columns
  • Media & Text
  • More
  • Page break
  • Separator
  • Spacer

wordpress-gutenberg-editor-layout-elements-blocks

Widgets Blocks

Step 2-d ) The following image shows you a list of different blocks in the Widgets Blocks group area.

Gutenberg Widgets Blocks

  • Shortcode
  • Archives
  • Categories
  • Latest Comments
  • Latest Post

wordpress-gutenberg-editor-widgets-blocks

Embeds Blocks

Step 2-e ) The following image shows you a list of different blocks in the Embeds Blocks group area. As you can see there is a huge number of third-party social media content blocks like (YouTube, Twitter, Facebook etc.) you can add. This makes it very easy and simple to add social media videos and more to your site

Gutenberg Embeds Blocks

  • YouTube
  • Twitter
  • Facebook
  • Instagram
  • Vimeo
  • Soundcloud
  • Spotify
  • Flickr
  • Animoto
  • Cloudup
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker
  • TED
  • Tumblr
  • VideoPress
  • WordPress
  • WordPress.tv

wordpress-gutenberg-editor-embeds-blocks

 
 

Content Structure Information

Step 3 ) The following image shows you the content structure information of a post. From the information below, you can see how handy this information will become once you start using Gutenberg. The information can be important for future references.

Content Content Structure Information

  • Words = 15
  • Headings = 0
  • Paragraphs = 0
  • Blocks = 1

wordpress-gutenberg-editor-top-left-options-content-structure

Block Navigation

Step 4 ) The following image Block Navigation allows you to select from the following options. In this example you can see Classic block to select. As you start adding blocks in a post this list will show those blocks added. This allows you to easily select the block you want to work on. This option becomes handy when you have a large number of blocks to manage.

Block Navigation

  • Classic

 

wordpress-gutenberg-editor-top-left-block-navigation

==============================

That is how simple it is to manage and add blocks to your posts and pages using the top left editor options.

If you have any questions please let me know. I will be updating this tutorial from time to time.

Enjoy.

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.