Add aspect ratio selector to Cover Block

[henriqueiamarino]

What problem does this address?

A similar issue was closed in 2020, #23092. Today, we can only edit the Minimum height of cover, but due to the current stage of Gutenberg, we can fix it consistently.

Cover block styles today

What is your proposed solution?

Add the aspect ratio selector just as we have on image blocks.

Image block styles today

[andrewserong]

@jasmussen did you have an idea in mind for how this should ideally work? From a little digging, aspect-ratio seems to both have pretty good browser support, and from hacking around in Codepen, content that extends beyond the height of the container will naturally extend the container, so it seems like it might behave similarly to minimum height in that respect (which IMO is a good way for it to behave). Basically it sounds like it'd work like "try to contain to an aspect ratio if the content will allow it, otherwise expand the container".

If exploring controls for this, I think we should probably look at it as part of block supports, so that we could (potentially) enable it for both Cover and Group blocks at the same time, instead of tying it specifically to the Cover block. It also seems a little related to background image support, so I've linked to this issue from #54336.

I'm currently looking into a few other tasks at the moment, but if no-one beats me to it, I'm happy to have a hack around with this idea and see what seems feasible. I imagine this issue could be one that's a fair bit more complex than it appears at first glance, but it sounds worthwhile to try to get a prototype working so we can see how challenging it might be to get working 🙂

[jasmussen]

Thanks so much for looking. Yes I was indeed hoping to use aspect-ratio, just like the Image block does:

In fact, I was hoping we could transplant more or less the exact behavior from how the aspect selector works on the Image block. Here's a GIF of the image block in the editor:

Shown in that GIF:

• Selecting the image block and highlighting the aspect ratio dropdown, as well as width and height, in the inspector.
• Selecting Square (1:1) and then Wide (16:9) aspect ratios and seeing the image adjust as a result
• Adding an explicit height to the "height" control, and showing what that has of an effect.

Notably the last part — when you add a height, it combines with the aspect ratio, so 16:9 plus "Wide" makes for a small landscape picture. This is mainly relevant to the Cover block in that it only has a max-height control. Now if we just add the aspect ratio control and ignore the width and height controls (though if it's easier to add those to at the same time that's fine), then presumably the end result would be the same. If you apply an aspect ratio, then that property will control the height based on the width, until the max-height is reached.

I'd agree a block supports would be great, this is indeed useful to Group as well.

[andrewserong]

I have a WIP PR exploration into this feature over in #56897. There are a few potential limitations and peculiarities with how aspect ratio works, but it's ready for playing with if folks would like to take a look!