Blog · Gutenberg
Decision Matrix block for WordPress
Weighted criteria scoring matrix to compare options and surface the best decision with totals and a winner highlight.
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
Weighted criteria scoring matrix to compare options and surface the best decision with totals and a winner highlight.
Inspector panels on this block: Title, Options (, Criteria (, Display, Appearance. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Blog → search “Decision Matrix” (block name `blockenberg/decision-matrix` in block.json). Style it in the sidebar after insert.
How to use Decision Matrix block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Decision Matrix”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Title. Set “Show Title”, “Title — Title”, “Show Subtitle”, “Subtitle”.
- 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 |
|---|---|
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Title — Title | Text field in the inspector. block.json default: Decision Matrix. Saved as `blockTitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: Scores are 1–10. Weighted totals determine the winner.. Saved as `blockSubtitle`. |
| Name | Text field in the inspector. Saved as `options`. |
| Label | Text field in the inspector. Saved as `criteria`. |
| Weight (importance) | Numeric range control in the inspector. Range 1–10. Saved as `criteria`. |
| Show Weights Column | On/off toggle in the inspector. On by default. Saved as `showWeights`. |
| Show Weighted Score | On/off toggle in the inspector. On by default. Saved as `showRawScores`. |
| Highlight Winner | On/off toggle in the inspector. On by default. Saved as `showWinner`. |
| Winner Label Font Size | Numeric range control in the inspector. Range 10–24. block.json default: 15. Saved as `winnerFontSize`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `borderRadius`. |
| Block Background | Color control in the inspector. Saved as `bgColor`. |
| Header Background | Color control in the inspector. block.json default: #1e293b. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Criteria Label Bg | Color control in the inspector. block.json default: #f1f5f9. Saved as `criteriaLabelBg`. |
| Criteria Label Color | Color control in the inspector. block.json default: #475569. Saved as `criteriaLabelColor`. |
| Cell Background | Color control in the inspector. block.json default: #ffffff. Saved as `cellBg`. |
| Cell Color | Color control in the inspector. block.json default: #374151. Saved as `cellColor`. |
| Border Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Winner Background | Color control in the inspector. block.json default: #eff6ff. Saved as `winnerBg`. |
| Winner Color | Color control in the inspector. block.json default: #1d4ed8. Saved as `winnerColor`. |
| Winner Border | Color control in the inspector. block.json default: #3b82f6. Saved as `winnerBorderColor`. |
| Total Row Bg | Color control in the inspector. block.json default: #f8fafc. Saved as `totalRowBg`. |
| Accent Color | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- JavaScript functions that perform the math: calcTotals.
When this is the right block
- Weighted criteria scoring matrix to compare options and surface the best decision with totals and a winner highlight — that is the job of Decision Matrix, not a generic content block.
- Use it when you need the editor control labeled “Show Title”, which exists on this block’s inspector.
- It matches pages about decision, matrix, comparison.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
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 Decision Matrix block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Decision Matrix”. It sits under Blog. After insert, open Title and set “Show Title”, “Title — Title”, “Show Subtitle”, “Subtitle”.
Does Decision Matrix need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Decision Matrix Gutenberg block free?
Yes. Decision Matrix ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Decision Matrix 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: Title, Options (, Criteria (, Display).
Related blog blocks
Pros & Cons
A two-column pros and cons comparison block for reviews and articles. Supports editable items, custom icons, heading, and full color control for each column.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Decision Matrix from the Gutenberg inserter.