Data views: Grid layout refinements

[jameskoster]

Here's a first pass at some enhancements we can make to the Grid layout.

1. Grid Gallery: feels like a more appropriate name for the most visual layout. Particularly on mobile where single-column is a likely occurrence.
2. View button icon switches to image when Gallery layout is selected
3. Range slider to adjust the number of columns with (potential) min/max values: 2-4
4. Shift or CMD + click to select (checkboxes are visually hidden). It seems okay to de-emphasise bulk actions a bit in this layout.
5. Actions toolbar appears on hover / focus
6. Fields appear with label (matches column header from table view) according to view options
7. Clicking a card sends you to edit view

cc @WordPress/gutenberg-design for feedback.

[jasmussen]

Great start.

• Could the items be the same height most of the time? This may be an oversight but I'm looking at blog being shorter (or "Contact" being taller?)
• I wonder if we can't condense the rows just a little bit to make the card less tall. There's a fair bit there.
• What happens if there isn't a featured image?
• I'm assuming both from the check on "Comments enabled" and the black text that the entire card is clickable and no interactions are available directly in the card.
• Should the blog/home icons be directly in context of the page name itself, either before or after? Might bring more context.
• I wonder if we can combine some of the metadata into the prose rather than separate it out in table view. For example it might say 🖋️ Blog Published — we might even go further and simply write out prose on a new line such as "Published on Oct 31, last modified 3 days ago. Comments are disabled.
• Across all of the editor and WordPress we should seek out a single date format that works well. I'm a fan of "Aug 24, 2023" rather than the full month name which in translations can be long.
• If we keep separate columns, I wonder if we should have two left-aligned columns, to match the Summary panel?
• Instead of "Comments enabled" with a checkmark, would it be better with Comments Enabled?
• Zoom slider looks great. I wonder if we should use the category icon (4 cards) instead of the columns icon for the most zoomed out view?

[paaljoachim]

Would this be associated with Image Gallery block and Query Loop block?
As having a grid method consistency between these and whatever else that could benefit from a kind of grid upgrade would be helpful.

[jameskoster]

Good notes, thanks.

I wonder if we can't condense the rows just a little bit to make the card less tall. There's a fair bit there

The cards will condense based on how many fields you elect to display. Featured Image and Title are the only mandatory data, so you can easily configure something like this in the view options:

I'm assuming both from the check on "Comments enabled" and the black text that the entire card is clickable and no interactions are available directly in the card.

To begin with, yes. In the future we can consider inline edit-ability.

@paaljoachim this is for the "Manage all pages" view in the Site Editor.

[mateuswetah]

Loving all of this! A few comments:

• About the name... I would put my bet on "Cards" instead of either Grid or Gallery.
• Is the selected posts popup sticky/floating to the bottom?
• Will large post/author names add ellipses? If yes, will then a tooltip for seeing all of it?
• The selected indicator looks a lot like a focus indicator to me... I would much prefer having some sort of visual checkbox. It could be on a corner and appear only on hover/select? Then when selected stay visible all the time.

[jameskoster]

Hmm, is "Cards" a bit technical / ambiguous? I don't know if I'd expect a "card" view to be arranged in a grid. Tricky one!

Is the selected posts popup sticky/floating to the bottom?

Yes, bulk actions are explored in #55098.

Will large post/author names add ellipses? If yes, will then a tooltip for seeing all of it?

Good question. Here are some quick mockups for an extra long title:

No truncation

Truncation on two lines

Truncation on one line

My instinct is that truncating to two lines might be a sweet spot. It will likely avoid truncation for the majority of use cases, and avoid egregiously long cards when there are extremely long titles. What do y'all think?

The selected indicator looks a lot like a focus indicator to me

Good point. The tricky thing about 'overlaying' the checkbox on the image will be ensuring contrast. We might need to place it on a field which I don't love visually, but perhaps it could work?

[paaljoachim]

James this looks really really nice! The last mockup shows very useful information about each page.

[mateuswetah]

Hmm, is "Cards" a bit technical / ambiguous? I don't know if I'd expect a "card" view to be arranged in a grid. Tricky one!

Maybe it is a language thing, for me its OK, but I'm not 100%. I think the fact that it does not has-to be arranged in a grid plays well with the previous argument that in mobile it will stack, so it does not looks always like a grid. Also, it does a good opposition to table view for me. I keep reading in my mind "View posts as cards", "View posts as table", "View posts as gallery"... gallery seems to promise something richer and complex, I'm not sure.

My instinct is that truncating to two lines might be a sweet spot. It will likely avoid truncation for the majority of use cases, and avoid egregiously long cards when there are extremely long titles. What do y'all think?

Agreed!

Good point. The tricky thing about 'overlaying' the checkbox on the image will be ensuring contrast. We might need to place it on a field which I don't love visually, but perhaps it could work?

Yeah that is tricky... Let's keep thinking of it :)

[SaxonF]

What happens if there isn't a featured image?

To @jasmussen point above, we also need to consider post types where the visual is of the actual content. For example, the current patterns page shows the pattern itself, as will the media library most likely. This does not rely on a single field like featured image. Perhaps this is just a view setting.

[paaljoachim]

I usually add a featured image to a post so that it shows up in the Query Loop blog post previews.
For a page I see no point in adding a featured image so pages usually do not have one.
Being able to show some of the content in a kind of page preview in a thumbnail would be very helpful.

Here is an example from Manage WP which shows page previews.

[jameskoster]

Perhaps this is just a view setting

Where featured image and content coexist there could be a preview field option.

[mateuswetah]

Where featured image and content coexist there could be a preview field option.

Love the flow proposed for this, the challenge is to define the default behavior hehhe.

@jameskoster you can see in the ManageWP example that they add the checkbox in the same area of the information... maybe this is a good hint... to share a similar example, here is a plugin that I work on:

Not really the same thing as the media is above, but I believe the textual information should be in the same place of the checkbox as this would avoid contrast issues.

[jameskoster]

It's an option, but the alignment feels a bit clunky to me, especially when the title spans two lines.

Reducing the prominence of the grid can help a bit, but I'm still unsure.

We probably need to decide more generally how selection works across all views. Is it a traditional checkbox pattern as we've been exploring? Or do we consider something more like a file browser with click to select, double-click to edit?

[mateuswetah]

Yeah I feel you on the alignment thing 😢

While we are not there I'm really pro-checkbox. It takes advantage of being a pattern already well known in the table view. Also, double-click is a no-no-no-go for web, in my opinion.

Another solution, which I'm not very fond of is to use the strategy from the WordPress media library: When using the grid view mode, there is a button to toggle the selection mode. The reason why I don't like it's because it really creates two behaviors for the selection action, according to which state you are... but again, maybe it makes sense.

[jameskoster]

Yup, let's persevere with the checkbox :)

Circling back to the view options for a moment, do y'all think users should be locked into including a preview in the grid layout? My instinct is yes, and this would be a pre-requisite of the grid view being available in the first place. Related to this, it probably doesn't make sense to allow a content preview in list view as it would be too small, which leads to different view options based on layout:

Grid

Table

Any thoughts on this?

[jasmussen]

Circling back to the view options for a moment, do y'all think users should be locked into including a preview in the grid layout? My instinct is yes, and this would be a pre-requisite of the grid view being available in the first place.

A preview, especially of the page, does seem like a main use case for these larger gridded views. I'm remembering even a zoom-slider.

That said, I'm increasingly iffy on the role of "featured image" in these use cases. Almost none of my pages on my own site have a featured image, and I always forget to set it. This is a data point of one, and an implementation detail of my own site, but I still have a feeling that most people will have featured images for some, and not others. That relates to this:

Related to this, it probably doesn't make sense to allow a content preview in list view as it would be too small, which leads to different view options based on layout:

Should this even be a choice? If some have featured images, but not all, how would the grid look? How would the grid look if you had a mix of page and featured image previews? What would the option look like in that case?

In terms of quick editing, I see the validity of including it as a field, but speaking at more of a higher level, it might be good to veer towards a "start with less" ethos; it's always easier to add than it is to remove, and if we add all these options, nested mens aside, we may have built up a lot of cognitive load for options that in most cases never get touched.

[finidev]

Hmm, is "Cards" a bit technical / ambiguous? I don't know if I'd expect a "card" view to be arranged in a grid. Tricky one!

If you really think about it, grid and list implies a view type. Whereas the term "card" represents a design aspect.

[jameskoster]

@jasmussen I think it's fairly subjective. If a lot of your content looks similar then the 'content' preview might be less useful than the 'featured image' option, especially if you are someone who uses that feature religiously. A rough mockup using featured images on the left, content on the right:

Should this even be a choice? If some have featured images, but not all, how would the grid look?

I'd imagine placeholders like in the Editor:

How would the grid look if you had a mix of page and featured image previews?

I'm not sure we should allow a mixture – you pick one or the other.

[jameskoster]

If you really think about it, grid and list implies a view type. Whereas the term "card" represents a design aspect.

@finidev It may not matter so much in practise, but on small screens there's a good chance that 'grid' mode would result in a 'list' view. That's why I like 'Gallery'. It suggests a view type that's more visual, but not strictly tied to a specific layout.

[mateuswetah]

Naming is such a complicated thing that now that @finidev said that I'm wishing we could change the "List" by "Table" so we could keep the "Cards" in a sense that we're talking about a design aspect for me!

And list, well... all of them are listing, aren't them? English is not my first language so there is a lot of gray area for these terms. I suffer to explain to my non-WordPress colleagues what the whole idea of "Archive" means because "Lista de posts" or "Lista de páginas" feels a lot more natural in a literal translation to Portuguese 🤭

In the end I feel this naming discussion in particular may also be superfluous, either gallery or grid will be understandable with the icons and the immediate visual result. The important thing would be to establish a standard across the UI. Checking again the WordPress media library, it uses "Grid" and "List" so... 🙃

[SaxonF]

@jameskoster the preview setting might need to be on parent. The list of fields is essentially a multi-select (like our filters) which could include a search, so I think its best we don't introduce a secondary action/option.

[jameskoster]

Do you mean offering Featured Image and Content as separate options, not mutually exclusive?

[ntsekouras]

Should we update this with new refinements or close and create a new one?

[jameskoster]

Let's close. I think can tackle remaining items in dedicated issues/PRs.