Business · Gutenberg
Community Section block for WordPress
Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges.
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
Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges.
Inspector panels on this block: Avatars, Content, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Centered, Split (left/right).
Where to find it
Gutenberg inserter → Business → search “Community Section” (block name `blockenberg/community-section` in block.json). Style it in the sidebar after insert.
How to use Community Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Community Section”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Avatars. Set “Name”, “Avatar Size (px)”, “Overlap (px, negative)”, “Member Count”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Name | Text field in the inspector. |
| Avatar Size (px) | Numeric range control in the inspector. Range 28–80. block.json default: 48. Saved as `avatarSize`. |
| Overlap (px, negative) | Numeric range control in the inspector. Range -40–0. block.json default: -14. Saved as `avatarOverlap`. |
| Member Count | Text field in the inspector. block.json default: 12,000+. Saved as `memberCount`. |
| Count Label | Text field in the inspector. block.json default: members and growing. Saved as `memberCountLabel`. |
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Show CTA | On/off toggle in the inspector. On by default. Saved as `ctaEnabled`. |
| CTA Label | Text field in the inspector. block.json default: Join the community. Saved as `ctaLabel`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `ctaIsExternal`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. block.json default: Free to join. Saved as `badgeText`. |
| Show Trust Text | On/off toggle in the inspector. On by default. Saved as `showTrusts`. |
| Trust item | Text field in the inspector. |
| Layout | Select control; the chosen value is saved on the block. Options: Centered; Split (left/right). block.json default: centered. Saved as `layout`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1400. block.json default: 700. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 80. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Count | Color control in the inspector. block.json default: #111827. Saved as `countColor`. |
| Subtext | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| CTA BG | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Badge BG | Color control in the inspector. block.json default: #f0fdf4. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #15803d. Saved as `badgeColor`. |
| Avatar Border | Color control in the inspector. block.json default: #ffffff. Saved as `avatarBorderColor`. |
| Trust Text | Color control in the inspector. block.json default: #9ca3af. Saved as `trustColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges — that is the job of Community Section, not a generic content block.
- Use it when you need the editor control labeled “Name”, which exists on this block’s inspector.
- It matches pages about community, members, avatars.
- 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 Community Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Community Section”. It sits under Business. After insert, open Avatars and set “Name”, “Avatar Size (px)”, “Overlap (px, negative)”, “Member Count”.
What makes Community Section different from other Blockenberg blocks?
Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges. Inspector labels on this block include “Name”, “Avatar Size (px)”, “Overlap (px, negative)”, “Member Count”.
Is the Community Section Gutenberg block free?
Yes. Community Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Community Section 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, Content, Layout).
Related business blocks
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
Certificate
Display a digital certificate or diploma with recipient name, issuer, date, credentials, and optional signatures. Ideal for online courses and certifications.
Contact Card
Business card block with photo, contact details, and social links. Multiple style variants.
Social Stats
Social media platform stats — display follower counts, subscriber milestones and engagement metrics with platform-branded icons (Instagram, YouTube, TikTok, LinkedIn, X/Twitter, Facebook, Pinterest).
Team Members
Show your team members with photos, roles, bios, and social links.
Team Slider
Team members in an interactive carousel. Each member has avatar, name, role, bio, social links, and department tag.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Community Section from the Gutenberg inserter.