Blog · Gutenberg
Tech Radar block for WordPress
A technology radar listing technologies by adoption ring and quadrant.
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 technology radar listing technologies by adoption ring and quadrant.
Inspector panels on this block: Radar Settings, Blips, Layout Colors, Ring Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Ring” options: Adopt, Trial, Assess, Hold; “Quadrant” options: Languages & Frameworks, Platforms, Tools, Techniques; “Font Weight” options: 400 Regular, 500 Medium, 600 Semi-bold, 700 Bold, 800 Extra Bold.
Where to find it
Gutenberg inserter → Blog → search “Tech Radar” (block name `blockenberg/tech-radar` in block.json). Style it in the sidebar after insert.
How to use Tech Radar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tech Radar”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Radar Settings. Set “Radar Title”, “Description”, “Show Description”, “Group by Quadrant”.
- 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 |
|---|---|
| Radar Title | Text field in the inspector. block.json default: Technology Radar. Saved as `radarTitle`. |
| Description | Multiline text field in the inspector. block.json default: Our current view of the technology landscape — what we're adopting, trialing, assessing, and holding.. Saved as `description`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Group by Quadrant | On/off toggle in the inspector. Off by default. Saved as `groupByQuadrant`. |
| Show NEW badge | On/off toggle in the inspector. On by default. Saved as `showIsNew`. |
| Name | Text field in the inspector. Saved as `blips`. |
| Ring | Select control; the chosen value is saved on the block. Options: Adopt; Trial; Assess; Hold. Saved as `blips`. |
| Quadrant | Select control; the chosen value is saved on the block. Options: Languages & Frameworks; Platforms; Tools; Techniques. Saved as `blips`. |
| Description (Blips) | Multiline text field in the inspector. Saved as `blips`. |
| Mark as NEW | On/off toggle in the inspector. Saved as `blips`. |
| Base Font Size | Numeric range control in the inspector. Range 10–22. block.json default: 14. Saved as `fontSize`. |
| Ring Label Size | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `ringLabelSize`. |
| Blip Name Size | Numeric range control in the inspector. Range 10–20. block.json default: 14. Saved as `blipNameSize`. |
| Line Height (%) | Numeric range control in the inspector. Range 120–220. block.json default: 160. Saved as `lineHeight`. |
| Font Weight | Select control; the chosen value is saved on the block. Options: 400 Regular; 500 Medium; 600 Semi-bold; 700 Bold; 800 Extra Bold. block.json default: 400. Saved as `fontWeight`. |
| Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Layout Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Layout Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Layout Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Blip Name | Color control in the inspector. block.json default: #1f2937. Saved as `blipNameColor`. |
| Blip Desc | Color control in the inspector. block.json default: #6b7280. Saved as `blipDescColor`. |
| Quadrant Heading | Color control in the inspector. block.json default: #374151. Saved as `quadrantHeadColor`. |
| NEW Badge BG | Color control in the inspector. block.json default: #fef9c3. Saved as `newBadgeBg`. |
| NEW Badge Text | Color control in the inspector. block.json default: #713f12. Saved as `newBadgeColor`. |
| Adopt BG | Color control in the inspector. block.json default: #dcfce7. Saved as `adoptBg`. |
| Adopt Text | Color control in the inspector. block.json default: #14532d. Saved as `adoptColor`. |
| Adopt Border | Color control in the inspector. block.json default: #16a34a. Saved as `adoptBorder`. |
| Trial BG | Color control in the inspector. block.json default: #dbeafe. Saved as `trialBg`. |
| Trial Text | Color control in the inspector. block.json default: #1e40af. Saved as `trialColor`. |
| Trial Border | Color control in the inspector. block.json default: #2563eb. Saved as `trialBorder`. |
| Assess BG | Color control in the inspector. block.json default: #fef9c3. Saved as `assessBg`. |
| Assess Text | Color control in the inspector. block.json default: #713f12. Saved as `assessColor`. |
| Assess Border | Color control in the inspector. block.json default: #d97706. Saved as `assessBorder`. |
| Hold BG | Color control in the inspector. block.json default: #f3f4f6. Saved as `holdBg`. |
| Hold Text | Color control in the inspector. block.json default: #374151. Saved as `holdColor`. |
| Hold Border | Color control in the inspector. block.json default: #9ca3af. Saved as `holdBorder`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A technology radar listing technologies by adoption ring and quadrant — that is the job of Tech Radar, not a generic content block.
- Use it when you need the editor control labeled “Radar Title”, which exists on this block’s inspector.
- It matches pages about tech, radar, technology.
- 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 Tech Radar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tech Radar”. It sits under Blog. After insert, open Radar Settings and set “Radar Title”, “Description”, “Show Description”, “Group by Quadrant”.
What makes Tech Radar different from other Blockenberg blocks?
A technology radar listing technologies by adoption ring and quadrant. Inspector labels on this block include “Radar Title”, “Description”, “Show Description”, “Group by Quadrant”.
Is the Tech Radar Gutenberg block free?
Yes. Tech Radar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tech Radar 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: Radar Settings, Blips, Layout Colors, Ring Colors).
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 Tech Radar from the Gutenberg inserter.