Business · Gutenberg
Author Box block for WordPress
Display a blog author profile card with avatar, name, bio, role and social media 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
Display a blog author profile card with avatar, name, bio, role and social media links.
Inspector panels on this block: Avatar, Layout & Style, Social Links. Those titles come from index.js, not from a shared template.
Behavior controls: “Avatar shape” options: Circle, Rounded, Square; “Layout” options: Horizontal (avatar left), Vertical (avatar centered); “Platform” options: Twitter / X, LinkedIn, Facebook, Instagram, YouTube.
Author Box 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 “Author Box” (block name `blockenberg/author-box` in block.json). Style it in the sidebar after insert.
How to use Author Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Author Box”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Avatar. Set “Avatar size (px)”, “Avatar shape”, “Padding (px)”, “Gap (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 |
|---|---|
| Avatar size (px) | Numeric range control in the inspector. Range 40–200. block.json default: 88. Saved as `avatarSize`. |
| Avatar shape | Select control; the chosen value is saved on the block. Options: Circle; Rounded; Square. block.json default: circle. Saved as `avatarShape`. |
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal (avatar left); Vertical (avatar centered). block.json default: horizontal. Saved as `layout`. |
| Padding (px) | Numeric range control in the inspector. Range 8–64. block.json default: 28. Saved as `padding`. |
| Gap (px) | Numeric range control in the inspector. Range 8–64. block.json default: 24. Saved as `gap`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `borderRadius`. |
| Show border | On/off toggle in the inspector. On by default. Saved as `showBorder`. |
| Show role / position | On/off toggle in the inspector. On by default. Saved as `showRole`. |
| Show social links | On/off toggle in the inspector. On by default. Saved as `showLinks`. |
| Platform | Select control; the chosen value is saved on the block. Options: Twitter / X; LinkedIn; Facebook; Instagram; YouTube; GitHub; Website; Email. |
| URL | Text field in the inspector. |
| Colors — Background | Color control in the inspector. block.json default: #f9fafb. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Name | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Role | Color control in the inspector. block.json default: #6b7280. Saved as `roleColor`. |
| Bio text | Color control in the inspector. block.json default: #374151. Saved as `bioColor`. |
| Link color | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Link (hover) | Color control in the inspector. block.json default: #1d4ed8. Saved as `linkHoverColor`. |
| Name (Name) | Text field in the inspector. block.json default: Jane Smith. Saved as `name`. |
| Role (Role) | Text field in the inspector. block.json default: Content Writer. Saved as `role`. |
When this is the right block
- Display a blog author profile card with avatar, name, bio, role and social media links — that is the job of Author Box, not a generic content block.
- Use it when you need the editor control labeled “Avatar size (px)”, which exists on this block’s inspector.
- It matches pages about author, bio, profile.
- 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 Author Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Author Box”. It sits under Business. After insert, open Avatar and set “Avatar size (px)”, “Avatar shape”, “Padding (px)”, “Gap (px)”.
What makes Author Box different from other Blockenberg blocks?
Display a blog author profile card with avatar, name, bio, role and social media links. Inspector labels on this block include “Avatar size (px)”, “Avatar shape”, “Padding (px)”, “Gap (px)”.
Is the Author Box Gutenberg block free?
Yes. Author Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Author 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: Avatar, Layout & Style, Social Links).
Related business blocks
Bio Card
Rich individual profile card with photo, name, role, bio text, skill tags, social links, availability badge, and CTA button.
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
Bio Section
Personal biography section for coaches, authors, consultants, and founders. Features large photo, name, title, rich bio text, credential badges, a pull quote, and social links. Multiple layout options.
Team Card
Standalone team member card with photo, name, role, bio, skills, and social links.
Team Members
Show your team members with photos, roles, bios, 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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Author Box from the Gutenberg inserter.