WordPress Block Editor – List Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

List Block – Description

The List block lets you add bulleted and numbered lists to your content.

How To Use The List Block

In this section, we’ll cover:

• How to add a List block to your content.
• How to edit and configure your List block and block settings.
• How to remove the List block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A List Block

To add a List block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the List block (in Most Used or Text section),
  • 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…

Or, select a List block using the Inserter tool in the Content Area.

Either of the above methods will add a List block to your content.

After adding a List block, type or paste in your list.

After adding a list to your content, you can:

• Edit and configure the 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)
  • Create lists within lists (i.e. nested lists) using the editor’s indent and outdent buttons.
  • Format the text in your list items (e.g. bold, italics, strikethrough, etc.)
  • Add a hyperlink to text in your list items.
• Use the Block Settings to change various settings on your list.

Let’s go through the above:

You can change your list from bulleted to numbered and nest list items using the indent (space key) and outdent (backspace key) editor tools.

You can also nest an image inside a list. See our tutorial on using an Image block if you need help using images in the block editor.

After adding a list, you can easily change the font size in the Typography section.

Either:

• Select a preset size from the Font size drop-down menu, or
• Enter a font size in pixels into the Custom field.

Click the Reset button in this section to return the text in your list to its default font size.

You can also change the text and the block background color using preset or custom color palettes.

If you’re using an ordered list, you can also configure:

• The starting number of your list – e.g. if you set the value to ‘3’ your list will start from the number ‘3’ (i.e. 3, 4, 5, etc.)
• Reverse the list numbering order – e.g. change your list order from 1,2,3 to 3,2,1.

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 from your content:

• Click inside the List block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the List block from your content.

Additionally…

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

List Block Tools, Options & Settings

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

• List Block Editor
• List Block Settings

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.)
• Drag & Drop Tool
• Move Up and Down Tool
• 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)
• Bold – Add bold text formatting to your file text.
• Italic – Add italicized text formatting to your file text.
• Link Tool – Link and unlink text in your block.
  • Custom URL – Paste a URL or type a search term to bring up a list of posts, pages, or custom post types on your site containing your search term.
    • Clicking on the Link settings button brings up the following options:
      • Open the link in a new tab (on/off).
    • Apply button. Once the Apply button is clicked, your link displays the following additional options:
      • View the link.
      • Edit the link.
      • Delete the link.
• More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
• More Options – See How To Use Blocks to learn how to use this section.

List Block Settings

List block settings include:

• Block description area
• Typography
  • Font Size – Depending on the theme used, font sizes may include the following:
    • Default
    • Extra small
    • Small
    • Normal
    • Medium
    • Large
    • Extra large
    • Huge
    • Gigantic
    • Custom
  • Custom font size
    • Value field – Enter a value in points
    • Reset – Resets font size to default.
  • Line height – Enter a line height value (decimal values allowed, e.g. 2.5)
• Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Reset button to restore the default text color.
  • Text color
  • Background color
• Ordered List Settings:
  • Start value – Enter the number you’d like your list to start with.
  • Reverse list numbering (on/off) – Enable this option to reverse the numbering order of your list (e.g. from 1,2,3 to 3,2,1).
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

List Block – Additional Info

You can convert a List block into the following block types:

• Paragraph block
• Heading block
• Columns block
• Group block
• Quote block
• Pullquote block
• Reusable block

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.

Additionally:

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

Congratulations! Now you know how to use the WordPress content editor’s List block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024