Image Block: Revert circle mask, add "rounded"

[jasmussen]

Fixes #16130, notably a followup to the issue outlined in #16130 (comment).

The "circle mask" variation has the benefit of creating a perfect circle out of any shape image. However it doesn't change the dimensions of the image, so the tradeoff is that the image footprint is still large, and resize handles now float in air.

This PR changes it to a "rounded" style, which sets a very high border radius ensuring that the smallest sides on a rectangular image are perfectly rounded, creating a pill-shape. When the image is perfectly square, the variation will be perfectly circular. This ensures that the variation is useful both when images are rectangular, it ensures the resize handles are appropriately placed, it fixes an issue where Microsoft Edge did not render the mask properly, and it indicates to the user that if they want a perfect circle, they can upload a square image, or change the dimensions in the sidebar.

Before:

After:

[melchoyce]

I find this kind of frustrating because it changes the intent of the style, but my frustration is entirely with WordPress's media library and how hard it is to quickly crop an image, especially using specific proportions. This is probably a better approach in the long run, even thought it makes more work for users.

[jasmussen]

but my frustration is entirely with WordPress's media library and how hard it is to quickly crop an image

I think that's the aspect to focus on. The problem with the current mask is that you can't align multiple next to each other with controlled margins, because their original dimensions still exist and are uncropped.

[karmatosed]

I agree with Mel, my frustration isn't the issue here it's the media library problem. With that in mind, let's merge this. Thanks and doing code review and test this also works 👍