List Block

The list block is a simple, text-only block for adding bulleted or numbered lists.

Overview

The list block is a simple, text-only block for adding bulleted or numbered lists. It's sole purpose is for displaying content in a simple list format.

List Block Settings

The following settings are available when using the list block:

  • List Type: Bulleted or Numbered
  • Indent & Outdent list items
  • Bold
  • Italic
  • Strikethrough
  • Links
  • Additional CSS Class

If you need something other than what's listed above, you will need to use a different type of block. The list block only provides these basic options.

There are a few ways you can customize a list block's style & settings.

Customize a List Block

The following settings are customizable for each and every list block on your site.

  • List editing tools: Modify the content within your list block. These appear directly above the block, once you click inside of it.

List block editing tools

  • The only advanced list setting option is for an additional CSS class. Unlike paragraph blocks, you cannot change the font size, font color or background color of lists.

List block advanced settings panel

List Editing Tools

You can use the following editing tools within your list blocks. These are very similar to the list editing tools available in the WordPress classic editor (aka: TinyMCE).

List block editing tools diagram

Bulleted or Numbered List

The first two buttons in the list editing toolbar are for switching between a bulleted list and a numbered list.

Use a bulleted list when the order of your list items does NOT matter. If your third list item could easily be moved to #1, and it would not impact the meaning of the list, then a bulleted list is what you want.

Use a numbered list when the order DOES matter. Step-by-step instructions are a good example of when the order matters.

Indent & Outdent

These two options are for creating more complex lists. In a way, it allows you to create lists within lists.

If you have list items that should be sub-items of a parent item, you can use the indent button.

Here's an example:

List block indent/outdent example

In the classic WordPress editor, you used to be able to use the TAB key to achieve this. However, in the new WordPress editor, using the TAB key will move your cursor to the next block.

Bold, Italics & Strikethrough

These options were also available in the classic WordPress editor, and they can be used the same way in Gutenberg.

Gutenberg editor - bold, italic & strikethrough options

Simply click the B for bold, the I for italics, and the ABC for strikethrough.

Links

You can link an entire list item, or just part of it. This works the same way as it always has:

  • Highlight the text you want to link
  • Click the link icon
  • Type or paste in your URL
  • Click Enter

Switch a List to a Different Block

You can only switch a list block to two other block types:

  • Paragraph
  • Quote

Each one works a bit differently:

Converting list blocks to different types

Switch a List to a Paragraph Block

When you convert a list to a paragraph, each list item becomes its own paragraph block. So essentially, you go from having 1 list block to having 3 paragraph blocks.

Switch a List to a Quote Block

When switching to a quote block, each list item becomes its own paragraph within your quote, except for the last item.

The last list item will become your <cite> element. This is used to identify the author of the quote.

Learn About Other Gutenberg Text Blocks

Updated: February 27, 2018