The basic unit for adding content in the new WordPress Gutenberg editor is a block. To be more accurate, the block contains the content that you are adding. We will show you how to add a block, move a block, and identify the different blocks that you can add when working with the Gutenberg editor.

Keep in mind that the current release of the Gutenberg editor is still considered a beta version. WordPress recommends not using Gutenberg for a live site. Always create a current backup when making changes to your site so that you can recover your web site if needed.

How to use a Block

Using blocks in the Gutenberg editor involves adding a block, moving a block and then identifying the blocks that you will use when adding content to your page or post.

 

Adding a Block

The following video shows how you add a block:

 

 

The basic steps involved in adding block are:

  1. Log in to the WordPress Administrator Dashboard
  2. Open an existing page/post or Add a new page/post
  3. A new Page or Post begins with a title. If you don’t want a title at the top, then simply leave the field blank. Type in a title if you wish to use one.
  4. If you wish to Add a block, then hover over the bottom center of the block above where you want to add one. You will see the circled plus sign appear (as shown in the animated gif above). If you are at the end of your existing content you will also see the symbol for adding a block under the last block at the left end. There is also an option add a block in the toolbar at the top of the screen.
  5. When you click on the circled plus sign to add a block, you will see a pop-up window appear. The blocks that you can add are separated into three areas:
    • Recent
    • Blocks
    • Embeds
      Select the block that you wish to use. Based on the block you have selected a dialog window may appear so that you can add or format your content.
  6. Once you have completed adding your content, click on Update or Publish in the top right corner to save your changes.

 

How to Move a Block

After you have added content, you may need to re-arrange the order of the blocks. Follow the steps below in order to move a block.

 

  1. Click on the block that you wish to move
  2. Hover over the arrows to the left of the block
  3. Click on the up or down arrow depending on you want to move the block.
  4. Once you have the block in the preferred position, then click on Publish or Update in the top right-hand corner to save your changes.

 

Identifying the Blocks

There are many different blocks that you can use when adding content to your post or page. Click on the image to the left in order to see the graphic for each block that is available to you.  Widgets and Embeds are detailed in the separate associated articles linked at the end of this article.  We list them all in the table below:

 

Common Blocks
Image Block used for inserting images
Gallery Displays a gallery of images
  Heading block used for heading that is used by search engines to index structure and content of your webpage
Quote A quote block that differs from the pull quote block by way of the bar displaying the quote. A pull quote is typically a short excerpt, whereas the quote is typically longer.
  List block for displaying ordered or unordered lists
  Cover Image An image block that differs from the normal image block in that it includes a bolded title that is placed in the middle of the image
  Video a block used to display a video
Audio a block used to embed an audio file
Paragraph Block used to display a paragraph of text with the options to change capital settings, font size, background color, text color and block alignment
Formatting Blocks
Pullquote a pullquote is a short excerpt from the text of an article and used as a subheading or graphic feature
Table A block used for data placed in a table format
Preformatted Preserves the text formatting such as spaces, tabs and line breaks
Code A block specialized for displaying code. Text formatting for spaces and tabs are preserved.
Custom HTML Blocked used for custom HTML coding entries
Classic text This is a block made specifically for normal text using the classic Tiny MCE editor options
Verse This block is made for verses from literary works like poems. Linebreaks and spaces are preserved.
Layout Blocks
Separator Line graphic that can be used to separate different blocks
More “More” allows you to create a break your post into a part shown on index pages. You can see the entry after clicking on Read More. You can also edit the entry by clicking on it so that it shows something other than “Read More.” You are also able to hide the excerpt using the provided switch for the block.
Button block that allows you to create a rounded button that you can label and link to another location
Text columns allows you to create text in up to 4 columns. Considered an experimental option at this time

These are the common block types that are currently available within the Gutenberg editor. Note that all of the blocks include a field to input additional CSS classes so that you add custom formatting to that block as needed. There is also the option to add Widgets and Embeds when adding blocks. For further information please see Adding Widgets in Gutenberg or Using Embeds in Gutenberg. You should now have a good grasp of how to use a block in the Gutenberg editor.

Leave a Reply