Blog · Gutenberg
Survey Results block for WordPress
Display survey data with percentage bars, charts, and methodology notes.
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
Display survey data with percentage bars, charts, and methodology notes.
Inspector panels on this block: Survey Info, Display Options, Questions & Data, Methodology, Header & Layout Colors, Chart & Option Colors. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Blog → search “Survey Results” (block name `blockenberg/survey-results` in block.json). Style it in the sidebar after insert.
How to use Survey Results block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Survey Results”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Survey Info. Set “Survey Title”, “Organization”, “Date”, “Respondents Label”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Survey Title | Text field in the inspector. block.json default: Developer Experience Survey 2026. Saved as `surveyTitle`. |
| Organization | Text field in the inspector. block.json default: Stack Overflow. Saved as `organization`. |
| Date | Text field in the inspector. block.json default: January 2026. Saved as `surveyDate`. |
| Respondents Label | Text field in the inspector. block.json default: respondents. Saved as `respondentsLabel`. |
| Number of Respondents | Numeric range control in the inspector. Range 100–1000000. block.json default: 89000. Saved as `respondents`. |
| Show Meta (org, respondents, date) | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show Bars | On/off toggle in the inspector. On by default. Saved as `showBars`. |
| Show Percentages | On/off toggle in the inspector. On by default. Saved as `showPercentages`. |
| Show Counts | On/off toggle in the inspector. Off by default. Saved as `showCounts`. |
| Highlight Winner Option | On/off toggle in the inspector. On by default. Saved as `highlightWinner`. |
| Bar Height (px) | Numeric range control in the inspector. Range 4–24. block.json default: 10. Saved as `barHeight`. |
| Question Text | Multiline text field in the inspector. Saved as `questions`. |
| Show Methodology | On/off toggle in the inspector. On by default. Saved as `showMethodology`. |
| Methodology Text | Multiline text field in the inspector. block.json default: Online survey conducted among registered developers. Respondents could select multiple answers where applicable. Percentages may exceed 100% for multi-select questions.. Saved as `methodology`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Block Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header & Layout Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Meta Text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Methodology BG | Color control in the inspector. block.json default: #f8fafc. Saved as `methodologyBg`. |
| Methodology Text | Color control in the inspector. block.json default: #6b7280. Saved as `methodologyColor`. |
| Question Text | Color control in the inspector. block.json default: #111827. Saved as `questionColor`. |
| Label Text | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Percent Text | Color control in the inspector. block.json default: #111827. Saved as `percentColor`. |
| Count Text | Color control in the inspector. block.json default: #6b7280. Saved as `countColor`. |
| Bar BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `barBg`. |
| Bar Fill | Color control in the inspector. block.json default: #3b82f6. Saved as `barFill`. |
| Bar Fill (Winner) | Color control in the inspector. block.json default: #1d4ed8. Saved as `barFillWinner`. |
| Winner Row BG | Color control in the inspector. block.json default: #eff6ff. Saved as `winnerBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Display survey data with percentage bars, charts, and methodology notes — that is the job of Survey Results, not a generic content block.
- Use it when you need the editor control labeled “Survey Title”, which exists on this block’s inspector.
- It matches pages about survey, poll, results.
- Inserter grouping: posts, magazines, and editorial WordPress 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 Survey Results block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Survey Results”. It sits under Blog. After insert, open Survey Info and set “Survey Title”, “Organization”, “Date”, “Respondents Label”.
What makes Survey Results different from other Blockenberg blocks?
Display survey data with percentage bars, charts, and methodology notes. Inspector labels on this block include “Survey Title”, “Organization”, “Date”, “Respondents Label”.
Is the Survey Results Gutenberg block free?
Yes. Survey Results ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Survey Results 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: Survey Info, Display Options, Questions & Data, Methodology).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Survey Results from the Gutenberg inserter.