Post Tags Block

Go to the List of Blocks

Use the Post Tags block to display the posts’ tags. This block is primarily nested inside a query loop block and helps to customize the appearance of the query loop. 

To add a Post Tags block, click the Block Inserter icon when editing the page template. Search for the Post Tags block. Click on it to add the block to your page template.

Video showing how to add Post Tags block

You can also type /post-tags and hit enter in a new paragraph block to add the Post Tags block quickly. 

How to add Post Tags block quickly
How to add Post Tags block quickly

Detailed instructions on adding blocks

Block Toolbar

To view the block toolbar, click on the block and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Post Tags block shows five buttons in the block toolbar:

  • Transform to
  • Drag icon
  • Move arrows
  • Change text alignment
  • More options
Post Tags block toolbar
Post Tags block toolbar

Transform to:

Transform options in Post Tags block
Transform options in Post Tags block

Click on the “Transform” button to convert the Post Tags block into a “Group” block or “Columns” block. 

Drag icon:

Drag icon in the Post Tags block
Drag icon in the Post Tags block

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows:

Move arrows in the Post Tags block
Move arrows in the Post Tags block

The up and down arrow icons can be used to move the block up and down on the page.

Get more information about moving a block within the editor.

Change text alignment:

Change text alignment in Post Tags block
Change text alignment in Post Tags block

Click the “Change alignment” button in the Block toolbar to display the alignment drop-down. You can align the block text to the left, make it center-aligned or align it to the right.

More option

The More option on a block toolbar gives you more features to customize the block. These controls give you the option to copy, duplicate, and edit your block as HTML.

More option in the Post Tags block
More option in the Post Tags block

Read about these and other settings.

Block Settings

In addition to the block toolbar, every block has specific options in the editor sidebar.

If you do not see the sidebar, click the ‘cog’ icon next to the Save button.

How to turn on the Block Settings sidebar
How to turn on the Block Settings sidebar
Post Tags Block Settings
Post Tags Block Settings

Color

You can customize the text color, background color, and link color for the Post Tags block. The color options available will vary based on the theme. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.

Color settings in the Post Tags Block Settings
Color settings in the Post Tags Block Settings

See this guide for more information about changing colors.

Typography

On this tab, you can adjust the Font size, Appearance, Line height, Letter case, and Letter-spacing. These settings allow you to change a block’s font size, appearance, line height, letter casing, and spacing.

Typography settings in the Post Tags block
Typography settings in the Post Tags block

Get more details about changing typography settings.

Advanced

The “Advanced” tab lets you enter character(s) that can be used to separate the category terms. The default setting is a comma.

You can also add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.

Advanced setting in Post Tags block
Advanced setting in Post Tags block

Changelog

  • Created 2022-03-21

Was this article helpful? How could it be improved?

First published

Last updated