Consider new icons for "Group" and "Ungroup"

[kjellr]

When the Group block was originally introduced, it was positioned as a "Container" or "Section" block. The icon was designed to represent that idea:

Since merge, the block has been renamed to "Group", and work is in progress (#14908) to add group and ungroup actions alongside it. With this new framing, we should reassess whether or not the current icon best represents the block's functionality.

For #14908, some initial thought was put into the icons for those actions, and the question was raised whether or not the actual block icon should be revised to match. Since decisions around those icons aren't essential to getting the functionality merged in, I wanted to break this out into a separate thread for discussion.

Oddly enough, Material doesn't include icons for Group and Ungroup. The draft icons used in #14908 are custom ones:

These are loosely based on the closest thing we have to icons for "single/group" right now: The image and gallery icon:

The "Group" icon is structured similarly to the Gallery icon, but the "Ungroup" one is a little more specific, showing two entirely separate cards being pulled apart.

A quick glance at the icons used in other applications shows this "layered vs. apart" treatment is fairly common:

_(Keynote, Sketch)_

Those examples also show a selection outline. It may make some sense to try adding that here too.

I'm dumping all my other explorations below for reference:

As noted in the other thread, versions 1, 2, and 7 are my favorites for now. @melchoyce liked 2, along with 9 and 10. @mapk felt that 8 best represented the actions.

Any further ideas/reactions are greatly appreciated!

[mtias]

1 and 2 seem the clearest and most straightforward to me. 9, 10, 11 feel like they could be used for other layout tools (rows / columns).

[melchoyce]

Also just saw these icons:

[kjellr]

We actually use (the outline version of) that layers one for the individual column block. 😄

[mapk]

I really like the "grouped" version of the icon to include an outline, but I think the box style shown above isn't great. I do like the examples where the box outline has nodes in the corners.

I lean toward 8 or 5 because any overlapping icons tend to communicate a grouped item to me. If we can modify the outline in 8 like below, I think that might help. This is pretty rough just for conversations.

Even 7 above feels pretty good too!

[kjellr]

If we can modify the outline in 8 like below, I think that might help.

Unfortunately, I haven't been able to make something like this this work given the constraints of the pixel canvas, and the size and line weight requirements of Material Icons.

The closest I can get is something like these, and I think they're a little fiddly and weird looking.

--

It seems like we're pretty all over the place. 😄 The most-liked one from above has been number 2, but @mapk disliked that it reminded him of pathfinder tools in Illustrator (which is totally valid and true, but perhaps not a universal issue):

The more I stare at it, the more I'm not sure it's right.

@drw158, do you have any thoughts for this one?

[jemlovestodraw]

I like option 8 above. For me, the box around the grouped items makes the distinction between grouped and un-grouped much clearer. Could be worth a look at Font Awesome for inspiration:
Group https://fontawesome.com/icons/object-group?style=regular
Ungroup https://fontawesome.com/icons/object-ungroup?style=regular
But I'm not a fan of the fiddly transform control boxes on the corners of those.

[strarsis]

+1! Being able to group a large number of selected blocks into a new group block would be really helfpul.

[mapk]

Similar to number 8 above, how does this look?

[kjellr]

@mapk I find the shape in the Group version of that just a little awkward, personally. Here are a few more variations on that:

All of these use the handles from Material's format-shapes icon, which seems like a reasonable example to stick to. I like version 8D the best.

(Also, I tried having the blocks stacked vertically, which would be more common in Gutenberg, but I felt that it read too much like a B).

[mapk]

The handles from Material look good. Nice touch! I actually liked the stacked items in the shape of the B because of your relation to actual Gutenberg blocks. I removed the radius and kept it staggered. What do you think, @kjellr? Without all the rounded corners, I think it feels a lot better.

If that still doesn't sit well, let's go with 8D from your mockups.

[kjellr]

I made a slight adjustment to include a bit of a rounded corner on the interior blocks:

Then I tried it out in context. I'm not particularly happy with it, personally. The handles look much too blocky — almost like it's a pixellated illustration of what we're going for:

I think straying from the Material example for those handles may be in our best interest after all. Something like this might work, but I need to double check when I'm on a non-retina screen later today (Since those handles are just 1px larger than the borders, I'm worried they may be blurry on some screens):

[kjellr]

Something like this might work, but I need to double check when I'm on a non-retina screen later today (Since those handles are just 1px larger than the borders, I'm worried they may be blurry on some screens):

Actually — looking at this on a non-retina screen, it's totally fine. 😄 So I think we're ok.

My only remaining concern is that "Ungroup" doesn't really make much sense when it appears on its own. Does anyone have any thoughts or ideas about that?

Thanks!

[melchoyce]

Maybe "Ungroup Blocks" would make it a tiny bit more clear?

[kjellr]

It sounds like we're feeling good about that last set of icons, possibly with the added "Blocks" label in the ellipsis menu item. I'll keep an eye on #14908 and create a PR for this after that's merged in.