Block Types

Heading

The heading block creates a heading that can be modified in several different ways. The most important modification that you can make to a heading block is the heading level. Heading levels typically indicate the relative importance of the content in their section and range from H1 - H6. 

Changing the heading level will also change the size and weight of the text; however, heading levels should NOT be changed for the purpose of modifying the heading's appearance (for more information, please view the Text Content page).

Image

Image blocks are covered in their own section of the tutorial (please view the Gutenberg Editor page)

List

The list block can be used to create both ordered and unordered lists. You'll find all of the list block's editing options in the small pop-up menu that appears above the block when it's selected. Through this menu you can change the ordering of list items (ordered vs. unordered), their indentation, and the formatting of the text (bold, italicized, etc.).

Beyond ordering and indentation however, there aren't many options for modifying list blocks.

Button

Button blocks are fairly straightforward; however, there a few options available to modify them. You can change the shape and outline of the button by clicking Change block type or style in the small pop-up menu that appears above the block when it’s selected. The same options for changing the button style will also be available in the settings sidebar on the right. Additionally, you can change color of the background and text through the settings sidebar on the right.

In order to change the text displayed in the button, click on the button and begin typing. You can also change the destination that the button will lead to when clicked. Simply enter the address of the webpage that you would like the button to lead to in the "Paste URL or type to search" field. Unless you have a good reason for making the link open in the current window, you should use this feature to make external links (i.e. pointing to another website) open in a new tab. If the link is internal (i.e. pointing to a different page on the same website) then leave this option off and have the link open in the current window.

Gallery

The gallery block allows you to include a number of images in a single block. After adding the gallery block to your page, you will be presented with three options for adding images:

1. Drag images and drop them into the block

2. Upload images from your desktop

3. Select files from your media library

The images will automatically be laid out in a grid with three images (columns) per row. All of the images in the gallery will also be resized to uniform squares. If you'd like to change the number of columns in the gallery or whether the images are cropped,  select the block and you will find options for changing these settings in the right sidebar.

Editing the gallery

If you'd like to make changes to your gallery, select the block and click on the Edit gallery button (pencil icon) in the small pop-up menu above the block. You can now add and remove images as well as change their order and their captions.

If you'd like to change the formatting of an image's caption text, select the image and you will be presented with several options (bold, italic, link).

Video

After creating a video block, you will be prompted to either upload a video from your computer, select a video from the media library, or insert the URL of a video on the web. Once the video has been added to the block, you will be presented with the option to include a caption beneath the video.

The only editing options available for video blocks are concerned with alignment and can be found in the small pop-up menu above the block after you've selected it.

Quote

The quote block is useful for calling attention to a relevant quote from an external source. In the top text field you will include the quote itself, while in the bottom text field you will provide attribution for the quote (its source).

The editing options for quote blocks are limited to the standard text settings (bold, italicize, link) as well as text alignment. In the right sidebar, however, you will have the option to change the style of the quote block to other preset options.

Pullquote

The pullquote block is very similar to the quote block, except its purpose is to add emphasis to a quote from your text, not an external source. In the top text field you will include the quote itself, while in the bottom text field you will provide attribution for the quote (who said it).

The editing options for pullquote blocks are nearly identical to those available for quote blocks, except you are presented with additional options for changing the colors of the text and the surrounding lines or background (depending on which preset style you choose).

Cover

The cover block allows you to use an image or a video as a background for other content.  After you've created a cover block, you will be prompted to either upload an image/video from your computer or select one from your media library. Once you have inserted the media into the cover block, you can add paragraph, heading, or button blocks within the cover block and they will be placed in the foreground.

The cover block has a variety of editing options that can be accessed through both the small pop-up menu and the right sidebar. The options in the small pop-up menu are primarily concerned with alignment and changing the cover image/video. The options in the right sidebar allow you to modify several aspects of the block:

• Fixed Background automatically zooms in on the center of the image and locks the focal point picker.

• Focal Point Picker allows you to change the position of the background image. You can either manually enter the horizontal and vertical position percentages you would like to use, or you can click on the small circle in the image box and drag it to where you'd like the focal point to be.

• Overlay Color allows you to change the color of the overlay (by default it is black). The overlay is a layer that is placed over the image or video.

• Background Opacity allows you to make the overlay either more or less transparent (by default it is set at 50, which is semi-transparent).

Additionally, you will have access to all of the editing options available for the individual blocks contained within the cover block.

Media & Text

The media & text block provides an easy way to place media and text content next to each other, without having to modify the size and alignment of several blocks. After you've added a media & text block to your page, the media side of the block will prompt you to either upload an image/video from your computer or select one from the media library. The text side of the block contains a paragraph block where you will enter your text content.

After you've added your media and text content to the block, you will have several different editing options available. 

In the small pop-up menu above the block you will be able to change the placement of the media and text content (media left/text right or media right/text left). In the right sidebar you will also be able to change the background color of the entire block as well as the background and text colors of the paragraph block.

Spacer

The spacer block is essentially an empty, invisible block that simply adds space between other blocks. The only aspect of this block that you can change is its height, which you can find in the right sidebar. 

Columns

The columns block allows you to place content in a multi-column layout. Any block type can be used within the columns (even another columns block). 

By default, the columns block has two columns. You can add additional columns by modifying the columns setting in the right sidebar (the maximum is 6 columns). Additionally, multiple rows of content can be added beneath the columns by clicking the Add block option that appears when you hover over a block. Lastly, you will have access to all of the editing options available for the individual blocks contained within the columns block.