{"id":16357507,"date":"2023-06-27T13:34:53","date_gmt":"2023-06-27T13:34:53","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16357507"},"modified":"2023-06-27T14:16:32","modified_gmt":"2023-06-27T14:16:32","slug":"avatar-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/avatar-block\/","title":{"rendered":"Avatar Block"},"content":{"rendered":"\n
Go to the List of Blocks<\/a><\/p>\n\n\n\n Use the Avatar<\/em> 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 <\/em>block <\/strong>to include the post author’s avatar in the query.<\/p>\n\n\n\n To add the Avatar <\/em>block, click the Add block<\/strong> button to open the block inserter pop-up window and choose the Avatar <\/em>block.<\/p>\n\n\n\n If you want to add one in the Query Loop<\/em> block, be sure to add it inside the Post Template<\/em> block.<\/p>\n\n\n\n You can also use the keyboard shortcut \/avatar<\/kbd> to quickly insert an Avatar<\/em> block.<\/p>\n\n\n\n Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n 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 <\/em>block, and the toolbar will be displayed.<\/p>\n\n\n\n There are six buttons on the Avatar<\/em> block toolbar:<\/p>\n\n\n\n Click on the \u201cTransform\u201d button to convert the Avatar <\/em>block into a \u201cGroup\u201d or \u201cColumns\u201d block.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n The up and down arrow icons can be used to move the block up and down on the page.<\/p>\n\n\n\n Get more information about moving a block within the editor<\/a><\/p>\n\n\n\n Use the change alignment tool to align the Avatar <\/em>block. The following is a list of the block align options:<\/p>\n\n\n\n Note that the align option is only available if the Avatar<\/em> block is inside a container block.<\/p>\n\n\n\n The duotone filter lets you create a two-tone color effect without losing your original image.<\/p>\n\n\n\n The Options button on a block toolbar gives you more features to customize a specific button.<\/p>\n\n\n\n Read about these and other settings.<\/a><\/p>\n\n\n\n The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings <\/strong>button next to the Publish <\/strong>button.<\/p>\n\n\n\n The block settings panel consists of two tabs \u2013 Settings <\/strong>and Styles<\/strong><\/p>\n\n\n\n You can adjust various settings and add additional CSS classes for the Avatar<\/em> block. The panel is divided into Settings <\/strong>and Advanced<\/strong> sections.<\/p>\n\n\n\n Settings<\/strong><\/p>\n\n\n\n Here are the options available in the Settings<\/strong> section:<\/p>\n\n\n\n Advanced<\/strong><\/p>\n\n\n\n In the Advanced<\/strong> section, you will see a field to add additional CSS classes to customize the appearance of the Avatar<\/em> block. There’s also the Apply globally<\/strong> button if you want to apply the selected block’s settings to all Avatar <\/em>blocks on your website.<\/p>\n\n\n\n The Avatar<\/em> block has two styles settings \u2013 dimensions<\/strong> and border<\/strong>.<\/p>\n\n\n\n Dimensions<\/strong><\/p>\n\n\n\n The Avatar <\/em>block provides dimension settings options to change padding and margin size.<\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Block toolbar<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
\n
Transform to<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Drag icon<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Move arrows<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Align<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
\n
Duotone filter<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Options<\/h3>\n\n\n\n
Block settings<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Settings<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
\n
<\/figure>\n\n\n\n
Styles<\/h3>\n\n\n\n