Business · Gutenberg
KPI Tiles block for WordPress
Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts.
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
Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts.
Inspector panels on this block: Tiles, Layout, Display Options. Those titles come from index.js, not from a shared template.
Behavior controls: “Trend Direction” options: Up (good), Down (bad), Down (good), Neutral; “Columns” options: 2, 3, 4.
Where to find it
Gutenberg inserter → Business → search “KPI Tiles” (block name `blockenberg/kpi-tiles` in block.json). Style it in the sidebar after insert.
How to use KPI Tiles block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “KPI Tiles”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Tiles. Set “Label”, “Value”, “Trend (e.g. +18%)”, “Trend Direction”.
- Check the published page. The view script reads HTML data attributes: data-kpi-idx, data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| Value | Text field in the inspector. |
| Trend (e.g. +18%) | Text field in the inspector. |
| Trend Direction | Select control; the chosen value is saved on the block. Options: Up (good); Down (bad); Down (good); Neutral. |
| Sparkline data (comma-separated numbers) | Text field in the inspector. |
| Columns | Select control; the chosen value is saved on the block. Options: 2; 3; 4. block.json default: 4. Saved as `columns`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card Padding (px) | Numeric range control in the inspector. Range 12–48. block.json default: 24. Saved as `cardPadding`. |
| Show Sparkline | On/off toggle in the inspector. On by default. Saved as `showSparkline`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show Trend | On/off toggle in the inspector. On by default. Saved as `showTrend`. |
| Animate Numbers on Scroll | On/off toggle in the inspector. On by default. Saved as `animateNumbers`. |
| Icon Size | Numeric range control in the inspector. Range 18–56. block.json default: 32. Saved as `iconSize`. |
| Sparkline Height (px) | Numeric range control in the inspector. Range 24–96. block.json default: 48. Saved as `sparklineHeight`. |
| Sparkline Width (px) | Numeric range control in the inspector. Range 60–240. block.json default: 120. Saved as `sparklineWidth`. |
| Section BG | Color control in the inspector. block.json default: transparent. Saved as `sectionBg`. |
| Card BG | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Shadow | Color control in the inspector. block.json default: rgba(0,0,0,0.08). Saved as `cardShadow`. |
| Card Border | Color control in the inspector. block.json default: transparent. Saved as `borderColor`. |
| Value Color | Color control in the inspector. block.json default: #0f172a. Saved as `valueColor`. |
| Label Color | Color control in the inspector. block.json default: #64748b. Saved as `labelColor`. |
| Up Trend Color | Color control in the inspector. block.json default: #10b981. Saved as `upColor`. |
| Down Trend Color | Color control in the inspector. block.json default: #ef4444. Saved as `downColor`. |
| Down (Good) Color | Color control in the inspector. block.json default: #10b981. Saved as `downGoodColor`. |
| Sparkline Line | Color control in the inspector. block.json default: #6366f1. Saved as `sparklineColor`. |
| Sparkline Fill | Color control in the inspector. block.json default: rgba(99,102,241,0.12). Saved as `sparklineFill`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-kpi-idx, data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts — that is the job of KPI Tiles, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about kpi, metrics, stats.
- 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 KPI Tiles block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “KPI Tiles”. It sits under Business. After insert, open Tiles and set “Label”, “Value”, “Trend (e.g. +18%)”, “Trend Direction”.
What makes KPI Tiles different from other Blockenberg blocks?
Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts. Inspector labels on this block include “Label”, “Value”, “Trend (e.g. +18%)”, “Trend Direction”.
Is the KPI Tiles Gutenberg block free?
Yes. KPI Tiles ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style KPI Tiles 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: Tiles, Layout, Display Options).
Related business blocks
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.
Stats Section
A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants.
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).
Case Study
Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages.
Stats Counter
Display animated number counters with icons, labels, and rich customization.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert KPI Tiles from the Gutenberg inserter.