Skip to main content

How to Use the Gutenberg Block Editor

Need more help? We’re here for you.

The Gutenberg block editor presents an easier way to edit your pages and posts. Learn more about pages and posts here.

Getting Started

The first block is the title. By default, the next block is a paragraph block. However, you can add a different block by clicking on the “Add block” (+) button, which appears at the left of any empty block, at the top left of the editor, and at the top or bottom center of an existing block.

Each block comes with its own unique toolbar, which appears on top of the block. Apart from the toolbar, each block can also have its own block settings, which appear in the right column of your edit screen.

You can drag blocks around by clicking and holding the grid icon near the top-left corner of each block, or by using the up and down arrows.

Gutenberg block editor WordPress

Blocks

Common Blocks
  • Paragraph: write your content like a regular document, with options to align text, format text as bold, italicize, hyperlinks, or strike through, and more
  • Image: add images through upload, Media Library, or Insert from URL
  • Quote: comes with the standard editing options, alignment, bold, italicize, hyperlinks, and strikethrough
  • Heading: offers h2, h3, h4, Bold, Italic, Hyperlinks, and Strikethrough options
  • Gallery: allows you to easily add multiple photos and have them automatically arranged
  • List: come in two styles, Unordered (bulleted) and Ordered (numbered)
  • Audio: embed a piece of music, podcast, or other sound file right into your page or post.
  • Cover: select a cover image and add a title over it
  • File: add a download link to document files right in your website
  • Video: upload and embed video into your post or page
Formatting
  • Classic: use the classic editor in block form
  • Code: add formatted code for others to view
  • Custom HTML: insert code
  • Preformatted: display text while keeping any spacing or line breaks exactly as they are entered
  • Pullquote: similar to blockquotes, but designed to draw attention
  • Table: create a table in any post or page
  • Verse: designed for displaying lines of poetry
Layout Elements
  • Button: add buttons linking to other pages
  • Columns: insert text, media and other types of content into up to six columns
  • Media & Text: place an image or video side-by-side with text
  • More: truncate your blog entries so that only the first part of a post is displayed on homepage, archive pages, and in subscriber emails
  • Page Break: add pagination, or page breaks, to a page or post
  • Separator: separate two blocks of content by a line
  • Spacer: add more space in between two blocks
Widgets
  • Shortcode: can embed files or create objects with a WordPress-specific code
  • Archives: organizes your previously published posts by month. 
  • Calendar: insert a calendar
  • Categories: organizes your previously published posts by category
  • Latest Comments: displays the most recent comments readers have left on your blog
  • Latest Posts: displays your most recent posts
  • RSS: pulls posts from an RSS feed
  • Search: add search bar 
  • Tag Cloud: display tags in a graphic cloud formation

Documents Settings

Each post and page contains a Document Settings module in the right column of the editor screen. This is where you can add tags and categories, choose a featured image, see and change the status of your post, and more. 

Last updated: July 2019