WordPress Block Editor - List Block

WordPress Block Editor – List Block

WordPress Block Editor - List Block

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

***

List Block – Description

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

List block.
Add 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…

Add block tool - List block.
Use the Add Block tool to insert a List block into your content.

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

Inserter tool - List block.
Add a List block to your content using the Inserter tool.

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

List block.
List block (no list items added).

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

List block with added list items.
List block with added list items.

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.

List editing functions.
Change your list from bulleted to numbered and nest list items.

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.

Nest images inside lists.
Nest an image in your list.

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.

List block settings - Typography.
Change the font size of your list items.

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

List block settings - Color settings.
Change your list item’s text and block background colors.

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.
List block settings - Ordered list settings.
Ordered list settings.

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.
List block: More Options menu - Remove block.
Use the More Options menu to 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

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.)
  • 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.
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:

List block - Change block type or style tool.
Change the List block into other block types.

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.
List block - Transform lists into other block types.
Transform lists into other block types.

Additionally:

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

Sample post with List block added to content.

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

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top