WordPress Block Editor – List Block

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

• 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’s link text.
• Italic – Add italicized text formatting to your file’s link text.
• More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
• Link Tool – Link and unlink your heading.
  • Paste the link URL.
  • Type to search and link to existing content.
  • Hit ‘Enter’ or click ‘Apply’ button to create the link.
  • Option to open link in new tab.
• 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
    • • Default
      • Small
      • Normal
      • Medium
      • Large
      • Huge
      • 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 a section of your page 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

***

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.