Marketing · Gutenberg
Trust Bar block for WordPress
A horizontal row of trust, security, and compliance badges — SOC 2, GDPR, SSL, uptime SLAs, etc. Different from Social Proof Bar (user counts) and Logo Wall (brand logos).
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
A horizontal row of trust, security, and compliance badges — SOC 2, GDPR, SSL, uptime SLAs, etc. Different from Social Proof Bar (user counts) and Logo Wall (brand logos).
Inspector panels on this block: Layout, Icon, Appearance, Items. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Single row, 2-column grid, 3-column grid; “Card style” options: Plain, Card, Bordered; “Text alignment” options: Left, Center, Right; “Items — Icon” options: Shield, Lock, Checkmark, Lightning, Headphones.
Trust 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 “Trust Bar” (block name `blockenberg/trust-bar` in block.json). Style it in the sidebar after insert.
How to use Trust Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Trust Bar”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Card style”, “Text alignment”, “Show sublabel”, “Show divider between items”.
- 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 |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Single row; 2-column grid; 3-column grid. block.json default: row. Saved as `layout`. |
| Card style | Select control; the chosen value is saved on the block. Options: Plain; Card; Bordered. block.json default: plain. Saved as `cardStyle`. |
| Text alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Show sublabel | On/off toggle in the inspector. On by default. Saved as `showSublabel`. |
| Show divider between items | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `gap`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–64. block.json default: 32. Saved as `iconSize`. |
| Icon bg size (px, 0 = none) | Numeric range control in the inspector. Range 0–120. block.json default: 56. Saved as `iconBgSize`. |
| Icon bg radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 50. Saved as `iconBgRadius`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 4–48. block.json default: 20. Saved as `cardPadding`. |
| Colors — Icon | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Icon background | Color control in the inspector. block.json default: #f5f0ff. Saved as `iconBg`. |
| Label | Color control in the inspector. block.json default: #111827. Saved as `labelColor`. |
| Sublabel | Color control in the inspector. block.json default: #6b7280. Saved as `sublabelColor`. |
| Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `dividerColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| 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`. |
| Items — Icon | Select control; the chosen value is saved on the block. Options: Shield; Lock; Checkmark; Lightning; Headphones; Star; Award; Users; Cloud; Eye. |
| Label | Text field in the inspector. |
| Sublabel | Text field in the inspector. |
When this is the right block
- A horizontal row of trust, security, and compliance badges — SOC 2, GDPR, SSL, uptime SLAs, etc. Different from Social Proof Bar (user counts) and Logo Wall (brand logos) — that is the job of Trust Bar, not a generic content block.
- Use it when you need the editor control labeled “Card style”, which exists on this block’s inspector.
- It matches pages about trust, security, compliance.
- 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 Trust Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Trust Bar”. It sits under Marketing. After insert, open Layout and set “Card style”, “Text alignment”, “Show sublabel”, “Show divider between items”.
What makes Trust Bar different from other Blockenberg blocks?
A horizontal row of trust, security, and compliance badges — SOC 2, GDPR, SSL, uptime SLAs, etc. Different from Social Proof Bar (user counts) and Logo Wall (brand logos). Inspector labels on this block include “Card style”, “Text alignment”, “Show sublabel”, “Show divider between items”.
Is the Trust Bar Gutenberg block free?
Yes. Trust Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Trust 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, Icon, Appearance, Items).
Related marketing blocks
Payment Methods
Display accepted payment brand logos and security trust badges with built-in SVG icons.
Guarantee Section
Money-back / risk-reversal section with badge seal, heading, description, bullet-point guarantee terms, optional CTA, and full color controls.
Cookie Consent
GDPR-compliant cookie consent banner with customizable position, layout, categories, and GTM integration.
Social Proof Bar
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
Social Proof Section
Complete social proof landing section combining client logos, stats, and a featured testimonial quote — all in one configurable block.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Trust Bar from the Gutenberg inserter.