Skip to main content
Support

Using the Decision Tree

Build an interactive troubleshooter in the Block Editor. Ask a question, give readers answers, and send each answer down its own path to an outcome.

River Sloane
Updated by River Sloane
5 min read
Table of Contents

A Decision Tree turns a branching support process into something your reader can click through. You ask a question, they pick an answer, and the tree shows them only the next thing that applies. It is the right block when the answer to "why isn't this working?" genuinely depends on what the reader tells you.

See a Decision Tree in Action 🌳

Here is a decision tree doing its job. Click through it and watch the chrome along the top: a Back button appears once you're a step in, and Start over returns you to the beginning.

This is an interactive decision guide — please view it online.

What are you about to write?

Pick the closest match.

Does every instruction need its own screenshot?
Use a Tabs block

Your options are parallel, so put each one behind its own tab and let the reader choose. See Using the Tabs Block.

Result
Use a Decision Tree

The path forks on something only the reader knows, which is exactly what this block is for. Keep reading below.

Result
Use a Steps block

Each step gets a title, a description, and its own screenshot slot, and the numbering looks after itself. See Using the Steps Block.

Result
Use a Numbered List

A plain ordered list is lighter and easier to scan. Save the Steps block for when the screenshots are doing real work.

Result

That tree is six nodes. Two of them ask a question, four are outcomes, and one answer leads to a second question rather than straight to an answer. The rest of this article is how to build one.

Not sure a tree is what you want? If every reader follows the same path in the same order, use the Steps block instead. Trees are for when the path forks.

Adding a Decision Tree

Type / anywhere in an article and pick Decision tree. /decision, /tree, and /troubleshooter all find it.

You start with a single empty question. Everything else you build from there.

How a Tree Fits Together

A tree is made of nodes. Every node has three parts, and only the first is required:

Part

What It's For

Question

The decision point, on a single line. This is what the reader sees at the top of the card

Description

Optional supporting detail underneath, for context the question alone doesn't give

Answers

The branches. Each answer is a button the reader clicks, and each one points at the node it leads to

The important idea: a node with no answers is an outcome. That is how a path ends. You don't mark a node as final, you simply don't give it anywhere else to go. Those are the four cards badged Result in the tree above.

Building Your First Tree

  1. Write your opening question in the first node
  2. Click + Add answer and type the answer label, for example "Yes" or "The page won't load"
  3. Click + Add node at the top of the block to create the node that answer should lead to
  4. Back on the answer, open the Choose destination… dropdown and pick that node
  5. Repeat until every answer points somewhere, and every path ends on a node with no answers

[[screenshot:decision-tree-node-editor.png]]

Answers are listed in the dropdown by their number and question text, so write each node's real question as soon as you create it rather than leaving a placeholder. A row of nodes all reading "Question 3" is hard to wire up.

Setting the Starting Question

One node is the entry point, and it is marked Start. To move it, hover the node you want and click Set start. The node marked Start is the one your reader sees first, no matter where it sits in the editing list.

This matters more than it sounds. The editor shows your nodes as a flat, scrollable list in the order you created them, which is almost never the order a reader travels through them.

Managing Nodes and Answers

Control

What It Does

Drag handle

Reorders the node in the editing list. This is presentation only, it does not change the tree's logic

Set start

Makes this the first question the reader sees

+ Add answer

Adds a branch to this node

Duplicate node

Copies the node, handy for outcomes that repeat similar wording

Delete node

Removes it. Any answer that pointed here is left showing Missing node, so re-point it. Until you do, that answer behaves like one with no destination at all: it simply won't appear as a button on the published page.

Remove answer

Each answer has its own destination dropdown and a × to remove it.

An answer that points nowhere never reaches your reader. Only answers wired to a real node in the same tree become buttons on the published page, so a half-finished branch disappears rather than showing a dead control.

Keyboard Shortcuts

The fields inside a tree have their own navigation, so you can build one without reaching for the mouse:

Keys

What It Does

Tab / Shift+Tab

Walks a node's question, description, and each answer in turn, then moves on to the next node. At either end you step out of the block

Enter in a question

Drops into that node's description

Enter in an answer

Adds another answer and jumps straight to it, so you can type a run of branches quickly

Cmd/Ctrl+A

Selects just the field you're in, not the whole article

Limits

A tree holds up to 30 nodes, with up to 8 answers on each. If you're pushing either ceiling it is usually a sign the tree is doing two jobs, and splitting it across two articles will read better anyway.

Decision trees don't print. Unlike most blocks, a tree needs to run in the browser to track where the reader has been and offer a back step. If someone prints or PDFs the article, the tree is replaced with a note pointing them online. Keep anything that must survive on paper outside the tree.

Once your tree is built, have a look at Understanding Block Types for the rest of the toolbox, or Shortcuts in the Block Editor for the full keyboard reference.

What did you think of this doc?

Previous Embedding Files Next Using the Inline Toolbar

Get in touch