Marketing · Gutenberg
Testimonials block for WordPress
Customer testimonials with avatars, ratings, and beautiful layouts.
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
Customer testimonials with avatars, ratings, and beautiful layouts.
Inspector panels on this block: Layout, Card, Elements, Selected Testimonial. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout — Style” options: Grid, Carousel; “Columns” options: 1, 2, 3, 4; “Text Align” options: Left, Center, Right; “Arrow Style” options: Top Right, Overlay Sides, Bottom Center.
Where to find it
Gutenberg inserter → Marketing → search “Testimonials” (block name `blockenberg/testimonials` in block.json). Style it in the sidebar after insert.
How to use Testimonials block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Testimonials”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Layout — Style”, “Columns”, “Layout — Gap”, “Text Align”.
- Check the published page. The view script reads HTML data attributes: data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction, data-bkbg-infinite, data-bkbg-nav, data-ts-nav. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout — Style | Select control; the chosen value is saved on the block. Options: Grid; Carousel. block.json default: grid. Saved as `layoutStyle`. |
| Columns | Select control; the chosen value is saved on the block. Options: 1; 2; 3; 4. block.json default: 3. Saved as `columns`. |
| Layout — Gap | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `gap`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `textAlign`. |
| Peek Next Slide | On/off toggle in the inspector. On by default. Saved as `carouselPeek`. |
| Show Navigation | On/off toggle in the inspector. On by default. Saved as `carouselNav`. |
| Arrow Style | Select control; the chosen value is saved on the block. Options: Top Right; Overlay Sides; Bottom Center. block.json default: top. Saved as `carouselNavStyle`. |
| Indicators | Select control; the chosen value is saved on the block. Options: None; Dots; Progress Bar; Fraction (1/6). block.json default: none. Saved as `carouselIndicators`. |
| Dots Style | Select control; the chosen value is saved on the block. Options: Dots; Active Pill. block.json default: default. Saved as `carouselDotsStyle`. |
| Dot Size | Numeric range control in the inspector. Range 6–16. block.json default: 8. Saved as `carouselIndicatorSize`. |
| Progress Style | Select control; the chosen value is saved on the block. Options: Contained; Edge-to-edge. block.json default: default. Saved as `carouselProgressStyle`. |
| Progress Height | Numeric range control in the inspector. Range 2–14. block.json default: 6. Saved as `carouselProgressHeight`. |
| Indicators Position | Select control; the chosen value is saved on the block. Options: Below; Above. block.json default: below. Saved as `carouselIndicatorsPosition`. |
| Infinite Loop | On/off toggle in the inspector. On by default. Saved as `infiniteScroll`. |
| Auto-scroll (continuous) | On/off toggle in the inspector. Runs on the live site (frontend). Please check it there. Off by default. Saved as `autoScroll`. |
| Auto-scroll speed (px/sec) | Numeric range control in the inspector. Range 5–200. block.json default: 40. Saved as `autoScrollSpeed`. |
| Pause on hover | On/off toggle in the inspector. On by default. Saved as `autoScrollPauseOnHover`. |
| Card — Padding | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `cardPadding`. |
| Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Border Width | Numeric range control in the inspector. Range 0–6. block.json default: 1. Saved as `cardBorderWidth`. |
| Card — Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Show Quote Icon | On/off toggle in the inspector. On by default. Saved as `showQuoteIcon`. |
| Quote Icon Size | Numeric range control in the inspector. Range 12–48. block.json default: 22. Saved as `quoteIconSize`. |
| Show Avatar | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Avatar Shape | Select control; the chosen value is saved on the block. Options: Circle; Rounded; Square. block.json default: circle. Saved as `avatarShape`. |
| Avatar Size | Numeric range control in the inspector. Range 24–120. block.json default: 44. Saved as `avatarSize`. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Max Stars | Numeric range control in the inspector. Range 3–5. block.json default: 5. Saved as `ratingStars`. |
| Show Name | On/off toggle in the inspector. On by default. Saved as `showName`. |
| Show Role | On/off toggle in the inspector. On by default. Saved as `showRole`. |
| Show Company | On/off toggle in the inspector. On by default. Saved as `showCompany`. |
| Rating Size | Numeric range control in the inspector. Range 12–24. block.json default: 16. Saved as `ratingSize`. |
| Fraction Text Size | Numeric range control in the inspector. Range 10–18. block.json default: 13. Saved as `carouselFractionSize`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorderColor`. |
| Featured Border | Color control in the inspector. block.json default: #3b82f6. Saved as `featuredBorderColor`. |
| Quote Icon | Color control in the inspector. block.json default: #3b82f6. Saved as `quoteIconColor`. |
| Quote | Color control in the inspector. block.json default: #111827. Saved as `quoteColor`. |
| 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`. |
| Company | Color control in the inspector. block.json default: #6b7280. Saved as `companyColor`. |
| Rating | Color control in the inspector. block.json default: #f59e0b. Saved as `ratingColor`. |
| Carousel Indicator | Color control in the inspector. block.json default: rgba(0,0,0,0.22). Saved as `carouselIndicatorColor`. |
| Carousel Indicator (Active) | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselIndicatorActiveColor`. |
| Carousel Progress (Track) | Color control in the inspector. block.json default: rgba(0,0,0,0.12). Saved as `carouselProgressBg`. |
| Carousel Progress (Fill) | Color control in the inspector. block.json default: rgba(0,0,0,0.55). Saved as `carouselProgressFg`. |
| Carousel Fraction | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselFractionColor`. |
| Featured Testimonial | On/off toggle in the inspector. block.json default: -1. Saved as `featuredIndex`. |
| Rating | Numeric range control in the inspector. Range 0–5. |
What the front-end script actually does
- The view script reads HTML data attributes: data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction, data-bkbg-infinite, data-bkbg-nav, data-ts-nav.
When this is the right block
- Customer testimonials with avatars, ratings, and beautiful layouts — that is the job of Testimonials, not a generic content block.
- Use it when you need the editor control labeled “Layout — Style”, which exists on this block’s inspector.
- It matches pages about testimonial, reviews, quote.
- 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 Testimonials block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Testimonials”. It sits under Marketing. After insert, open Layout and set “Layout — Style”, “Columns”, “Layout — Gap”, “Text Align”.
What makes Testimonials different from other Blockenberg blocks?
Customer testimonials with avatars, ratings, and beautiful layouts. Inspector labels on this block include “Layout — Style”, “Columns”, “Layout — Gap”, “Text Align”.
Is the Testimonials Gutenberg block free?
Yes. Testimonials ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Testimonials 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, Card, Elements, Selected Testimonial).
Related marketing blocks
Social Proof Bar
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
Review Showcase
Showcase aggregate ratings from review platforms (Google, G2, Trustpilot, etc.) with an optional featured testimonial.
Split Testimonial
Hero-size featured testimonial with large pull-quote, author photo, name, title, company, star rating, and full accent/background controls.
Testimonial Card
A single embeddable testimonial card with photo, quote, rating, and platform badge. Place it anywhere in your content.
Testimonial Carousel
Auto-playing testimonial slider with stars, avatars, and dot/arrow navigation.
Testimonial Featured
A single large featured testimonial section — big decorative quote mark, full testimonial text, person photo, name, title, company logo, star rating, and optional result metric badge. Designed as a standalone section for maximum impact. Different from testimonial carousels or grids.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Testimonials from the Gutenberg inserter.