Business · Gutenberg
Avatar Group block for WordPress
Overlapping stack of user or team avatars with an optional +X counter bubble.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Overlapping stack of user or team avatars with an optional +X counter bubble.
Inspector panels on this block: Avatars. Those titles come from index.js, not from a shared template.
Behavior controls: “Stack Direction” options: Right (left overlap), Left (right overlap).
Avatar Group has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Business → search “Avatar Group” (block name `blockenberg/avatar-group` in block.json). Style it in the sidebar after insert.
How to use Avatar Group block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Avatar Group”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Avatars. Set “Alt Text”, “Max Shown”, “Stack Direction”, “Avatar Size (px)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Alt Text | Text field in the inspector. Saved as `avatars`. |
| Max Shown | Numeric range control in the inspector. block.json default: 5. Saved as `maxShown`. |
| Stack Direction | Select control; the chosen value is saved on the block. Options: Right (left overlap); Left (right overlap). block.json default: right. Saved as `direction`. |
| Avatar Size (px) | Numeric range control in the inspector. Range 24–100. block.json default: 48. Saved as `avatarSize`. |
| Overlap (px) | Numeric range control in the inspector. block.json default: 14. Saved as `overlap`. |
| Border Width (px) | Numeric range control in the inspector. Range 0–8. block.json default: 3. Saved as `borderWidth`. |
| Label Text | Text field in the inspector. Saved as `label`. |
| Counter | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `counterTypo`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Avatar Border | Color control in the inspector. block.json default: #ffffff. Saved as `borderColor`. |
| Counter Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `counterBg`. |
| Counter Text | Color control in the inspector. block.json default: #ffffff. Saved as `counterText`. |
When this is the right block
- Overlapping stack of user or team avatars with an optional +X counter bubble — that is the job of Avatar Group, not a generic content block.
- Use it when you need the editor control labeled “Alt Text”, which exists on this block’s inspector.
- It matches pages about avatar, group, users.
- Inserter grouping: company, service, and operations pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Avatar Group block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Avatar Group”. It sits under Business. After insert, open Avatars and set “Alt Text”, “Max Shown”, “Stack Direction”, “Avatar Size (px)”.
What makes Avatar Group different from other Blockenberg blocks?
Overlapping stack of user or team avatars with an optional +X counter bubble. Inspector labels on this block include “Alt Text”, “Max Shown”, “Stack Direction”, “Avatar Size (px)”.
Is the Avatar Group Gutenberg block free?
Yes. Avatar Group ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Avatar Group to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Avatars).
Related business blocks
Team Card
Standalone team member card with photo, name, role, bio, skills, and social links.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
Bio Card
Rich individual profile card with photo, name, role, bio text, skill tags, social links, availability badge, and CTA button.
Contact Card
Business card block with photo, contact details, and social links. Multiple style variants.
Org Chart
Organizational hierarchy chart with avatar, name, role, and department for every node.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Avatar Group from the Gutenberg inserter.