List Block

The List Block lets you create and add a bulleted or numbered list …

WordPress Gutenberg Blocks – List

WordPress Gutenberg - List Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

List Block Description

The List Block lets you create and add a bulleted or numbered list …

Add lists to WordPress using the List Block

(Add lists to WordPress using the List Block)

How To Use The List Block

To add a List Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘List’ block (in Most Used or Common Blocks section), or
    • Add the ‘List’ block in the Content Area.
  • Type your list.
  • Use the tools in the List Block Editor or Block Settings section to edit your list.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘List’ block …

'Add Block' Tool - Add List Block

(‘Add Block’ Tool – Add List Block)

Or, select a List Block in the Content Area

Add a List Block from the Content Area

(Add a List Block from the Content Area)

After adding a List Block, type or paste in your list content …

Type in your list items

(Type in your list items)

After adding lists:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A List Block

To edit a List Block:

  • Click inside the List Block to select it.
  • Use the Block Editor tools to:
    • Select the type of list you want from the Block Editor tools (i.e. bulleted or numbered)
    • Format text in your list items (bold, italics, strikethrough)
    • Add a hyperlink to text in your list
  • Use the Block Settings to change the style of the list.

Edit your list

(Edit your list)

You can also nest images in your list …

Nest an image in your list

(Nest an image in your list)

See our tutorial on using Image Blocks for more details.

Remember to update and publish your post or page to save your settings.

How To Remove A List Block

To delete or remove a list block:

  • Click inside the List Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a List Block

(Remove a List Block)

Additionally …

    • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
    • You can also convert List Blocks into Reusable Blocks.

List Block Tools, Options & Settings

The List Block includes tools, options, and settings for:

  • List Block Editor
  • List Block Settings

List Block Editor

List Block Editor

(List Block Editor)

The List Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘List Block – Additional Info’ section below.)
  • List Type
    • Bulleted (Unordered list) – Use unordered lists to display items in no particular order (e.g. a list of product benefits).
    • Numbered (Ordered list) – Use ordered lists to display items in sequential order (e.g. a checklist with step-by-step instructions).
  • List Indentation
    • Outdent list (Decrease indentation)
    • Indent list (Increase indentation)
  • Format List
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

List Block Editor

(List Block Editor)

List Block Settings

List Block Settings

(List Block Settings)

List Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

List Block Settings

(List Block Settings)

List Block – Additional Info

The List Block can be converted into the following block types:

Change Block Type - List Block

(Change Block Type – List Block)

Info

Notes:

  • Changing a List Block into a Paragraph Block turns each list item into a new Paragraph block.
  • Changing a List Block into a Quote Block turns list items into paragraphs within the quote and adds a line for citing the source of the quote.

Change List Block into other block types

(Change a List Block into other block types)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to List Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor List Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Originally published as List Block.