Title: Avatar block
Author: Leonardus Nugraha
Published: June 27, 2023
Last modified: May 31, 2026

---

# Avatar block

## In this article

 * [Block toolbar](https://wordpress.org/documentation/article/avatar-block/?output_format=md#block-toolbar)
    - [Transform to](https://wordpress.org/documentation/article/avatar-block/?output_format=md#transform-to)
    - [Drag icon](https://wordpress.org/documentation/article/avatar-block/?output_format=md#drag-icon)
    - [Move arrows](https://wordpress.org/documentation/article/avatar-block/?output_format=md#move-arrows)
    - [Align](https://wordpress.org/documentation/article/avatar-block/?output_format=md#align)
    - [Duotone filter](https://wordpress.org/documentation/article/avatar-block/?output_format=md#duotone-filter)
    - [Options](https://wordpress.org/documentation/article/avatar-block/?output_format=md#options)
 * [Block settings](https://wordpress.org/documentation/article/avatar-block/?output_format=md#block-settings)
    - [Settings](https://wordpress.org/documentation/article/avatar-block/?output_format=md#settings)
    - [Styles](https://wordpress.org/documentation/article/avatar-block/?output_format=md#styles)
 * [Changelog](https://wordpress.org/documentation/article/avatar-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/avatar-block/?output_format=md#wp--skip-link--target)

[Go to the List of Blocks](https://wordpress.org/documentation/article/blocks/)

Use the Avatar block to display the user’s profile picture on any post, page, or
template. Although the block can be added anywhere, the most common use is in the
single post template to display the author. Another use case is in the Query Loop
block to include the post author’s avatar in the query.

![Adding the avatar block to the post meta](https://wordpress.org/documentation/
files/2023/05/image-22.png)

To add the Avatar block, click the** Add block** button to open the block inserter
pop-up window and choose the Avatar block.

![Using the block inserter to add the avatar block](https://wordpress.org/documentation/
files/2023/05/image-23.png)

If you want to add one in the Query Loop block, be sure to add it inside the Post
Template block.

![Adding an avatar block in a query loop block](https://wordpress.org/documentation/
files/2023/05/image-24.png)

You can also use the keyboard shortcut /avatar to quickly insert an Avatar block.

[Detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/)

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/avatar-block/?output_format=md#block-toolbar)󠁿

Every block comes with unique toolbar icons and blocks specific user controls that
allow you to manipulate the block right in the editor. To view the block toolbar,
click on the _Avatar _block, and the toolbar will be displayed.

![The block toolbar for the avatar block](https://wordpress.org/documentation/files/
2023/05/image-29.png)

There are six buttons on the _Avatar_ block toolbar:

 * Transform to
 * Drag icon
 * Move arrows
 * Align
 * Duotone filter
 * Options

### 󠀁[Transform to](https://wordpress.org/documentation/article/avatar-block/?output_format=md#transform-to)󠁿

![The transform options for the avatar block](https://wordpress.org/documentation/
files/2023/05/image-30.png)

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

### 󠀁[Drag icon](https://wordpress.org/documentation/article/avatar-block/?output_format=md#drag-icon)󠁿

![The drag icon on the avatar block toolbar](https://wordpress.org/documentation/
files/2023/05/image-31.png)

To drag and drop the block to a new location on the page template, click and hold
the rectangle of dots, then drag it 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](https://wordpress.org/documentation/article/avatar-block/?output_format=md#move-arrows)󠁿

![The move arrows on the avatar block toolbar](https://wordpress.org/documentation/
files/2023/05/image-33.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](https://wordpress.org/documentation/article/moving-blocks/)

### 󠀁[Align](https://wordpress.org/documentation/article/avatar-block/?output_format=md#align)󠁿

![The align options for the avatar block toolbar](https://wordpress.org/documentation/
files/2023/05/image-36.png)

Use the change alignment tool to align the Avatar block. The following is a list
of the block align options:

 * **None**
 * **Align left** – make the block left-aligned.
 * **Align center** – make the block alignment centered.
 * **Align right **– make the block right aligned.

Note that the align option is only available if the Avatar block is inside a container
block.

### 󠀁[Duotone filter](https://wordpress.org/documentation/article/avatar-block/?output_format=md#duotone-filter)󠁿

![The duotone filter on the avatar block toolbar](https://wordpress.org/documentation/
files/2023/05/image-34.png)

The duotone filter lets you create a two-tone color effect without losing your original
image.

![Using the duotone filter for the avatar block](https://wordpress.org/documentation/
files/2023/05/image-35.png)

### 󠀁[Options](https://wordpress.org/documentation/article/avatar-block/?output_format=md#options)󠁿

The Options button on a block toolbar gives you more features to customize a specific
button.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/avatar-block/?output_format=md#block-settings)󠁿

The block settings panel contains customization options specific to the block. To
open it, select the block and click the **Settings **button next to the **Publish**
button.

![The settings button at the top right corner of editor](https://wordpress.org/documentation/
files/2023/03/settings.png)

The block settings panel consists of two tabs – **Settings **and **Styles**

![The avatar block settings panel](https://wordpress.org/documentation/files/2023/
05/image-37.png)

### 󠀁[Settings](https://wordpress.org/documentation/article/avatar-block/?output_format=md#settings)󠁿

You can adjust various settings and add additional CSS classes for the Avatar block.
The panel is divided into **Settings **and **Advanced** sections.

Here are the options available in the **Settings** section:

![The avatar block setting options](https://wordpress.org/documentation/files/2023/
05/image-38.png)

 * **Image size** – lets you adjust the avatar image size in pixels. There are two
   ways to do this: the first is by using the slider to fine-tune the size, and 
   the other is by using the pixel field to specify the image size in pixels.
 * **Link to user profile **– enable this toggle option if you want to link the 
   avatar image to the user profile page.
 * **Open in new tab** – enable this toggle option if you want to open the user 
   profile page in a new tab. This option is only available if you enable the **
   Link to user profile** option.
 * **User** – select a specific user to be displayed on the Avatar block. If left
   empty, the block will use the post or page author.

#### 󠀁[Advanced](https://wordpress.org/documentation/article/avatar-block/?output_format=md#advanced)󠁿

The List block provides the following Advanced settings options: HTML anchor, Additional
CSS Class(es), and Styles.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

![The advanced section on the avatar block's settings panel](https://wordpress.org/
documentation/files/2023/05/image-39.png)

### 󠀁[Styles](https://wordpress.org/documentation/article/avatar-block/?output_format=md#styles)󠁿

The Avatar block has two styles settings – **dimensions** and **border**.

#### 󠀁[Dimensions](https://wordpress.org/documentation/article/avatar-block/?output_format=md#dimensions)󠁿

The Avatar block provides dimension settings options to change padding and margin
size.

[Learn more about dimension controls.](https://wordpress.org/documentation/article/dimension-controls-overview/)

#### 󠀁[Border](https://wordpress.org/documentation/article/avatar-block/?output_format=md#border)󠁿

Border settings provide options to control the width and radius on each side of 
the button.

[Learn more about border settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/avatar-block/?output_format=md#changelog)󠁿

 * Updated 2026-05-25 (props @kjoyner @awetz583)
    - Updated “Advanced” section to refer to new overview page
 * Updated 2025-12-08
    - Changed the capitalization in the title to Avatar block
 * Created 2023-06-27

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/avatar-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Favatar-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

June 27, 2023

Last updated

May 31, 2026