Add block group variations to the block toolbar

[richtabor]

What problem does this address?

There's not a quick way to set blocks as a row, stack, (eventually the grid variation perhaps) when using the "Group" control from a block toolbar's options menu. Currently you have to invoke the Block Inspector to locate the variation icon shortcuts.

We already have the group variation icons that render with multi-select. I think it'd be nice if those variation icons were also available within the Group block's toolbar — instead of requiring the use of the Block Inspector. The Group block's toolbar only has block alignment, so there's plenty of room.

What is your proposed solution?

Add the block's variation icons to the block toolbar, allowing for quicker access to the Row/Stack/Grid icons. It is a bit odd having both the block icon and the "Group" variation, but we could probably use a "reset" type functionality.

One idea is having "Group" selected initially; I'm not 100% sure about this:

Another is to only show the "Group" control if one of the variations is selected. Don't love how clicking the "Group" icon then removes it:

CleanShot.2023-03-31.at.20.55.02.mp4

References:

1. Grouping blocks via the options menu:

2. You are then required to use the Block Inspector variation icons, to set a row, stack, or grid variation:

3. The existing multi-select BlockGroupToolbar controls. I'm proposing we have these row, stack, and now grid, variation controls on the core/group block:

[richtabor]

Thoughts? Have other ideas on how to better surface the block variation controls @WordPress/gutenberg-design?

[richtabor]

Here's another idea, though I'm not sure about it (same duplicate group icon issue):

CleanShot.2023-03-31.at.21.07.14.mp4

[paaljoachim]

Actually I think the last one with the drop down works best. It becomes somewhat similar to the Align icon next to it.
The only thing missing to the align icon is to have a small arrow in the bottom right. Giving the user a hint that there are additional options which one can find by clicking the align or Group variations if it ends up using the same method as align.

Example from Affinity Photo. (Photoshop has similar icons to give a hint that there are additional options available.)

[jameskoster]

I agree the last one is the best of the bunch, but I also wonder whether these should be part of the transform menu?

[richtabor]

I they're handy enough to be top-level toolbar controls.

We really wouldn't need the Group block's placeholder state as-is even, re (#49525). You would have the toolbar controls in a familiar place, with the existing/familiar iconography.

[jameskoster]

I they're handy enough to be top-level toolbar controls.

I agree, but the transform menu is already a top-level toolbar control? I'm just a little anxious about duplicating an action that already exists in very close proximity. It's not a strong opinion though, the Group toolbar is relatively sparse so the additional control(s) wouldn't add much noise.

We should probably update the transform options as well :)

We really wouldn't need the Group block's placeholder state as-is even

It would be nice to get rid of that 'select a layout' step 👍

[jasmussen]

Good thoughts all around.

High level we're spanning a bit broadly for the group, with transforms in the inspector, in the ellipsis menu, and in the transforms dialog. There's even an "Unwrap" item now. I think we can consolidate that quite a bit, and have as little as group and ungroup in the ellipsis menu, removing the unwrap (ungroup could unwrap a column if need be).

I tend to also lean towards the transforms menu being the interface to leverage for this, rather than the block toolbar itself. But that's more of a holistic thought about all transforms, rather than a particular note on this design itself. E.g. if #46195 becomes a thing more broadly, it's generally good to think of generic interfaces rather than group-specific features.

Finally, the transforms dropdown has been in need of love for a long time. I like to think of it as potentially being the "block control center", so I'd love to see us elevating what's there in that dropdown, and how visual it is. I think it can be an important transformation and previewing interface, holding not just block transforms, but pattern transforms as well. It would need a design pass.

That said, I'm also not strongly opposed to adding these transforms to the toolbar, there's certainly room. I'm just mainly waffling over whether the additional and group-only options are actually helpful or not.

We really wouldn't need the Group block's placeholder state as-is even, re (#49525). You would have the toolbar controls in a familiar place, with the existing/familiar iconography.

I actually think it's useful to keep the group block's placeholder state. You'll very rarely see it, due to how grouping can become a thing that happens to other content, or something you get through patterns. But when you do insert a group fresh on its own, it can be a useful layouting starting point. As I see it, it doesn't have to be about the group only, it could be a shortcut to multiple layouts, even complex multi-block wireframe patterns.

[richtabor]

Ran into this a good bit while building more patterns. It does seem a bit inconsistent that we'd have the transform controls available during multi-select, but not an empty group state. Maybe the existing transform dropdown would be fine, but idk.

[hanneslsm]

I also don't feel like the toolbar is the correct place.
Via the toolbar, we can already

• edit "levels" (e.g. H1, H2)
• toggle options (e.g. Image caption, search block)
• change styles (e.g. search block)
• transform the block (Image Block: "Add Text over image" should be removed #50025)
• edit the block (e.g. table)
• …

I like that the toolbar is primary for alignments, text styles (bold, italic…), and quick actions (like "Replace" for images)

Also, when building patterns I have the block inspector always open and find transforming groups there quite fast and intuitive: