WordPress Block Editor – Categories 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
• For additional information, see this tutorial on How To Use Post Categories In WordPress.

***

Categories List Block – Description

The Categories List block organizes and displays your published posts as a list of categories. Use this block to provide your site visitors with a useful way to discover your related posts.

How To Use The Categories List Block

In this section, we’ll cover:

• How to add a Categories List block to your content.
• How to edit and configure your Categories List block and block settings.
• How to remove the Categories 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 Categories List Block

To add a Categories List block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a Categories List block (in Most Used or Widgets section), or
  • Add the Categories List block in the Content Area.
• Use the tools in the Categories List Block Editor or Block Settings section to edit your category 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 the Categories List block…

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

WordPress now offers two types of Category blocks:

• Categories List Block – This is the block covered in detail in this tutorial (note: the block icon has been updated.Some of the screenshots in this tutorial were created using the previous icon).
• Categories Block – This block is discussed briefly below.

The Categories List block displays a list of categories based on your previously published posts by category. This block is useful for helping users find more of your posts grouped by topics.

The Categories block, on the other hand, displays the category you have assigned to the current post.

The Categories block also lets you add and format a prefix and a suffix to the category.

This can be useful for adding context when inserting a category into your post.

After adding a Categories List block, you can:

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

How To Edit A Categories List Block

To edit a Categories List block:

• Click inside the Categories List block to select it.
• Use the Block Editor tools to:
  • Reposition the Categories List block in your content using the Drag block tool and Move up and down arrows.
  • Change the alignment of the categories list.
  • Perform additional tasks using the More Options feature.
• Use the Block Settings to change category settings.

Use the Block Editor to change block alignment.

Use Block Settings to change category settings.

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

How To Remove A Categories List Block

To delete or remove a categories list block:

• Click inside the Categories 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.

Additionally…

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

Categories List Block Tools, Options & Settings

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

• Categories List Block Editor
• Categories List Block Settings

Categories List Block Editor

The Categories block editor includes tools that let you perform the following operations:

• Change block type or style (See ‘Categories Block – Additional Info’ section below.)
• Drag block
• Move block up and down
• Change alignment:
  • None – leaves the block alignment as is (Max 650 px wide).
  • Wide width – makes the block stick out on either side of regular content (Max 1000 px wide).
  • Full width – makes the block stretch over the entire width of the browser window (regular content remains within margins on either side).
  • Align left
  • Align center
  • Align right

• More Options – See How To Use Blocks to learn how to use this section.

Categories List Block Settings

Categories List block settings include:

• Block description area
• Categories Settings
  • Display as dropdown – Converts a list of categories into a single-line dropdown menu.
  • Show post counts – Displays the number of posts included under each category.
  • Show only top level categories – Displays only posts assigned to top-level categories.
  • Show empty categories – Displays categories with no posts assigned to them.
  • Show hierarchy – Display categories nested in a parent/child hierarchy. Note: This option will be disabled if you enable the “Show only top level categories” option.

• Advanced Settings

Also, refer to the following block settings tutorials for the block’s styling elements found in the Styles tab:

• Typography
• Dimensions

Categories List Block – Additional Info

The Categories block can be converted into the following block types:

• Columns block
• Group block
• Tag cloud

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

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

• To learn more about using categories, go here: Using WordPress Categories
• For tutorials on how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024