Cleaner UI for collapsed Matrix blocks

[thupsi]

There's been some discussion of (optionaly?) using the Card UI as the collapsed state for Matrix blocks. While I think that's a good idea, I would like to propose some simple UI improvements for collapsed matrix blocks, without making them full-on cards.

Right now the collapsed state is a just too noisy and hard to parse:

Current UI

Some problems here:

• Too much emphasis is given on the block type, with much repetition, while the actual block title (if there is one), which is much better for "signposting" the various content parts, is hard to make out.
• The "preview" adds noise and is too hard to parse, with fields joined in an unintelligible blob.
• The whole collapsed block has too little padding, resulting in the UI looking too tight and possibly harder to use for some users due to the small target height.

Proposed UI

A "cleaner" and more "author friendly" solution might be something like the following:

Notice that:

• The title of each block is most prominent, while the block type is more discreet. Because of this the author immediately gets a much better content overview.
• The content preview is removed (Could be revealed on hover/focus? Could use the preview fields from the Card UI?).
• The padding is more generous, improving usability and readability, while remaining more space-efficient than a card.
• Bonus: The larger bar at the top of each matrix block provides clearer separation when blocks are expanded.

For full disclosure, I'd like to add that part of the inspiration for this came from using the "flexible content" field type from ACF Pro, which looks like this (with extra utility ui visible on hover):

[thupsi]

Admittedly, the Card UI, when reduced to just the title, is not far from the above suggested UI 🙂:

[thupsi]

On the other hand, my proposal is mainly just CSS (easier to implement?) and, perhaps, sidesteps the problem of having two identical pieces of UI that behave differently (Cards that expand and cards that open in a slideout).

[mmikkel]

IMO, the most important purpose of being able to collapse blocks, is to make it easier to drag'n'drop blocks to re-arrange their order. Their minimal height really helps with that. So I'd be extremely wary of any change that would make the collapsed blocks meaningfully larger/taller.

I also don't really agree that there is "too much emphasis is given on the block type". I think the design and positioning of the entry type icon + name needs to be identical as it is for the expanded state, otherwise it would be disorienting for authors when blocks become collapsed. It's the one element that "anchors" the collapsed/expanded states, if that makes sense.

I do agree that the "preview" is often an unintelligible blob. My money would be on using entry types' "UI Label" instead. The UI Label defaults to the Title field, but Craft 5.9 added the option to customise the UI Label format, which means you can put anything in there. Entry types without a UI Label could fall back to the current behavior.

TL;DR – I'd vote to keep the design of collapsed blocks as-is, but use entry types' UI Label instead of the auto-generated "preview" text instead, if there is a UI label 😊

[thupsi]

The icon and name positioning should indeed stay consistent between states, I'm not implying the opposite 🙂. I was suggesting the UI label (perhaps truncated if long) should take the place of the blocktype in both states (with the blocktype still visible but de-emphasized).

[thupsi]

But if we're talking about consistency between blocks with title and those without, then yes, the order should be switched from the one I have in my mockup. So, the blocktype would always come first.

[brandonkelly]

Resolved this for Craft 5.10: going forward, entries’ UI labels will be used as their collapsed block preview text, whenever possible. (0278365)