Charts · Gutenberg
Decision Tree block for WordPress
Interactive step-by-step decision tree. Visitors answer yes/no (or custom) questions and follow branches to a personalised result. Fully editable node graph with breadcrumb trail and back navigation.
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
Interactive step-by-step decision tree. Visitors answer yes/no (or custom) questions and follow branches to a personalised result. Fully editable node graph with breadcrumb trail and back navigation.
Inspector panels on this block: Content, Nodes (' + a.nodes.length +. Those titles come from index.js, not from a shared template.
Behavior controls: “Type” options: Question (has branches), Result (leaf node).
Where to find it
Gutenberg inserter → Charts → search “Decision Tree” (block name `blockenberg/decision-tree` in block.json). Style it in the sidebar after insert.
How to use Decision Tree block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Decision Tree”, insert it. Category: Charts.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Show title”, “Subtitle”, “Show 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 |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Find Your Perfect Stack. Saved as `title`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Subtitle | Text field in the inspector. block.json default: Answer a few questions to find the right technology for your project. Saved as `subtitle`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Root (starting) node | Select control; the chosen value is saved on the block. block.json default: q1. Saved as `rootId`. |
| Show breadcrumb trail | On/off toggle in the inspector. On by default. Saved as `showBreadcrumb`. |
| Show step progress | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| Node ID | Text field in the inspector. Saved as `nodes`. |
| Type | Select control; the chosen value is saved on the block. Options: Question (has branches); Result (leaf node). Saved as `nodes`. |
| Yes label | Text field in the inspector. Saved as `nodes`. |
| Yes → goes to node | Select control; the chosen value is saved on the block. Saved as `nodes`. |
| No label | Text field in the inspector. Saved as `nodes`. |
| No → goes to node | Select control; the chosen value is saved on the block. Saved as `nodes`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Subtitle (Typo Subtitle) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtitle`. |
| Question size | Numeric range control in the inspector. Range 14–30. block.json default: 18. Saved as `questionSize`. |
| Body font size | Numeric range control in the inspector. Range 12–20. block.json default: 15. Saved as `fontSize`. |
| Breadcrumb font size | Numeric range control in the inspector. Range 9–18. block.json default: 12. Saved as `breadcrumbFontSize`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
| Card radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `cardRadius`. |
| Padding top | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Card BG | Color control in the inspector. block.json default: #f8fafc. Saved as `cardBg`. |
| Card border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #64748b. Saved as `subtitleColor`. |
| Question text | Color control in the inspector. block.json default: #0f172a. Saved as `questionColor`. |
| Yes button BG | Color control in the inspector. block.json default: #22c55e. Saved as `yesBg`. |
| Yes button text | Color control in the inspector. block.json default: #ffffff. Saved as `yesText`. |
| No button BG | Color control in the inspector. block.json default: #ef4444. Saved as `noBg`. |
| No button text | Color control in the inspector. block.json default: #ffffff. Saved as `noText`. |
| Back button BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `backBg`. |
| Back button text | Color control in the inspector. block.json default: #374151. Saved as `backText`. |
| Breadcrumb | Color control in the inspector. block.json default: #94a3b8. Saved as `breadcrumbColor`. |
| Result text | Color control in the inspector. block.json default: #ffffff. Saved as `resultTextColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Interactive step-by-step decision tree. Visitors answer yes/no (or custom) questions and follow branches to a personalised result. Fully editable node graph with breadcrumb trail and back navigation — that is the job of Decision Tree, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about decision, tree, quiz.
- Inserter grouping: reports, dashboards, and data-heavy 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 Decision Tree block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Decision Tree”. It sits under Charts. After insert, open Content and set “Content — Title”, “Show title”, “Subtitle”, “Show subtitle”.
What makes Decision Tree different from other Blockenberg blocks?
Interactive step-by-step decision tree. Visitors answer yes/no (or custom) questions and follow branches to a personalised result. Fully editable node graph with breadcrumb trail and back navigation. Inspector labels on this block include “Content — Title”, “Show title”, “Subtitle”, “Show subtitle”.
Is the Decision Tree Gutenberg block free?
Yes. Decision Tree ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Decision Tree 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: Content, Nodes (' + a.nodes.length +).
Related charts blocks
Area Chart
Smooth filled area chart with multiple datasets, gradient fills, and animation using Chart.js (CDN). Great for showing trends over time.
Bar Chart
Vertical or horizontal bar chart with multiple datasets using Chart.js (CDN). Supports stacked, border radius, and custom colors.
Box Plot
Box-and-whisker statistical chart showing min, Q1, median, Q3, max, mean, and outliers for multiple data series.
Bubble Chart
Interactive bubble chart powered by Chart.js.
Bullet Chart
Stephen Few's bullet chart — shows actual performance against a target, with background bands for Poor / Satisfactory / Good ranges.
Bump Chart
Ranking chart that shows how positions change over time — each series is a curved line with rank labels at each column.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Decision Tree from the Gutenberg inserter.