Marketing · Gutenberg
Client Showcase block for WordPress
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
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
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
Inspector panels on this block: Logos, Header & Layout, Pull Quote. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Row (centered), Grid (fixed columns); “Header alignment” options: Left, Center, Right.
Client Showcase 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 “Client Showcase” (block name `blockenberg/client-showcase` in block.json). Style it in the sidebar after insert.
How to use Client Showcase block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Client Showcase”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Logos. Set “Company name”, “Show section header”, “Show pull-quote”, “Header alignment”.
- 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 |
|---|---|
| Company name | Text field in the inspector. |
| Show section header | On/off toggle in the inspector. On by default. Saved as `showHeader`. |
| Show pull-quote | On/off toggle in the inspector. On by default. Saved as `showQuote`. |
| Layout | Select control; the chosen value is saved on the block. Options: Row (centered); Grid (fixed columns). block.json default: row. Saved as `layout`. |
| Header alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `headerAlign`. |
| Columns | Numeric range control in the inspector. Range 2–8. block.json default: 6. Saved as `columns`. |
| Logo gap (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `gap`. |
| Logo height (px) | Numeric range control in the inspector. Range 20–100. block.json default: 40. Saved as `logoHeight`. |
| Logo padding (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `logoPadding`. |
| Logo border radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `logoRadius`. |
| Logo background box | On/off toggle in the inspector. Off by default. Saved as `logoBg`. |
| Grayscale logos | On/off toggle in the inspector. On by default. Saved as `logoGrayscale`. |
| Color on hover | On/off toggle in the inspector. On by default. Saved as `logoHoverColor`. |
| Quote text | Text field in the inspector. block.json default: This platform transformed how our team operates. We cut our delivery time in half within the first month.. Saved as `quoteText`. |
| Author name | Text field in the inspector. block.json default: Sarah Johnson. Saved as `quoteAuthor`. |
| Author role | Text field in the inspector. block.json default: Head of Product, Acme Corp. Saved as `quoteRole`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingBottom`. |
| Header gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `headerGap`. |
| Quote gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 48. Saved as `quoteGap`. |
| Section background | Color control in the inspector. Saved as `sectionBg`. |
| Headline color | Color control in the inspector. block.json default: #0f172a. Saved as `headlineColor`. |
| Subhead color | Color control in the inspector. block.json default: #64748b. Saved as `subColor`. |
| Logo box bg | Color control in the inspector. block.json default: #f8fafc. Saved as `logoBgColor`. |
| Logo box border | Color control in the inspector. block.json default: #e2e8f0. Saved as `logoBorderColor`. |
| Logo tint (grayscale) | Color control in the inspector. block.json default: #94a3b8. Saved as `logoTintColor`. |
| Quote background | Color control in the inspector. block.json default: #f8fafc. Saved as `quoteBg`. |
| Quote border | Color control in the inspector. block.json default: #e2e8f0. Saved as `quoteBorder`. |
| Quote text | Color control in the inspector. block.json default: #1e293b. Saved as `quoteTextColor`. |
| Quote meta | Color control in the inspector. block.json default: #64748b. Saved as `quoteMetaColor`. |
| Accent (quote mark) | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
When this is the right block
- "Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client — that is the job of Client Showcase, not a generic content block.
- Use it when you need the editor control labeled “Company name”, which exists on this block’s inspector.
- It matches pages about clients, logos, trusted by.
- 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 Client Showcase block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Client Showcase”. It sits under Marketing. After insert, open Logos and set “Company name”, “Show section header”, “Show pull-quote”, “Header alignment”.
What makes Client Showcase different from other Blockenberg blocks?
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client. Inspector labels on this block include “Company name”, “Show section header”, “Show pull-quote”, “Header alignment”.
Is the Client Showcase Gutenberg block free?
Yes. Client Showcase ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Client Showcase 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: Logos, Header & Layout, Pull Quote).
Related marketing blocks
Logo Grid
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts.
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.
Logo Carousel
Show client/partner logos in a responsive carousel or grid.
Review Showcase
Showcase aggregate ratings from review platforms (Google, G2, Trustpilot, etc.) with an optional featured testimonial.
Testimonial Card
A single embeddable testimonial card with photo, quote, rating, and platform badge. Place it anywhere in your content.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Client Showcase from the Gutenberg inserter.