Truncate filter chips

[jameskoster]

• Chips can only grow to the width of the container, at that point they are truncated.
• All active filters are visible.
• Chips are slightly squished (24px height down from 32).

Codepen including updated metrics and styles.

[jameskoster]

Even if we restrict the number of values to two, and truncate the values, chips can still be quite long:

This one may be best to finesse in a PR.

[jasmussen]

Can it be "Status is: Published, Pending, +3 more"?

[jameskoster]

I think that's what I suggested above? Show two values then a count for additional.

I think we probably need to truncate the values at a certain point too as some could be very long. Think of custom tags, category names, dates, etc. It would be fine to address that spearately when the need arises though.

[jasmussen]

Right, but perhaps without the eliding 🤔

My take: for those advanced chips that get really long, it's okay that they get really long, because you are building advanced queries. I guess they should still not be so long that a single chip breaks in two and wraps, perhaps that's what you mean about eliding?

Finally, controversial take and would be subject to reduce motion of course: how about a marquee behavior? I.e. if longer than n pixels, bounce the label back and forth, slowly?

[jameskoster]

Ah, the ellipsis was to indicate the truncation of 'Pending review', as an example. We could just shorten that label to 'Pending', but we won't always be able to shorten this way.

I agree it's fine for the number of chips to grow when adding many filters. But I also think there could be a point where the chips themselves become egregiously long, even if we limit the display of values to two or three. For example a filter between dates with a longer date format, and a tag filter:

[Publish date is between: 2024-03-10 10:00:00, 2024-04-11 10:00:00] [Tag contains: Month in WordPress, WordCamp Europe, + 3]

That might be an edge case though, so fine to address later.

[jasmussen]

There has to be a more compact way of showing datestamps than that, across WordPress. But yes, point made. I do believe mobile app stores have scrolling filter chips too.

[colorful-tones]

Hi folks, We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

[jameskoster]

This still needs some design to handle wrapping:

[jameskoster]

I tried a couple of experiments to explore options here.

Option 1 – Codepen

• Chips can only grow to the width of the container, at that point they are truncated.
• All active filters are visible.
• Chips are slightly squished (24px height down from 32).

Option 2 – Codepen

• Container scrolls horizontally to conserve vertical space
• Individual chips can only span 90% of the container width

---

Give we intend to move the filtering UI to a dedicated panel (https://github.com/WordPress/gutenberg/issues/60696) I think option 1 is the way to go. I don't love how much vertical space the filters occupy, but if the user finds them too noisy they can easily be hidden by closing the filter panel.

Option 2 is a good one to have up the sleeve in case the filter panel doesn't work out.