Business · Gutenberg
Social Stats block for WordPress
Social media platform stats — display follower counts, subscriber milestones and engagement metrics with platform-branded icons (Instagram, YouTube, TikTok, LinkedIn, X/Twitter, Facebook, Pinterest).
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
Social media platform stats — display follower counts, subscriber milestones and engagement metrics with platform-branded icons (Instagram, YouTube, TikTok, LinkedIn, X/Twitter, Facebook, Pinterest).
Inspector panels on this block: Platforms, Header, Layout & Display, Colours, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Card style” options: Card (white), Minimal (borderless), Colored fill.
Where to find it
Gutenberg inserter → Business → search “Social Stats” (block name `blockenberg/social-stats` in block.json). Style it in the sidebar after insert.
How to use Social Stats block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Social Stats”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Platforms. Set “Platform”, “Handle / channel name”, “Primary metric label”, “Primary metric value”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-platforms. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Platform | Select control; the chosen value is saved on the block. |
| Handle / channel name | Text field in the inspector. |
| Primary metric label | Text field in the inspector. |
| Primary metric value | Text field in the inspector. |
| Secondary metric label | Text field in the inspector. |
| Secondary metric value | Text field in the inspector. |
| Profile URL | Text field in the inspector. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Header — Title | Text field in the inspector. block.json default: Follow Along. Saved as `title`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: Join our growing community across every platform.. Saved as `subtitle`. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 4. Saved as `columns`. |
| Card gap (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `gap`. |
| Card style | Select control; the chosen value is saved on the block. Options: Card (white); Minimal (borderless); Colored fill. block.json default: card. Saved as `cardStyle`. |
| Use platform brand colours | On/off toggle in the inspector. Off by default. Saved as `usePlatformColors`. |
| Show handle / channel name | On/off toggle in the inspector. On by default. Saved as `showHandle`. |
| Show second metric | On/off toggle in the inspector. On by default. Saved as `showSecondMetric`. |
| Entrance animation | On/off toggle in the inspector. On by default. Saved as `animated`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–48. block.json default: 28. Saved as `iconSize`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-platforms.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Social media platform stats — display follower counts, subscriber milestones and engagement metrics with platform-branded icons (Instagram, YouTube, TikTok, LinkedIn, X/Twitter, Facebook, Pinterest) — that is the job of Social Stats, not a generic content block.
- Use it when you need the editor control labeled “Platform”, which exists on this block’s inspector.
- It matches pages about social, stats, followers.
- 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 Social Stats block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Social Stats”. It sits under Business. After insert, open Platforms and set “Platform”, “Handle / channel name”, “Primary metric label”, “Primary metric value”.
Where do Social Stats submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Social Stats Gutenberg block free?
Yes. Social Stats ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Social Stats 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: Platforms, Header, Layout & Display, Colours).
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.
Stats Section
A landing-page statistics section — large numbers with labels, icons, optional section heading, and multiple layout/style variants.
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
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.
Community Section
Social community proof section with overlapping member avatars, member count, heading, CTA button, and trust badges.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Social Stats from the Gutenberg inserter.