Use the Tags block to display the posts’ tags. This block is primarily inside a single post template or nested inside a Query Loop block and helps to customize the appearance of the query loop.
To add a Tags block, click the Block Inserter icon when editing the page template. Search for the Tags block. Click on it to add the block to your page template.
You can also type /tags and hit enter to add the Tags block quickly.
Detailed instructions on adding blocks
Adding prefix and suffix
You can add a text before and after the tags. Select the block and click on the placeholder text to enter your text:
![The placeholder texts, Prefix and Suffix, are visible when the Tags block is selected.](https://wordpress.org/documentation/files/2023/04/tags-WP-62-prefix.png)
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 Tags block shows five buttons in the block toolbar:
- Transform to
- Drag icon
- Move arrows
- Change text alignment
- Bold and Italics
- Insert Hyperlinks
- More Rich Text Controls
- More options
![Tags block toolbar](https://wordpress.org/documentation/files/2023/04/tags-WP-62-toolbar.png)
Transform to
![Transform options for the Tags block](https://wordpress.org/documentation/files/2023/04/tags-WP-62-toolbar-transform.png)
Click on the “Transform” button to convert the Tags block into a “Group” block or “Columns” block.
Drag icon
![Drag icon in the Tags block](https://wordpress.org/documentation/files/2023/04/tags-WP-62-toolbar-drag.png)
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 Tags block](https://wordpress.org/documentation/files/2023/04/tags-WP-62-toolbar-move.png)
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
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.
Bold and Italics
Used quite frequently, Bold and Italics formatting have their own buttons on the Toolbar. The shortcuts are CTRL+b (or Command+B) for bold and CTRL+i (or Command+i) for italics.
Use the chain link icon to insert a hyperlink to your highlighted text. Or use the CTRL + k (or Command+k) keyboard shortcut.
More rich text options
Read more about Rich text options.
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.
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 ‘settings’ icon next to the Save button.
![Block settings in the sidebar](https://wordpress.org/documentation/files/2023/04/WP-62-block-editor-settings-icon.png)
Color
You can customize the text color, background color, and link color for the 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.
See this guide for more information about changing colors.
Typography
On this tab, you can adjust the Font size, Font Family, 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.
Get more details about changing typography settings.
Dimensions
Dimension controls are used to control how groups of blocks are placed alongside one another, by changing the values for padding, margin, and other dimensions.
For details refer to this support article: Dimension settings overview
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.
Changelog:
- Updated 2023-08-24
- Updated formatting
- Updated 2023-04-04
- Added information about prefix and suffix
- Added information about support for dimension settings
- Updated screenshots and video
- Created 2022-03-21
Was this article helpful? How could it be improved?
Log in to submit feedback. If you need support with something that wasn't covered by this article, please post your question in the support forums.