Business · Gutenberg
Stats Section block for WordPress
A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants.
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 landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants.
Inspector panels on this block: Stats, Section Header, Layout & Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Text alignment” options: Left, Center, Right; “Layout” options: Row (horizontal), Grid, Centered column; “Card style” options: Plain (no background), Card (white bg + shadow), Bordered, Gradient number; “Text alignment (Text Align)” options: Left, Center, Right.
Stats Section 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 → Business → search “Stats Section” (block name `blockenberg/stats-section` in block.json). Style it in the sidebar after insert.
How to use Stats Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Stats Section”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Stats. Set “Prefix (e.g. $)”, “Number / Value”, “Suffix (e.g. /5)”, “Label”.
- 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 |
|---|---|
| Prefix (e.g. $) | Text field in the inspector. |
| Number / Value | Text field in the inspector. |
| Suffix (e.g. /5) | Text field in the inspector. |
| Label | Text field in the inspector. |
| Description | Text field in the inspector. |
| Show section header | On/off toggle in the inspector. On by default. Saved as `showSectionHeader`. |
| Section Header — Title | Text field in the inspector. block.json default: Trusted by thousands of teams. Saved as `sectionTitle`. |
| Subtitle | Text field in the inspector. block.json default: Real results from real customers — not just promises.. Saved as `sectionSubtitle`. |
| Text alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `headerAlign`. |
| Layout | Select control; the chosen value is saved on the block. Options: Row (horizontal); Grid; Centered column. block.json default: row. Saved as `layout`. |
| Card style | Select control; the chosen value is saved on the block. Options: Plain (no background); Card (white bg + shadow); Bordered; Gradient number. block.json default: plain. Saved as `cardStyle`. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 4. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `gap`. |
| Text alignment (Text Align) | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Show icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show dividers between stats | On/off toggle in the inspector. On by default. Saved as `showDividers`. |
| Show descriptions | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Section padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingTop`. |
| Section padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingBottom`. |
| Card padding (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `cardPadding`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `borderRadius`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–64. block.json default: 36. Saved as `iconSize`. |
| Number color | Color control in the inspector. block.json default: #6c3fb5. Saved as `numberColor`. |
| Label color | Color control in the inspector. block.json default: #1e293b. Saved as `labelColor`. |
| Description color | Color control in the inspector. block.json default: #64748b. Saved as `descColor`. |
| Icon color | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Divider color | Color control in the inspector. block.json default: #e2e8f0. Saved as `dividerColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Section background | Color control in the inspector. Saved as `sectionBg`. |
| Title color | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Subtitle color | Color control in the inspector. block.json default: #64748b. Saved as `subtitleColor`. |
| Gradient from | Color control in the inspector. block.json default: #6c3fb5. Saved as `gradientFrom`. |
| Gradient to | Color control in the inspector. block.json default: #2563eb. Saved as `gradientTo`. |
When this is the right block
- A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants — that is the job of Stats Section, not a generic content block.
- Use it when you need the editor control labeled “Prefix (e.g. $)”, which exists on this block’s inspector.
- It matches pages about stats, numbers, counter.
- 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 Stats Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Stats Section”. It sits under Business. After insert, open Stats and set “Prefix (e.g. $)”, “Number / Value”, “Suffix (e.g. /5)”, “Label”.
What makes Stats Section different from other Blockenberg blocks?
A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants. Inspector labels on this block include “Prefix (e.g. $)”, “Number / Value”, “Suffix (e.g. /5)”, “Label”.
Is the Stats Section Gutenberg block free?
Yes. Stats Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Stats Section 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: Stats, Section Header, Layout & Style).
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.
KPI Tiles
Metric tiles grid with numbers, labels, trend indicators and mini sparkline charts.
Stats Counter
Display animated number counters with icons, labels, and rich customization.
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.
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 Stats Section from the Gutenberg inserter.