Using Blocks in the Gutenberg Editor

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.

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:

https://youtu.be/IvVe3btmKfA

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 to 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 how 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
	File	Block used to create a link that can be clicked on to download a file
	Subheading	Block used for subtitle text that is smaller than title text yet larger than paragraph text
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
	Page Break	Allows you to set a pagebreak in your text
	Spacer	Adjustable Block that allows you to create a space in your content
	Columns(beta)	This Block allows you to create columns in your text blocks

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 can 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  Using Widgets in Gutenberg. You should now have a good grasp of how to use a block in the Gutenberg editor.