Blog · Gutenberg
Contributor Box block for WordPress
Multi-author attribution block with avatars, 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
Multi-author attribution block with avatars, bios and social links.
Inspector panels on this block: Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Grid (cards), List (horizontal row), Compact (avatars only).
Where to find it
Gutenberg inserter → Blog → search “Contributor Box” (block name `blockenberg/contributor-box` in block.json). Style it in the sidebar after insert.
How to use Contributor Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contributor Box”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Layout. Set “Show Label”, “Label Text”, “Show Bios”, “Show Social Links”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Grid (cards); List (horizontal row); Compact (avatars only). block.json default: grid. Saved as `layout`. |
| Show Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Text | Text field in the inspector. block.json default: Written by. Saved as `label`. |
| Show Bios | 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 `showSocial`. |
| Avatar Size (px) | Numeric range control in the inspector. Range 32–120. block.json default: 60. Saved as `avatarSize`. |
| Outer Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `borderRadius`. |
| Card Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `cardRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Label | Color control in the inspector. block.json default: #94a3b8. Saved as `labelColor`. |
| Avatar BG (initials) | Color control in the inspector. block.json default: #e2e8f0. Saved as `avatarBg`. |
| Avatar Text (initials) | Color control in the inspector. block.json default: #64748b. Saved as `avatarColor`. |
| Name | Color control in the inspector. block.json default: #0f172a. Saved as `nameColor`. |
| Title / Role | Color control in the inspector. block.json default: #64748b. Saved as `titleColor`. |
| Bio Text | Color control in the inspector. block.json default: #475569. Saved as `bioColor`. |
| Social Icons | Color control in the inspector. block.json default: #94a3b8. Saved as `socialColor`. |
| Accent | Color control in the inspector. block.json default: #2563eb. Saved as `accentColor`. |
| Name (Typo Name) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoName`. |
| Role | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoRole`. |
| Bio | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBio`. |
| Name (Contributors) | Text field in the inspector. Saved as `contributors`. |
| Role / Title | Text field in the inspector. Saved as `contributors`. |
| Bio (Contributors) | Multiline text field in the inspector. Saved as `contributors`. |
| Twitter/X URL | Text field in the inspector. Saved as `contributors`. |
| LinkedIn URL | Text field in the inspector. Saved as `contributors`. |
| Website URL | Text field in the inspector. Saved as `contributors`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Multi-author attribution block with avatars, bios and social links — that is the job of Contributor Box, not a generic content block.
- Use it when you need the editor control labeled “Show Label”, which exists on this block’s inspector.
- It matches pages about author, contributor, team.
- Inserter grouping: posts, magazines, and editorial WordPress 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 Contributor Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contributor Box”. It sits under Blog. After insert, open Layout and set “Show Label”, “Label Text”, “Show Bios”, “Show Social Links”.
What makes Contributor Box different from other Blockenberg blocks?
Multi-author attribution block with avatars, bios and social links. Inspector labels on this block include “Show Label”, “Label Text”, “Show Bios”, “Show Social Links”.
Is the Contributor Box Gutenberg block free?
Yes. Contributor Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contributor Box 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).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Meeting Recap
Structured meeting notes with attendees, agenda, decisions, action items, and next steps.
Opinion Box
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Post Meta Bar
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Pullquote Pro
Eye-catching quotation with large typography, decorative marks, author avatar, and alignment options.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contributor Box from the Gutenberg inserter.