Group Block: Add Aspect Ratio Control

[iamtakashi]

I love the addition of the aspect ratio control to the cover block and wanted to make something like this—the content inside stretches to the available space, which users should be able to do, but they can't at the moment.

Could we add the same aspect ratio control to all the Group/Row/Stack/Grid? It is simple to use and behaves expectedly. It'd unlock more interesting layouts without complicated workarounds.

cc: @jasmussen

[jasmussen]

Great issue, great use case. The nuance is that to accomplish the above, you need to put a Stack block inside a flex based container (i.e. row) so that it can have Height set to Fill. In other words, you can't do this with the Cover block, which is not flexing.

So rather than bringing flex properties to the Cover block, which will be tricky, enabling the Aspect Ratio control to the Group block and its variations, would be useful. If we are concerned about the awkward situations you could get yourself into (overflow etc), we can reduce prominence by making it a not-shown-by-default tool. We can even start extra conservatively by bringing it to just the Row and Stack blocks.

CC: @andrewserong, I believe you were involved with the initial bringing of Aspect Ratio to Cover.

[richtabor]

we can reduce prominence by making it a not-shown-by-default tool. We can even start extra conservatively by bringing it to just the Row and Stack blocks.

We should definitely consider it not shown by default. It's not a prominent use case and shouldn't be front and center.

The tricky part with aspect ratio and the group block is that if you use aspect ratio, there's a decent chance the block will not render as expected on mobile, as the contents of the block will likely conflict with the ratio.

[andrewserong]

Thanks for the ping! I've added this issue to the tracking issue in #58230. In the shorter to mid-term, I likely won't have scope to pick up tasks for this feature, but it's a great idea.

When it comes to expanding usage of the aspect ratio support, one of the things that would be good to untangle first is the problem of overflow behaviour as discussed in #60224 (and that y'all have flagged here). I like the ideas discussed there for the interplay between the size of content, minimum heights that might be set, and a desired aspect ratio, however getting those things to play nicely (and in conjunction with current browser support) has proved very tricky.

So I think my main point here, is that it's a good idea for a feature (to expand usage of the block support), but I believe it will be a bit of a rabbit hole to get it working the way users would expect, so unfortunately expanding the usage is possibly not going to be as easy to achieve as it should be.

[jasmussen]

The tricky part with aspect ratio and the group block is that if you use aspect ratio, there's a decent chance the block will not render as expected on mobile, as the contents of the block will likely conflict with the ratio.

To Andrew's point above, the suggested fix for handling overflow of allowing the content inside to expand vertically the block if there's more than what fits would be good. If not for the cover, then for the groups, and it might be simpler there. That would, in other words, make the aspect ratio work as a min-height. It does that by default, so the complexity here lies in some of the other stuff we're doing.