Marketing · Gutenberg
Social Proof Bar block for WordPress
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
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
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
Inspector panels on this block: Layout, Avatars, Rating, Tagline, Logos. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Centered (stacked), Left aligned, Spread (side by side); “Divider style” options: Line, Dot, None.
Social Proof Bar 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 → Marketing → search “Social Proof Bar” (block name `blockenberg/social-proof-bar` in block.json). Style it in the sidebar after insert.
How to use Social Proof Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Social Proof Bar”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Name”, “Initials (fallback)”, “Gap (px)”, “Divider style”.
- 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 |
|---|---|
| Name | Text field in the inspector. |
| Initials (fallback) | Text field in the inspector. |
| Layout | Select control; the chosen value is saved on the block. Options: Centered (stacked); Left aligned; Spread (side by side). block.json default: centered. Saved as `layout`. |
| Gap (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `gap`. |
| Divider style | Select control; the chosen value is saved on the block. Options: Line; Dot; None. block.json default: line. Saved as `dividerStyle`. |
| Border top | On/off toggle in the inspector. Off by default. Saved as `borderTop`. |
| Border bottom | On/off toggle in the inspector. Off by default. Saved as `borderBottom`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingBottom`. |
| Show avatars | On/off toggle in the inspector. On by default. Saved as `showAvatars`. |
| Avatar size (px) | Numeric range control in the inspector. Range 24–80. block.json default: 40. Saved as `avatarSize`. |
| Overlap (px) | Numeric range control in the inspector. Range 0–30. block.json default: 10. Saved as `avatarOverlap`. |
| Show rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Rating value | Numeric range control in the inspector. Range 1–5. block.json default: 4.9. Saved as `ratingValue`. |
| Review count | Text field in the inspector. block.json default: 2,400+. Saved as `reviewCount`. |
| Rating label | Text field in the inspector. block.json default: reviews. Saved as `ratingLabel`. |
| Show tagline | On/off toggle in the inspector. On by default. Saved as `showTagline`. |
| Tagline text | Text field in the inspector. block.json default: Trusted by 10,000+ marketers worldwide. Saved as `tagline`. |
| Show logos | On/off toggle in the inspector. On by default. Saved as `showLogos`. |
| Show "As seen in" label | On/off toggle in the inspector. On by default. Saved as `showLogosLabel`. |
| Label text | Text field in the inspector. block.json default: As seen in. Saved as `logosLabel`. |
| Logo height (px) | Numeric range control in the inspector. Range 16–80. block.json default: 28. Saved as `logoHeight`. |
| Logo opacity (%) | Numeric range control in the inspector. Range 10–100. block.json default: 50. Saved as `logoOpacity`. |
| Grayscale logos | On/off toggle in the inspector. On by default. Saved as `logoGrayscale`. |
| Logo gap (px) | Numeric range control in the inspector. Range 8–80. block.json default: 40. Saved as `logoGap`. |
| Link URL | Text field in the inspector. |
| Text Color | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Star Color | Color control in the inspector. block.json default: #f59e0b. Saved as `starColor`. |
| Avatar Border | Color control in the inspector. block.json default: #ffffff. Saved as `avatarBorderColor`. |
| Avatar Fallback BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `avatarFallbackBg`. |
| Divider / Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `dividerColor`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
When this is the right block
- Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip — that is the job of Social Proof Bar, 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 social proof, trust, testimonial.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 Social Proof Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Social Proof Bar”. It sits under Marketing. After insert, open Layout and set “Name”, “Initials (fallback)”, “Gap (px)”, “Divider style”.
What makes Social Proof Bar different from other Blockenberg blocks?
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip. Inspector labels on this block include “Name”, “Initials (fallback)”, “Gap (px)”, “Divider style”.
Is the Social Proof Bar Gutenberg block free?
Yes. Social Proof Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Social Proof Bar 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, Avatars, Rating, Tagline).
Related marketing blocks
Client Showcase
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
Social Proof Section
Complete social proof landing section combining client logos, stats, and a featured testimonial quote — all in one configurable block.
Review Showcase
Showcase aggregate ratings from review platforms (Google, G2, Trustpilot, etc.) with an optional featured testimonial.
Testimonial Wall
Masonry-style testimonial wall with platform source badges (Google, G2, Capterra, Twitter/X), per-card ratings, and featured card highlights.
Testimonials
Customer testimonials with avatars, ratings, and beautiful layouts.
Logo Grid
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Social Proof Bar from the Gutenberg inserter.