Site Editor: reduce the template descriptions footprint

[javierarce]

While working on this issue I noticed that the current list of templates (and the future list of areas / template parts) would benefit from having a way to toggle the descriptions or at least reduce the amount of text that is presented to the users. In some cases, like the description for "Archive" or "Front page" the text spans up to four or five lines.

I think that with a simple fix we could make the list of templates shorter and faster to scan.

What is your proposed solution?

I propose a couple of solutions: showing the text only after the template is selected or (my preferred solution, as it gives some context) shortening the description with an ellipsis.

[mtias]

Showing only on selection is interesting, I could see that working. Right now it's hard to scan the list given the typographic hierarchy between template title and description is faintly established. The example with the ellipsis I think still suffers a bit from that.

[javierarce]

What if we reinforced the hierarchy using white or a lighter gray for the titles? I think this could also be a good general improvement.

[pablohoneyhoney]

The context is more relevant when you are actively engaged in a task (seems more logic to me) -the added information in other options pollute the interface, the quick scanning, and your focus, wether performing a shallow or deep, low or high frequency flow.

[mtias]

The lighter titles definitely help there.

[paaljoachim]

I really like the idea of splitting up the information and showing the ... to signal that there is more information to read.
Example (hmm I am not able to copy the the Index template description as text)
We could instead see:
"The default template used when no other template is available....."

As more templates will be added having a specific amount of characters/words before adding the ... could be helpful.

---

Feedback from Shaun as I brought up this issue during a design triage.
I think your first suggestion, @javier, of showing the info only when the template is active is the better option than the truncated text. The truncated text can then only be read if you switch templates, which I think might be annoying and lead to unintended navigation.

---

That is a good point.

[shaunandrews]

I think your first suggestion @javierarce, of showing the info only when the template is active is the better option than the truncated text.

The truncated text can only be read if you switch templates, which I think might be annoying and lead to unintended navigation. Also, I think the list is easier to scan without all the descriptions showing.

Perhaps you could explore showing the descriptions in a flyout on hover, like we do with blocks in the inserter.

[javierarce]

Ok, here's a couple of prototypes with the flyout concept. In the first one, the cards are static. In the second one, the card titles are aligned (this probably won't work in some cases, and it's harder to implement, but it makes reading the information easier)

one.mov

two.mov

• Figma prototype for the static version
• Figma prototype for the relative version

[jordesign]

Closing this issue as no longer relevant - due to the new style/heirarchy of templates in the sidebar in WP6.3