Business · Gutenberg
Case Study block for WordPress
Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages.
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
Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages.
Inspector panels on this block: Client Info, Header, Challenge & Solution labels, Metrics, Quote, Call to Action, Layout, Colours. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Two columns (challenge / solution), Stacked.
Where to find it
Gutenberg inserter → Business → search “Case Study” (block name `blockenberg/case-study` in block.json). Style it in the sidebar after insert.
How to use Case Study block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Case Study”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Client Info. Set “Display value (e.g. 94%)”, “Label”, “Description”, “Client name”.
- Check the published page. An IntersectionObserver starts work when the block enters the viewport. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Display value (e.g. 94%) | Text field in the inspector. |
| Label | Text field in the inspector. |
| Description | Text field in the inspector. |
| Client name | Text field in the inspector. block.json default: Acme Corporation. Saved as `clientName`. |
| Industry / Category | Text field in the inspector. block.json default: SaaS / Technology. Saved as `clientIndustry`. |
| Website URL | Text field in the inspector. Saved as `clientUrl`. |
| Tagline | Text field in the inspector. block.json default: Transforming enterprise workflows since 2018. Saved as `clientTagline`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Header — Title | Text field in the inspector. block.json default: Case Study. Saved as `title`. |
| Show subtitle | On/off toggle in the inspector. Off by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: See how we helped our client achieve extraordinary results.. Saved as `subtitle`. |
| Challenge label | Text field in the inspector. Saved as `challengeLabel`. |
| Solution label | Text field in the inspector. Saved as `solutionLabel`. |
| Show quote | On/off toggle in the inspector. On by default. Saved as `showQuote`. |
| Quote text | Multiline text field in the inspector. block.json default: The results exceeded every expectation. Our team now has the data they need before their morning coffee.. Saved as `quote`. |
| Author name | Text field in the inspector. block.json default: Sarah Chen. Saved as `quoteAuthor`. |
| Author role | Text field in the inspector. block.json default: CTO, Acme Corporation. Saved as `quoteAuthorRole`. |
| Show CTA button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Button label | Text field in the inspector. block.json default: Read Full Case Study. Saved as `ctaLabel`. |
| Button URL | Text field in the inspector. Saved as `ctaUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `ctaNewTab`. |
| Layout | Select control; the chosen value is saved on the block. Options: Two columns (challenge / solution); Stacked. block.json default: two-col. Saved as `layout`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| CTA radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `ctaRadius`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Metric value size (px) | Numeric range control in the inspector. Range 24–72. block.json default: 36. Saved as `metricValueSize`. |
| Metric label size (px) | Numeric range control in the inspector. Range 10–20. block.json default: 13. Saved as `metricLabelSize`. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages — that is the job of Case Study, not a generic content block.
- Use it when you need the editor control labeled “Display value (e.g. 94%)”, which exists on this block’s inspector.
- It matches pages about case study, client, results.
- 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 Case Study block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Case Study”. It sits under Business. After insert, open Client Info and set “Display value (e.g. 94%)”, “Label”, “Description”, “Client name”.
What makes Case Study different from other Blockenberg blocks?
Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages. Inspector labels on this block include “Display value (e.g. 94%)”, “Label”, “Description”, “Client name”.
Is the Case Study Gutenberg block free?
Yes. Case Study ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Case Study 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: Client Info, Header, Challenge & Solution labels, Metrics).
Related business blocks
KPI Tiles
Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts.
Metric Cards
KPI / dashboard metric cards with trend indicators (up/down arrow + percentage change) and an optional mini sparkline. Different from Stats Counter — these show change-over-time context.
Portfolio Grid
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples.
Resume / CV
A complete professional resume or CV with experience timeline, education, skills, and contact header.
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).
Stats Section
A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Case Study from the Gutenberg inserter.