Business · Gutenberg
Team Members block for WordPress
Show your team members with photos, roles, bios, and social links.
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
Show your team members with photos, roles, bios, and social links.
Inspector panels on this block: Layout, Card, Image, Content, Selected Member. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout Style” options: Cards (Grid), Carousel; “Arrow Style” options: Top Right, Overlay Sides, Bottom Center; “Indicators” options: None, Dots, Progress Bar, Fraction (1/6); “Dots Style” options: Dots, Active Pill.
Where to find it
Gutenberg inserter → Business → search “Team Members” (block name `blockenberg/team-members` in block.json). Style it in the sidebar after insert.
How to use Team Members block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Team Members”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Layout. Set “Layout Style”, “Layout — Gap”, “Show Carousel Navigation”, “Arrow Style”.
- Check the published page. The view script reads HTML data attributes: data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction, data-bkbg-infinite, data-bkbg-nav. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout Style | Select control; the chosen value is saved on the block. Options: Cards (Grid); Carousel. block.json default: cards. Saved as `layoutStyle`. |
| Layout — Gap | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `gap`. |
| Show Carousel Navigation | On/off toggle in the inspector. On by default. Saved as `carouselNav`. |
| Arrow Style | Select control; the chosen value is saved on the block. Options: Top Right; Overlay Sides; Bottom Center. block.json default: top. Saved as `carouselNavStyle`. |
| Peek Next Card | On/off toggle in the inspector. Off by default. Saved as `carouselPeek`. |
| Indicators | Select control; the chosen value is saved on the block. Options: None; Dots; Progress Bar; Fraction (1/6). block.json default: none. Saved as `carouselIndicators`. |
| Dots Style | Select control; the chosen value is saved on the block. Options: Dots; Active Pill. block.json default: default. Saved as `carouselDotsStyle`. |
| Dot Size | Numeric range control in the inspector. Range 6–16. block.json default: 8. Saved as `carouselIndicatorSize`. |
| Progress Style | Select control; the chosen value is saved on the block. Options: Contained; Edge-to-edge. block.json default: default. Saved as `carouselProgressStyle`. |
| Progress Height | Numeric range control in the inspector. Range 2–14. block.json default: 6. Saved as `carouselProgressHeight`. |
| Indicators Position | Select control; the chosen value is saved on the block. Options: Below; Above. block.json default: below. Saved as `carouselIndicatorsPosition`. |
| Infinite Loop | On/off toggle in the inspector. On by default. Saved as `infiniteScroll`. |
| Auto-scroll (continuous) | On/off toggle in the inspector. Runs on the live site (frontend). Please check it there. Off by default. Saved as `autoScroll`. |
| Auto-scroll speed (px/sec) | Numeric range control in the inspector. Range 5–200. block.json default: 40. Saved as `autoScrollSpeed`. |
| Pause on hover | On/off toggle in the inspector. On by default. Saved as `autoScrollPauseOnHover`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Card — Padding | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `cardPadding`. |
| Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Border Width | Numeric range control in the inspector. Range 0–6. block.json default: 1. Saved as `cardBorderWidth`. |
| Card — Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Hover Lift | On/off toggle in the inspector. On by default. Saved as `hoverLift`. |
| Lift Amount | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `hoverLiftAmount`. |
| Shape | Select control; the chosen value is saved on the block. Options: Circle; Rounded; Square. block.json default: circle. Saved as `imageShape`. |
| Image — Size | Numeric range control in the inspector. Range 40–200. block.json default: 96. Saved as `imageSize`. |
| Show Role | On/off toggle in the inspector. On by default. Saved as `showRole`. |
| Show Bio | On/off toggle in the inspector. On by default. Saved as `showBio`. |
| Show Social Links | On/off toggle in the inspector. On by default. Saved as `showSocials`. |
| Social Icon Size | Numeric range control in the inspector. Range 12–30. block.json default: 18. Saved as `socialSize`. |
| Fraction Text Size | Numeric range control in the inspector. Range 10–18. block.json default: 13. Saved as `carouselFractionSize`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorderColor`. |
| Name | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Role | Color control in the inspector. block.json default: #3b82f6. Saved as `roleColor`. |
| Bio | Color control in the inspector. block.json default: #6b7280. Saved as `bioColor`. |
| Social | Color control in the inspector. block.json default: #6b7280. Saved as `socialColor`. |
| Social Hover | Color control in the inspector. block.json default: #111827. Saved as `socialHoverColor`. |
| Carousel Indicator | Color control in the inspector. block.json default: rgba(0,0,0,0.22). Saved as `carouselIndicatorColor`. |
| Carousel Indicator (Active) | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselIndicatorActiveColor`. |
| Carousel Progress (Track) | Color control in the inspector. block.json default: rgba(0,0,0,0.12). Saved as `carouselProgressBg`. |
| Carousel Progress (Fill) | Color control in the inspector. block.json default: rgba(0,0,0,0.55). Saved as `carouselProgressFg`. |
| Carousel Fraction | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselFractionColor`. |
| Type | Select control; the chosen value is saved on the block. Options: Website; Email; Phone; Facebook; X (Twitter); Instagram; LinkedIn; GitHub. |
| URL | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction, data-bkbg-infinite, data-bkbg-nav.
When this is the right block
- Show your team members with photos, roles, bios, and social links — that is the job of Team Members, not a generic content block.
- Use it when you need the editor control labeled “Layout Style”, which exists on this block’s inspector.
- It matches pages about team, members, staff.
- 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 Team Members block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Team Members”. It sits under Business. After insert, open Layout and set “Layout Style”, “Layout — Gap”, “Show Carousel Navigation”, “Arrow Style”.
What makes Team Members different from other Blockenberg blocks?
Show your team members with photos, roles, bios, and social links. Inspector labels on this block include “Layout Style”, “Layout — Gap”, “Show Carousel Navigation”, “Arrow Style”.
Is the Team Members Gutenberg block free?
Yes. Team Members ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Team Members 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: Layout, Card, Image, Content).
Related business blocks
Team Slider
Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag.
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.
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 Box
Display a blog author profile card with avatar, name, bio, role and social media links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Team Members from the Gutenberg inserter.